Оптимизирането на изображенията в сайта подобрява скоростта на зареждане на страниците му. Също така, ако изображенията се класират добре в раздела „търсене на изображения“ в Google, това ще доведе още повече посетители на сайта.
Оптимизирането е особено нужно за сайтовете с много изображения, например онлайн магазини, блогове и други.
Вижте защо е нужно и какво означава оптимизиране на изображенията в WordPress:
Защо се налага оптимизиране на изображенията?
Ето основните причини за оптимизацията на изображенията:
- Подобряване на скоростта на зареждане;
- Подобряване на потребителското преживяване;
- Подобряване на SEO ранкинга;
- Увеличаване на реализациите.
Първата причина е най-важна, защото от нея зависят останалите. Когато на страницата има изображения с голям размер (например над 200 kB всяко), това забавя осезаемо зареждането ѝ. А скоростта на зареждане влияе върху две важни неща – потребителското преживяване и оценката от търсачките. Колкото по-бързо се зарежда страницата, толкова е по-добро изживяването на посетителите и толкова по-добра позиция има тя в резултатите от търсене.
Вижте на какво още влияе скоростта на зареждане: Защо е важна скоростта на зареждане на сайта? | Blog
Особено чувствителни към времето за зареждане на страниците са мобилните посетители. Всеки един сайт се зарежда по-бавно през мобилно устройство, отколкото през десктоп. На първо място причината за забавеното зареждане идва от мобилния интернет, който се използва от мобилните посетители. След това, за по-стари устройства, може да окаже влияние и мощността на хардуера им.
Но на приказки не е лесно да си представим как изглежда зареждането на оптимизирани и неоптимизирани картинки. Затова направихме няколко теста.
Тествахме мобилното и десктоп време за зареждане на една страница с 4 изображения, първо без оптимизация и след това със.
Ето размерите на изображенията преди и след оптимизацията:
Скорост на зареждане на десктоп и мобилно устройство
Направихме тестове с различни уеб инструменти като PageSpeed Insights, WebPageTest, Pingdom и BrowserStack. Показателите във всички инструменти се различаваха относно времето за зареждане, но при всички се виждаше отчетливо голямото забавяне, което може да предизвикат неоптимизираните изображения.
Избрахме да Ви покажем резултатите от уеб инструмента SpeedLab на BrowserStack, тъй като са подредени много разбираемо. Също така тестването се извършва на истински устройства и браузъри.
Неоптимизирани изображения
Разликата между мобилното и десктоп зареждане е голяма, почти два пъти по-бавно се зарежда страницата на мобилно устройство. От което и всички останали показатели са двойно по-лоши.
First contentful paint (FCP) – Тази метрика измерва за колко време след заявка за страницата, браузърът е изобразил първата част от съдържанието ѝ (от DOM документното дърво).
Speed Index – Тази метрика показва колко бързо се попълва съдържанието в страницата, по време на зареждането ѝ.
Вижте още: SEO Q&A: Всичко за PageSpeed Insights [Част II] | Blog
Оптимизирани изображения
Намаляването на големината на изображенията се отразява в почти двойно ускоряване на страницата.
Както може да се види, от BrowserStack дават като ориентир за „бързо“ зареждане на мобилно устройство времето до 3.30 секунди, а за десктоп до 1.80 секунди.
Когато планирате оптимизации на сайта, това може да Ви послужи като ориентир, да се опитате да влезете в рамките на тези стойности. Но оптимизациите не се извършват отделно за мобилно и десктоп зареждане. Ако оптимизирате за мобилното зареждане, каквото и да направите и подобрите при него, това неминуемо ще се отрази в ускоряване и на десктоп зареждането.
От тестовете се вижда, че големите картинки, в нашия случай 4 броя с обща големина от 1.75 MB, се отразяват в почти 2 секунди забавяне на мобилното зареждане (неоптимизирани 4.30 сек – оптимизирани 2.60 сек).
Как биха повлияли тези почти 2 секунди забавяне върху реализациите в страницата?
Според Google, само 1 секунда забавяне в мобилното зареждане на сайта намалява реализациите с 20%.
Какво означава оптимизирано изображение?
Първо какво са изображенията? Те са файлове и като такива те имат големина – килобайти, мегабайти. После са графични изображения и като такива имат размери – ширина и височина. Което и от двете да намалите, Вие прилагате оптимизация на изображението.
Тъй като изображението за уеб не се използва за печат или принтиране за билборд, неговите размери (ШхВ) не е нужно да са по-големи от пространството на страницата, в което се зарежда. Отделно от това, големината на файла (MB) оказва директно влияние върху времето му за изтегляне от сървъра. Всички ресурси, които са предназначени за уеб (което означава всички файлове), е добре да не са големи, да са килобайти, а не мегабайти.
Колкото е по-голям един файл, толкова повече време ще отнеме изтеглянето му. Ако файлът е ресурс от страницата на сайт, то той може да забави цялостното зареждане на тази страница.
Изображенията са важни елементи от дизайна и отделно като добавки за разбирането на съдържанието. Добре е да са видими веднага при зареждане на страницата. Но изтеглянето и показването на една картинка от 2 MB може да отнеме много време, особено на мобилно устройство.
Решението за прекалено големите размери (ШхВ) е, да се генерират подходящи по-малки варианти на изображението, които се изтеглят спрямо размера на дисплея. По този начин не се изтеглят от сървъра прекалено големи изображения, при положение че ще се показват на малък дисплей.
Решението с големината (MB) на файла е прилагането на компресия. Нивото на компресията и качеството на изображението зависи от избрания формат (jpg, png, webp и други).
Да е с оптимални размери за различните екрани
Различните устройства (десктоп, таблети, мобилни) имат различни размери на дисплея и различни резолюции (пиксели в ширина и височина).
Ако на нашия сайт имаме картинка, която се показва по цялата ширина в браузъра, за да може да е с най-добро качество и да изглежда добре, бихме решили да я качим в размер с широчина 1920px. А всички останали устройства, с по-малки екрани, ще свалят същата тази картинка и ще я преоразмеряват.
В това се крие проблемът с избора на подходящ размер. Най-лесно е да качим много голяма картинка, която да се зарежда на всички устройства и само да се преоразмерява в браузъра. За мобилните устройства големите файлове са проблемни и забавят много зареждането на страницата.
Много сайтове имат ограничена широчина на оформлението, зададена от WordPress темата, която използват. Най-често около 1100-1200px. Ако блокът (контейнерът) на съдържанието, в което се показват картинките, е с максимална широчина 1200px, няма да е нужно да качваме изображения с по-голяма широчина. Няма да е нужно, защото ако сайтът се зареди на устройство с по-голяма резолюция от 1200px, например 1920px, контейнерът ще си остане с размер 1200px (защото има зададена максимална широчина, която няма да надхвърли).
(Проверката на размерите на зареждащите се изображения е извършена с плъгина EWWW Image Optimizer)
Но дори да преработваме картинките и да качваме такива до 1200px, проблемът с малките екрани остава. Мобилните потребители ще свалят голямата картинка и браузърът ще я преоразмерява до към 500-300px в широчина.
За да не изтеглят мобилните посетители прекалено големи картинки за техния дисплей, можем да създадем няколко различни варианта на оригиналната картинка – с различни размери.
Но как да решим какви размери да са вариантите и колко?
При разработката на темата или дизайна на нов сайт, първо може да се провери какви са най-често използваните резолюции в глобален или локален мащаб – в зависимост от целевата аудитория.
За октомври 2021 най-използваните резолюции за България са:
- десктоп: 1920×1080, 1366×768, 1536×864;
- мобилно устройство: 360×640, 360×780, 412×915;
- таблет: 768×1024, 600×1024, 1280×800.
Ако сайтът вече работи, тогава най-използваните от посетителите резолюции най-лесно може да се видят в инструментите за статистики и анализи като Google Analytics например.
Тъй като не е практично да създадем за всяко възможно устройство отделен вариант на изображението (реално отделен файл), може да изберем няколко компромисни размера, които да се използват от голяма част от близки по резолюция устройства.
Например според дизайн системата на Microsoft, може да се създават по три варианта на изображението:
- Small (по-малък от 640px);
- Medium (641px до 1007px);
- Large (1008px и по-голям).
Всяка картинка ще служи на определена група от близки по размери на екрана устройства. Границата, на която ще се превключва към подходящия вариант, се нарича „breakpoint“.
WordPress има вградена функционалност за създаване на допълнителни варианти на изображенията. Настройките ѝ се намират в Settings » Media.
По принцип WordPress темата използва своя функционалност и си задава своите варианти за изображението.
(Всички варианти, които се генерират в WordPress, можете да видите с плъгина EWWW Image Optimizer » Settings » EWWW Image Optimizer » Enable Ludicrous Mode, таб Resize)
Ако трябва ръчно да се генерират вариантите на изображението, може да се използва уеб инструмент като например https://www.responsivebreakpoints.com/. Освен създаване на самите варианти, инструментът предлага и специалния код (HTML5 picture tag example), който трябва да се зададе за картинката.
И тук идваме до отговора на въпроса – след като имаме няколко варианта на изображението в различни размери, как браузърът избира кой да изтегли?
Точно със специален код, който се добавя в img тага на картинката. В този код се описват всички налични варианти, от които браузърът сам избира кой да зареди.
WordPress по подразбиране има вградена и тази функционалност за описване на всички генерирани варианти на оригиналното изображение с атрибутите srcset и sizes в тага на изображението <img />.
<img src="image.jpg" alt=”image”
srcset="image-320.jpg 320w, image-640.jpg 640w"
sizes="(max-width: 900px) 45vw, 300px" />Да е с оптимална големина на файла (модерни формати за изображения)
Големината на файла пряко зависи от това в какъв формат сме го записали. Едни от най-използваните формати за изображения в уеб са PNG, JPG, SVG, GIF.
Различните формати за изображения предлагат различни нива компресия. Чрез компресия на файла се цели намаляване на големината му, като същевременно се запазва качеството на изображението. Когато компресията не нарушава качеството, това се нарича lossless компресия. Обратното се нарича lossy компресиране, при което качеството на изображението се влошава. Най-ярък пример за намаляване на качеството на изображението е когато използваме JPG формата.
В класацията на форматите обаче се изкачва стабилно един не толкова нов вече формат – WebP. А след него на хоризонта се вижда друг съвсем нов – AVIF.
AVIF се използва малко все още, но предимно на силно посещавани сайтове с голям трафик като Netflix.
И двата формата вече можем да ги видим като препоръчани в някои инструменти за тестване на сайтове като PageSpeed Insights.
WebP
WebP е формат за изображения, разработка на Google. Изображенията са с по-малък размер на файла – с над 25% спрямо други формати като JPG и PNG.
- До 34% по-малък файл от JPG, до 26% от PNG;
- Поддържа анимации и прозрачност;
- Разработван от Google;
- Първа версия – септември 2010 г.;
- Поддържа се от 96% от браузърите (към март 2024 г.);
- Поддържа се в WordPress от версия 5.8.
Тече разработката на новата версия WebP 2, в която основната цел е да се доближи до нивото на компресия при AVIF.
Уеб инструменти, с които можете да конвертирате изображения в WebP формат: Squoosh.
WordPress плъгини, с които можете да оптимизирате изображенията в сайта и да ги конвертирате в WebP формат: EWWW Image Optimizer, Imagify (изисква акаунт в imagify.io), Optimole (изисква акаунт в optimole.com).
Вижте повече за плъгина: EWWW Image Optimizer – оптимизиране на изображения в WordPress | Help
AVIF
AVIF е доста нов формат за изображения, базиран на AV1 видео формата. Първата му версия е пусната през февруари 2019 г. Този формат се представя като по-добър в компресирането на изображения спрямо другите формати – JPG, PNG и дори WebP. Може да се използва за неподвижни изображения или за поредици от изображения.
- До 50% по-малък файл от JPG;
- Поддържа HDR и прозрачност;
- Предлага най-високо ниво на lossless и lossy компресия;
- Разработван от AOMedia (Alliance for Open Media);
- Първа версия – февруари 2019 г.;
- Поддържа се от 92% от браузърите (към март 2024 г.) – Firefox, Chrome, Opera, Opera Mobile, Android, Chrome (Android).
Поддържа се и в новата версия на Android 12, пусната октомври 2021 г. Засега няма да е форматът по подразбиране за снимките, които се правят с приложението за заснемане на телефона.
Уеб инструменти, с които можете да конвертирате изображения в WebP формат: avif.io, Squoosh.
WordPress плъгини, с които можете да оптимизирате изображенията в сайта и да ги конвертирате в AVIF формат: ImageEngine Optimizer CDN (платен лиценз).
Как да оптимизираме изображенията в WordPress?
Оптимизирането на изображенията може да се извърши или ръчно, или за по-бързо и лесно, с плъгини.
Ръчното оптимизиране е по-полезно за изображенията, които все още не сме качили в сайта. Например да се намалят размерите и големината им с помощта на някакъв инструмент за обработка на изображения като PhotoShop или уеб приложения като iLoveIMG (на български език) и Squoosh.
Автоматизираната оптимизация с плъгини е по-бърза. Може да се приложи на вече качените изображения, както и при самото качване на нови изображения в WordPress. Например при качването може да се намалят размерите на оригиналното изображение до зададени параметри (например до 1024px широчина) и да се конвертира в определен формат (например в WebP).
Има много плъгини за оптимизация на изображения в WordPress като reSmush, Imagify, Optimole, ShortPixel и EWWW Image Optimizer.
За да използвате Imagify, Optimole или ShortPixel, ще е нужно да си направите и регистрация в съответния сайт на услугата.
Между reSmush и EWWW Image Optimizer, избрахме втория, защото има голямо разнообразие от настройки и опции.
С EWWW Image Optimizer може да се оптимизират вече качените изображения в сайта, както и при качването на нови, да се прилагат оптимизации като:
- Конвертиране във формат WebP;
- Преоразмеряване до предварително зададени максимални размери (ШхВ) в настройките;
- Оптимизиране на големината, премахване на излишна информация от файла на изображението (EXIF, коментари и други).
Вижте повече подробности за настройките и работата с този плъгин в помощната ни статия: EWWW Image Optimizer – оптимизиране на изображения в WordPress | Help
Заключение
Оптимизацията на изображенията в сайта се налага поради това, че страниците му започват да се зареждат по-бавно, когато на тях има прекалено големи изображения (и като размери, и като килобайти). Особено чувствителни към големината на изображенията са мобилните посетители, които зареждат сайта през мобилен интернет. Колкото по-големи са изображенията, толкова по-бавно се зареждат при тях страниците.
Към момента тенденцията е преминаването към WebP формата за изображения, който позволява добро качество на изображенията, но с много по-малък размер на файла им (сравнено с познатите PNG, JPG). WordPress има поддръжка на WebP изображения – можете да качвате такива изображения през библиотеката или директно в блок-редактора. Има и плъгини, с които може да се конвертират вече качените изображения в WebP формат.
Като поглед в бъдещето виждаме обещаващ нов формат за изображения – AVIF, който се определя като заместителя на JPG и PNG форматите. За момента поддръжката му е в почти 70% от браузърите, а в WordPress все още не е добавена поддръжка.
Абонирайте се за СуперБлога, за да научавате първи най-важното и полезното от света на уеб, касаещо Вашия сайт и дигитално развитие.
