Оптимизирайки снимките на вашия уебсайт, вие по същество увеличавате скоростта на зареждане на неговите уеб страници. Друго предимство е, че ако снимките са добре класирани в „търсене на изображения“, те ще доведат повече посетители към вашия сайт.
Оптимизацията е изключително важна за сайтове, където броят на изображенията е значителен, включително онлайн магазини, блогове и много други.
Ето какво представлява оптимизацията на изображения в WordPress и защо ви е необходима
• Защо трябва да оптимизираме снимките си?
• Скорост на зареждане на настолен компютър и мобилно устройство
• Какво е значението на оптимизирано изображение?
• Размерът му трябва да е адаптивен за различните екрани
• Размерът на файла трябва да е оптимален (настоящи формати на изображения)
• Как да оптимизираме нашите снимки в WP?
• Заключение
Защо трябва да оптимизираме снимките си?
Основните причини са както следва:
• Подобряване на скоростта на зареждане
• По-добро потребителско изживяване
• По-високо SEO класиране
• Увеличаване на реализациите
Най-важният е първият, защото останалите са зависими от него. Когато уеб страница има снимки с големи размери на файлове (например над 200 kB всяка), те оказват значително влияние върху скоростта на зареждане. От друга страна, бавната скорост на натоварване води до влошаване на потребителското изживяване, както и до класирането в търсачката. Колкото по-бърза е скоростта на зареждане на страницата, толкова по-добро е потребителското изживяване, следователно тя ще се показва по-високо в резултатите от търсенето.
Тук можете да видите какво още се влияе от скоростта на зареждане: Защо скоростта на зареждане на уебсайт е толкова важна?
Когато става въпрос за скорост на зареждане, посетителите от мобилни устройства са от решаващо значение. Всички знаем, че поради няколко причини настолната версия на всеки уебсайт се зарежда по-бързо от неговата мобилна алтернатива. Една от причините това да се случи са мобилните данни, използвани от огромна част от потребителите. Освен това хардуерът на някои по-стари устройства може да не е достатъчен за по-бързо зареждане.
Не е лесно да си представим разликата между скоростта на зареждане на оптимизирани и неоптимизирани изображения. Ето защо направихме някои тестове.
Сравнихме времето за зареждане на уеб страница с четири изображения както на настолни, така и на мобилни устройства. Първият тест беше с неоптимизирани снимки, по време на втория те бяха оптимизирани.
Размерите на файловете на изображенията са както следва:
Общият размер на файла на изображенията е намален от 1,75 MB (1024 kB=1MB) на 210 kB.
Скорост на зареждане на настолен компютър и мобилно устройство
Направихме няколко теста, използвайки различни уеб инструменти като PageSpeed Insights, WebPageTest, Pingdom и BrowserStack. Производителността в различните среди беше различна по отношение на времето за зареждане, но резултатите бяха ясни, имаше огромно забавяне, причината за което може да са неоптимизираните изображения.
Решихме да ви покажем резултатите от SpeedLab на BrowserStack поради единствената причина, че тяхното подреждане е лесно за разбиране. Също така, изпълнението на тестовете беше извършено на реални устройства и браузъри.
Неоптимизирани изображения
Има огромна разлика между скоростта на зареждане на мобилни и настолни компютри. Уеб страницата отнема почти два пъти повече време за зареждане на мобилното устройство. Това е причината другите показатели да са два пъти по-лоши.
Първа боя с съдържание (FCP) – Този показател измерва колко време е необходимо на браузъра да покаже първата част от съдържанието след заявката на страницата (от дървото на DOM документа).
Индекс на скоростта – Този показател показва колко бързо се запълва съдържанието на страницата по време на зареждане.
Разгледайте: SEO Q&A: всичко за PageSpeed Insights [Част 2]
Намаляването на размера на файла води до това, че страницата е почти два пъти по-бърза.
Както можете да видите, според BrowserStack, за да се счита за бърза скорост на зареждане на мобилно устройство, тя трябва да бъде равна или по-малка от 3,30 секунди и до 1,80 секунди за настолен компютър.
Всеки път, когато планирате да оптимизирате уебсайта си, тези стойности може да ви послужат като цели, които трябва да постигнете и дори да надминете. Оптимизациите обаче се извършват едновременно за мобилна и настолна версия на сайта. Без значение какво правите, оптимизирането на уебсайта ви за мобилни устройства неизбежно ще подобри скоростта на зареждане за настолните версии.
Както показват тестовете, по-големите изображения, в нашия случай четири с общ размер от 1,75 MB, причиняват забавяне на мобилното зареждане от почти 2 секунди (неоптимизирани 4,30 секунди – оптимизирани 2,60 секунди).
Как това забавяне от две секунди ще повлияе на реализациите на страницата?
Какво е значението на оптимизирано изображение?
Първо, какво представляват изображенията? Те са файлове и като такива имат размер – килобайти, мегабайти. Освен това те са графични изображения и като такива имат размери – ширина и височина. Без значение кой от тях намалявате, вие прилагате оптимизация на изображението.
Уеб изображенията не се използват за печат и затова техните размери (ШxВ) не трябва да са по-големи от пространството на страницата, в което се зарежда. Освен това размерът на изображението (MB) оказва значително влияние върху времето за изтегляне на сървъра. Всички ресурси, предназначени за мрежата (което означава всички файлове) не трябва да са огромни, т
размерът на наследника не трябва да надвишава килобайта.
Колкото по-голям е файлът, толкова повече време ще отнеме изтеглянето. Ако файлът е източник на уеб страница, това може да забави цялостното зареждане на страницата.
Изображенията са важен елемент от дизайна на уеб страница, не само това, но са и чудесно допълнение към разбирането на съдържанието. Те трябва да се виждат веднага щом страницата се зареди. Изтеглянето и показването на картина от два MB обаче може да отнеме известно време, особено на мобилно устройство.
Решението за изображения с големи размери (ШxВ) е да се генерират подходящи по-малки алтернативи, които се изтеглят според размера на дисплея. По този начин избягваме изтеглянето на големи снимки, тъй като те се показват на малък екран.
Решението за твърде големи файлове е да се приложи компресия. Нивото на компресия и качеството на изображението зависят от формата на файла (jpg, png, webp и други).
Размерът му трябва да е адаптивен за различните екрани
Различните устройства (настолни компютри, таблети, телефони и др.) имат различни размери и разделителни способности на дисплея (пиксели по ширина и височина).
Ако имаме изображение на нашия сайт, показано по цялата му ширина, ще го качим с ширина 1920px, защото искаме то да е с най-добро качество и да изглежда добре. Всички останали устройства ще изтеглят една и съща картина и ще я преоразмерят според екраните си.
Тук се крие проблемът с избора на правилния размер. Винаги е най-лесният начин да качите голямо изображение, което се зарежда на всички устройства и преоразмерява в браузъра. Големите файлове са проблематични за мобилните устройства, защото забавят процеса на зареждане на страницата.
Много уебсайтове имат ограничено оформление по отношение на ширината, през повечето време се задава от тяхната тема на WordPress. През повечето време е около 1100-1200px. Ако блокът (контейнерът) на съдържанието, в който се показват снимките, има максимална ширина 1200px, качването на снимка с по-голяма ширина няма смисъл. Например, ако сайтът е зареден на устройство с по-висока разделителна способност от 1200px, контейнерът ще остане 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, всяко изображение може да има три версии:
• Малък (по-малко от 640px)
• Среден (641px до 1007px)
• Голям (1008px и повече)
Всяко изображение ще обслужва конкретна група устройства, близки по размер на екрана. Мястото, където ще преминете към подходящата опция, се нарича „точка на прекъсване“.
WordPress има вградена функция за създаване на допълнителни версии на изображения. Настройките му са в Настройки »Медия.
Като цяло, WP темата използва своята функционалност, за да зададе своите версии на изображения.
(Можете да видите всички генерирани версии с EWWW Image Optimizer »Settings» EWWW Image Optimizer »Enable Ludicrous Mode, Resize tab plugin)
Ако трябва да генерирате ръчно вариантите, можете да използвате уеб инструмент като https://www.responsivebreakpoints.com/. Той не само създава версиите на изображенията, но също така ви предоставя специалния код (пример на HTML5 маркер за картинка), който всяко изображение трябва да има.
И ето ни отговора на въпроса – след като имаме няколко версии на изображения, как браузърът решава коя да изтегли?
Отговорът е прост, със специален код, добавен към 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” />
Размерът на файла трябва да е оптимален (настоящи формати на изображения)
Размерът на файла зависи изцяло
ent във формата, в който сме го записали. Някои от най-популярните формати на изображения в мрежата са PNG, JPG, SVG и GIF.
Различните формати на изображения предлагат различни нива на компресия. Целта на компресирането на файла е да намали размера на файла, като същевременно запази качеството на снимката. Когато няма влияние върху качеството на изображението, ние го наричаме компресия без загуби. Обратното на това е компресия със загуби, при която качеството на картината се влошава. Форматът JPG е идеалният пример за нарушаване на качеството на изображението по време на компресиране.
Въпреки това, в класацията на форматите, един не толкова нов формат (WebP) непрекъснато се покачва. След него можем да видим още една чисто нова на името на AVIF.
AVIF все още не е толкова използван, но се използва най-вече от уебсайтове с голям трафик като Netflix.
И двата формата обаче се появяват в препоръчания раздел на няколко инструмента за тестване на уебсайтове, като Speeds Insights.
WebP
WebP е графичен формат, разработен от Google. Изображенията имат по-малък размер на файла – над 25% в сравнение с други формати като JPG и PNG.
• До 34% по-малък файл от JPG, до 26% по-малък от PNG
• Поддържа анимации и прозрачност
• Разработено от Google
• Първа версия – септември 2010г
• Поддържа се от 95% от браузърите (около ноември 2021 г.)
• Поддържа се в WP от версия 5.8
Новата версия на WebP 2 е в процес на разработка. Основната му цел е да постигне нивото на компресия на AVIF.
Уеб инструмент, с който можете да конвертирате изображения във формат WebP, е Squoosh.
Изброихме няколко плъгина, които можете да използвате за оптимизиране и конвертиране на изображения във формат WebP, те са както следва: EWWW Image Optimizer, Imagify (изисква акаунт в imagify.io), Optimole (изисква акаунт в optimole.com).
Можете също да прочетете повече за приставката тук: EWWW Image Optimizer – Оптимизиране на изображения в WP.
AVIF
AVIF е сравнително нов формат на изображения, базиран на видео формата AV1. Първата му версия беше пусната през февруари 2019 г. Този формат превъзхожда всеки друг, когато става въпрос за компресия (JPG, PNG и дори WebP). Може да се използва в изображения, както и в поредици от изображения.
• До 50% по-малък файл от JPG
• Поддържа HDR и прозрачност
• Предлага най-високото ниво на компресия без загуби и загуби
• Разработено от AOMedia (Алианс за отворени медии)
• Първа версия – февруари 2019г
• Поддържа се от 69% от браузърите – Firefox, Chrome, Opera, Opera Mobile, Android, Chrome (Android)
Поддържа се и в новата версия на Android 12, пусната през октомври 2021 г. Засега няма да бъде форматът по подразбиране за снимки, направени с камерата на телефона.
Уеб инструменти, които могат да конвертират изображения във формат AVIF: avif.io, Squoosh.
Споменахме някои WP плъгини, които можете да използвате за оптимизиране и конвертиране на изображения във формат AVIF, те са както следва: ImageEngine Optimizer CDN (платен лиценз).
Как да оптимизираме нашите изображения в WordPress?
Можете да оптимизирате вашите изображения ръчно или чрез плъгин.
Ръчната оптимизация е по-полезна за изображения, които все още не сме качили на сайта. Например, ако искаме да намалим размерите и размера на файловете с помощта на инструмент за обработка на изображения като PhotoShop или уеб приложение като iLoveIMG (това е на български), както и Squoosh.
По-бързият начин за оптимизиране на снимките е чрез автоматизиран плъгин. Може да се прилага както към вече качени изображения, така и при качване на нови в WP. Например, когато качвате изображение, намалявате разделителната способност на снимката, за да зададете параметри (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
Заключение
Оптимизирането на изображението в уебсайт е необходимо, защото страниците му започват да се зареждат по-бавно, когато снимките са твърде големи (както по размер, така и в килобайти). Особено чувствителни към размера на изображенията са мобилните посетители, които зареждат сайта чрез мобилни данни. Колкото по-големи са снимките, толкова по-бавна е скоростта на зареждане на страницата.
В момента тенденцията е да се премине към формат на изображението WebP, което позволява добро качество на изображението, но с много по-малък размер на файла (в сравнение с познатите PNG, JPG). WordPress поддържа WebP изображения, които можете да качите чрез библиотеката или директно в редактора на блокове. Някои плъгини могат да конвертират вече качени изображения във формат WebP.
Гледайки към
В бъдеще виждаме обещаващ нов графичен формат – AVIF, който се определя като заместител на JPG и PNG форматите. В момента се поддържа в почти 70% от браузърите, но WordPress все още не е добавил поддръжка.
