Защо и как да оптимизираме снимките си в WordPress?

Като оптимизирате снимките на уебсайта си, вие по същество увеличавате скоростта на зареждане на уеб страниците му. Друго предимство е, че ако снимките са добре класирани в „търсенето на изображения “, те ще доведат до повече посетители на сайта ви.

Оптимизацията е изключително важна за сайтове, в които броят на изображенията е значителен – онлайн магазини, блогове и много други.

• Ето какво е оптимизация на картината в WordPress и защо се нуждаете от нея
• Защо трябва да оптимизираме снимките си?
• Скорост на зареждане на настолни и мобилни устройства
• Какво е значението на оптимизираното изображение?
• Размерът му трябва да бъде адаптивен за различните екрани
• Размерът на файла трябва да е оптимален (настоящи формати на изображението)
• Как да оптимизираме снимките си в WP?
• Заключение

Защо трябва да оптимизираме снимките си?

Основните причини са следните:

• Подобряване на скоростта на зареждане

• По – добро потребителско изживяване

• По – високо SEO класиране

• Увеличаване на реализациите

Най – важното е първото, защото останалите са зависими от него. Когато една уеб страница има снимки с големи размери на файловете (например над 200 kB всяка), те оказват значително влияние върху скоростта на зареждане. От друга страна, бавната скорост на товарене води до влошаване на потребителското изживяване, както и на класирането в търсачките. Колкото по – бърза е скоростта на зареждане на страницата, толкова по – добро е потребителското изживяване, следователно тя ще се показва по – високо в резултатите от търсенето.

Тук можете да видите какво друго се влияе от скоростта на зареждане: Защо скоростта на зареждане на уебсайта е толкова важна?

Когато става въпрос за скорост на зареждане, посетителите от мобилни устройства са от решаващо значение. Всички знаем, че поради няколко причини десктоп версията на всеки уебсайт се зарежда по – бързо от мобилната му алтернатива. Една от причините, поради които това се случва, са мобилните данни, използвани от огромна част от потребителите. Освен това хардуерът на някои по – стари устройства може да не е достатъчен за по – бързо зареждане.

Не е лесно да си представим разликата между скоростта на зареждане на оптимизираните и неоптимизираните изображения. Ето защо направихме някои тестове.

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

Размерите на файловете на изображенията са както следва:

Общият размер на файловете на изображенията е намален от 1,75 MB (1024kB =1MB) до 210 kB.

Скорост на зареждане на настолни и мобилни устройства

Направихме няколко теста с помощта на различни уеб инструменти като PageSpeed Insights ,WebPageTest, Pingdomи BrowserStack. Изпълнението в различните среди беше различно по отношение на времето за зареждане, но резултатите бяха ясни, имаше огромно забавяне, причината за което може да са неоптимизираните изображения.

Решихме да ви покажем резултатите от SpeedLab на BrowserStack по единствената причина, че подреждането им е лесно за разбиране. Също така, изпълнението на тестовете е направено на реални устройства и браузъри.

Неоптимизирани изображения

Има огромна разлика между скоростта на зареждане на мобилни и настолни устройства. Зареждането на уеб страницата на мобилното устройство отнема почти два пъти повече време. Това е причината другите показатели да са два пъти по – лоши.

Първа съдържателна боя (FCP) – Този показател измерва колко време отнема на браузъра да покаже първата част от съдържанието след заявката за страница (от дървото с документи DOM).

Индекс на скоростта – Този показател показва колко бързо се запълва съдържанието на страницата по време на зареждане.

Намаляването на размера на файла води до това, че страницата е почти два пъти по – бърза.

Както можете да видите, според BrowserStack, за да се счита скоростта на зареждане на мобилно устройство за бърза, тя трябва да бъде равна или по – малка от 3,30 секунди и до 1,80 секунди за настолен компютър.

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

Както показват тестовете, по – големите изображения, в нашия случай четири с общ размер 1,75 MB, причиняват забавяне на мобилното зареждане от почти 2 секунди (неоптимизирани 4,30секунди – оптимизирани 2,60 секунди).

Как това забавяне от две секунди ще се отрази на реализациите на страницата?

Какво е значението на оптимизираното изображение?

Първо, какво представляват изображенията? Те са файлове и като такива имат размер – килобайти, мегабайти. Също така, те са графични изображения, и като такива, те имат размери – ширина и височина. Без значение коя ще намалите, прилагате оптимизация на изображението.

