В тази статия ще обясня как да оптимизирам изображения за уеб. От какво се състои? Е, да коригираме размера на всяко изображение към този на нашия уебсайт (сега ще видим какъв е това) и да намалим разделителната му способност до че изображението „тежи“ по-малко. Тоест намалете размера му в пиксели и в байтове. Сега, когато сме наясно, Да отидем на бъркотията!

Размерът на изображенията влияе върху скоростта и позиционирането на нашия уебсайт

Всеки, който е използвал измервателни инструменти скорост на зареждане на вашия уебсайт, ще сте забелязали това изображения са отговорни за много висок процент от време и размер на зареждане от нашия уебсайт. Това е един от първите фактори, които трябва да оптимизираме, тъй като Google наказва високи времена на зареждане.

В тази статия от моя приятел Jesús AF можете да намерите инструменти и съвети, които ще ви помогнат подобрете скоростта на вашия уебсайт.

Времето за зареждане на изображение основно зависи от два фактора:

  • Размерът на изображението в байтове. Този размер е по-голям, колкото по-голямо е (в пиксели) изображението и колкото по-висока е разделителната способност (в точки на инч или dpi).
  • Ако размерът в пиксели (ширина и височина) съвпада точно с контейнера за изображение

Първото нещо е да бъде ясно, че размерът в пиксели и разделителната способност на изображението са различни неща. Ако искаме да отидем по-дълбоко тук, можем (на английски).

ДА СЕ практически ефекти това, което ни интересува, е да знаем, че трябва коригирайте изображението според размера на контейнера, където ще бъде вмъкнато и това разделителната способност трябва да бъде намалена до 72 dpi за да намерим баланс между качество и размер на изображението на нашия уебсайт. Ако не го направим по този начин, имаме два ефекта:

  1. The по-голям размер в байтове прави браузърът отнема повече време за изтегляне. Тогава ще видим конкретните цифри, за които говорим.
  2. Ако той размерът в пиксели (ширина и височина) на изображението не съответства на елемента, който го съдържа, браузърът на потребителя (било то Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera или друг) ще трябва да направи изчисления, за да намали размера на изображението и да го покаже правилно. Това се превръща в време за процес, което кара нашия уебсайт да отнеме повече време за показване.

Как да оптимизираме изображение за мрежата

Можем да използваме множество от инструменти за промяна на параметрите на размера и разделителната способност на изображението, но благодарение на разговор във Facebook открих страхотен инструмент, наречен FastStone Resizer.

Тази проста програма ви позволява да оптимизирате изображенията в мрежата по много прост начин. И също така позволява групова работа, тоест прилагане на едни и същи настройки към няколко изображения едновременно.

Какъв е правилният размер за изображенията в моя уебсайт

добре зависи от елемента, който го съдържа. Тук можете да научите малко повече за маркера "div", който е най-общият контейнер, който ще намерим, но е технически факт, че повечето потребители дори не трябва да знаят 😉

Да знам точните данни за размера Имаме инструменти, някои по-общи и други по-специфични, но най-лесният начин е да използвате инспектор на елементи използвани от почти всички основни браузъри днес. Инспекторът на елементи ни помага на програмистите в определени технически задачи.

Ще трябва да търсим (или да създадем от нулата) изображение с максималната ширина, която ни интересува на нашия уебсайт. В моя случай обикновено използвам пълната ширина на колоната на статията, която е 795 пиксела, но може да се случи, че искаме да включим по-малко изображение и процесът ще бъде същият.

Как да разберем размера на контейнера на изображение на нашия уебсайт

С разрешението на Офелия Гарсия дел Кастило взех за пример някои изображения от нейния блог (http://castillomendia.blogspot.com.es/). Също така тук имате тяхната фен страница във Facebook и тук (http://www.castillomendiamadrid.com/) имате техния уебсайт и онлайн магазин.

За пример съм избрал изображението, посочено в заснемането. Можете да кликнете върху изображението, за да го видите в оригиналния му размер.

способност

Ако кликнете върху изображението на мрежата с десния бутон и изберете опцията "Инспектирай елемента", Можем да осъществим достъп до HTML кода. Можете да кликнете върху изображението, за да го видите в оригиналния му размер.

На следващата екранна снимка можем да видим това действителният размер на изображението (1200 пиксела х 899 пиксела) и този, който виждаме в мрежата (320 пиксела х 239 пиксела) не съвпадат. Можете да кликнете върху изображението, за да го видите в оригиналния му размер.

И какви ефекти има това върху нашия уебсайт?

Фактът, че не съвпада действителният размер на изображението и размера, с който се появява в мрежата ни наказва в очите на Google.

Това е така, защото нашият уеб браузър трябва да извършва изчисления, за да коригира действителния размер на изображението до размера, който виждаме на екрана., а това струва време.

След като вече знаем какво искаме, нека го направим

Използване на инструмента за ретуширане FastStone Resizer ще намалим размера на нашите изображения докато не подхожда до размера, който ще видим в мрежата.

Изберете изображенията, които искаме да намалим

След като програмата се отвори, първата стъпка е да изберете изображенията, които искаме да ретушираме.

Трябва да помним, че изображенията, които трябва да се ретушират, трябва да бъдат на нашия компютър.

С тази програма не можем да редактираме изображенията, които вече са на нашия уебсайт.

Използване на бутоните "Добавяне"Y"Добави Всички”Можем да избираме снимките една по една или всички наведнъж.

Не трябва да забравяме нито да изберем изходния път (където ще бъдат запазени) с помощта на бутона "Преглед".

Силно се препоръчва да създадете папка, наречена "намалени изображения" или подобна, за да запазите изображенията, които ще бъдат създадени.

На този етап можем да променим изходния формат на изображението сред най-използваните, като JPG, но можем да изберем и други като PNG и дори BMP (не се препоръчва 😉). Всъщност Joaquín Villalón Bravo от Social Beings препоръчва използването на PNG формат.

Следващата стъпка е да кликнете върху „Разширени опции”Да кажем на програмата какъв размер и разделителна способност искаме за нашите изображения. Можете да кликнете върху изображението, за да го видите в оригиналния му размер.

Посочете ширината на нашите изображения

В прозореца, който се отваря при щракване върху „Разширени опции"Първо трябва да изберете раздела"Преоразмеряване".

Тук имаме няколко възможности.

  • Ние можем да избираме промяна на ширината и височината на изображението
  • Ние можем да избираме преоразмеряване въз основа на ширина или височина, а другата страна се изчислява автоматично. Ако ще коригираме изображението до пълна колона (най-често срещаната), това ще бъде опцията за избор. Като пример за моя уебсайт тази ширина е около 795 пиксела. Височината е безразлична, защото изображението може да бъде удължено надолу без големи проблеми с настройката.

Можете да кликнете върху изображението, за да го видите в оригиналния му размер.

Посочете точките на инч (dpi/dpi) за нашите изображения

След като решите размера на изображението трябва да променим разделителната способност, че както сме коментирали, е от 72 точки на инч за мрежата.

Имаме възможност да запазим конфигурацията, в случай че използваме няколко различни според нашите нужди. Можете да кликнете върху изображението, за да го видите в оригиналния му размер.

Колко сме намалили изображенията си? Е, много, много

И накрая, след натискане на „добре”И„Конвертиране", Програмата започва да конвертира.

Когато приключим, можем да видим в резюмето оригиналния размер, крайния размер, процента спрямо първоначалния размер и KB, което запазваме. Можете да кликнете върху изображението, за да го видите в оригиналния му размер.

Както можете да видите, този процент варира между 2 и 10% в сравнение с първоначалния размер.

Това означава, че снимка от 1 MB (приблизително 1000 KB) е намалена на между 20 и 100 KB.

И това е много KB и много време, което спечелихме, зареждайки нашия уебсайт.

Как да видим изображението, което сме намалили до първоначалния му размер

До този момент посочихме как да намалим изображението, показвано в мрежата, но За да покажем изображението в оригиналния му размер и с високо качество, трябва да свържем голямото изображение с малкото така че когато щракнете върху последното, той ни показва изображението в целия му блясък. Освен това си струва да запомните, че трябва да включим атрибута target = "_ blank", така че да отваря изображението в нов прозорец.

Някакво предложение? И ако ви е харесало, споделете!

Ако откриете грешка в статията или някакъв момент за подобряване или ако ви хареса, моля, оставете коментар. И можете да го споделите чрез бутоните под статията.