Уеб изображенията не се използват за печат и затова техните размери (WxH) не трябва да са по – големи от пространството на страницата, в което се зарежда. Освен това размерът на изображението (MB) оказва значително влияние върху времето за изтегляне на сървъра. Всички ресурси, предназначени за мрежата (което означава, че всички файлове) не трябва да бъдат огромни, техният размер не трябва да надвишава килобайта.

Колкото по – голям е файлът, толкова по – дълго ще отнеме изтеглянето. Ако файлът е прибягване до уеб страница, това може да забави цялостното зареждане на страницата.

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

Решението за извънгабаритни изображения (WxH) е да се генерират подходящи по – малки алтернативи, които се изтеглят според размера на дисплея. По този начин избягваме изтеглянето на големи снимки, тъй като те се показват на малък екран.

Решението за файлове, които са твърде големи, е да се приложи компресия. Нивото на компресия и качеството на изображението зависят от формата на файла(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 Анализ, за да проверите кои са резолюциите, които хората използват най – много.

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

Например, според системата за дизайн на Microsoft, всяко изображение може да има три версии:

• Малък (по – малко от 640 пиксела)

• Среден (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 и size в тага „img>/“ на изображението.

<img src=“ image.jpg „alt=“ image“ srcset=“image-320.jpg 320w, image-640.jpg 640w „sizes=“( максимална ширина: 900px) 45vw, 300px „/>

Размерът на файла трябва да е оптимален (настоящи формати на изображението)

Размерът на файла зависи изцяло от формата, под който сме го запазили. Някои от най – популярните формати за изображения в мрежата са PNG, JPG, SVG и GIF.

Различните формати на изображения предлагат различни нива на компресия. Целта на компресирането на файлове е да се намали размерът на файла, като същевременно се запази качеството на снимката. Когато няма влияние върху качеството на изображението, ние го наричаме компресия без загуби. Обратното на това е компресия със загуби, при която качеството на картината се влошава. JPG форматът е идеалният пример за увреждане на качеството на изображението по време на компресиране.

Въпреки това, в класацията на форматите, не толкова новият формат (WebP) непрекъснато се увеличава. След него можем да видим още един чисто нов на името на AVIF.

AVIF все още не е толкова използван, но се използва най – вече от уебсайтове с висок трафик като Netflix.

И двата формата обаче се появяват в препоръчания раздел на няколко инструмента за тестване на уебсайтове, като например Speed Insights.

WebP

WebP е формат за изображения, разработен от Google. Изображенията имат по – малък размер на файла – над 25% в сравнение с други формати като JPG и PNG.

• До 34% по – малък файл от JPG, до 26% по – малък от PNG

• Поддържа анимации и прозрачност

• Разработено от Google

• Първа версия – септември 2010 г.

• Поддържа се от 95% от браузърите (около ноември 2021 г.)

• Поддържа се в WP от версия 5.9

Новата версия на 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 можете да оптимизирате вече качени изображения, както и при качване на нови, за да приложите оптимизации като:

• Преобразуване на уеб страници

• Преоразмеряване до максимални размери, които са предварително зададени в настройките

• Оптимизация на размера, премахване на излишната информация от графичния файл (EXIF, коментари и др.)

Можете да прочетете повече за плъгина тук: EWWW Image Optimizer – Оптимизация на изображения в WordPress

Заключение

Оптимизирането на изображението на уебсайт е необходимо, защото страниците му започват да се зареждат по – бавно, когато снимките са твърде големи (както по размер, така и в килобайти). Особено чувствителни към размера на изображенията са мобилните посетители, които зареждат сайта чрез мобилни данни. Колкото по – големи са снимките, толкова по – бавна е скоростта на зареждане на страницата.

В момента тенденцията е да се премине към WebP формат на изображението, който позволява добро качество на изображението, но с много по – малък размер на файла (в сравнение с познатия PNG, JPG). WordPress поддържа WebP изображения, които можете да качите през библиотеката или директно в редактора на блокове. Някои плъгини могат да конвертират вече качени изображения в WebP формат.

Гледайки към бъдещето, виждаме обещаващ нов формат на изображението – AVIF, който се определя като заместител на JPG и PNG форматите. В момента той се поддържа в почти 70% от браузърите, но WordPress все още не е добавил поддръжка.