Оптимизация на изображения за уеб с WebP и правилни размери

Оптимизация на изображения се свежда до два избора: по-икономичен формат и размер, който съвпада с мястото на снимката в страницата. Безлосовият WebP с настройките по подразбиране се свива с 42% по-добре от libpng и с 23% по-добре от ZopfliPNG (Google for Developers (WebP)). Работата отнема към час за малък сайт, ако имате резервно копие на оригиналите.

Колко реално печели WebP спрямо PNG

Числата идват от изследване на Google върху 12 000 случайно избрани PNG изображения от мрежата, някои с прозрачност (Google for Developers (WebP)). Те показват, че сменяте формата, без да губите нито един пиксел.

При загубното кодиране с прозрачност средният разход е 1,92 бита на пиксел срещу 5,05 за ZopfliPNG (Google for Developers (WebP)). По наше изчисление по данни на Google това са около 62% по-малко бита (1,92 / 5,05 ≈ 0,38). Изводът е практичен: логата и илюстрациите с прозрачен фон печелят най-много, но там вече приемате малка загуба.

Безлосов или загубен WebP, кой да изберете

Безлосовият режим пази изображението точно както е. Включва се с опцията -lossless на програмата cwebp (Google for Developers (WebP)). Загубният режим се управлява с -q от 0 до 100, а стойността по подразбиране е 75.

За снимки на хора и продукти започнете от стойността по подразбиране 75 (Google for Developers (WebP)) и сравнете резултата с оригинала на пълен екран. Ако не виждате разлика, оставете стойността. За екранни снимки с текст и за графики с остри ръбове ползвайте безлосовия режим, защото там загубата личи първа.

Как да конвертирате снимка с cwebp

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

1. Свалете инструмента cwebp от официалната страница на WebP на Google.
2. Отворете командния ред в папката със снимките.
3. Изпълнете cwebp -q 80 -resize 1200 0 снимка.jpg -o снимка.webp. Тук -q задава качеството, а -resize приема ширина и височина; нулата за височина я изчислява автоматично и пропорциите се запазват (Google for Developers (WebP)).
4. Сравнете размера на двата файла и отворете резултата в браузъра.

Опцията -resize приема ширина и височина; ако едната е 0, другата се изчислява и пропорциите се запазват (Google for Developers (WebP)). Преоразмеряването се извършва след евентуално изрязване. Параметърът -m от 0 до 6 (по подразбиране 4) прави файла по-малък за сметка на повече време за кодиране.

Кой размер да подадете на телефона

Размерът често има не по-малко значение от формата. Снимка, много по-широка от колоната, в която се показва, носи излишни данни, които телефонът изтегля напразно. Затова задавайте размерите според мястото на снимката в страницата.

Атрибутът srcset изброява файловете, а sizes казва на браузъра колко място ще заеме снимката (MDN Web Docs (Mozilla)). Браузърът взема предвид размера на екрана, плътността на пикселите, мащаба и скоростта на мрежата, и избира съответния или първия по-голям файл. Ширината в sizes може да е в px или vw, но не и в проценти. Подгответе поне два-три размера, например 480, 800 и 1200 пиксела по ширина.

Резервен формат и описание на снимката

В елемента picture задължителният img е основният и резервният вариант (MDN Web Docs (Mozilla)). Без него не се показва нищо. Затова оставяйте в него JPEG или PNG, а WebP добавяйте като отделен source.

Описанието е част от същата работа. Атрибутът alt трябва да предава смисъла на снимката, а не само външния ѝ вид (W3C (WAI)). Ако в изображението има важен текст, повторете го в alt.

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

Какво поддържа WordPress на Вашия хостинг

От версия 6.5 WordPress позволява качване на AVIF като на JPEG или PNG, ако хостингът го поддържа (WordPress.org (Make WordPress Core)). Поддръжката зависи от библиотеката за обработка на изображения на сървъра, а WordPress има вградена работа с Imagick и LibGD.

За проверка отворете Tools > Site Health (в български интерфейс менюто е преведено), после раздел Info и секцията Media Handling, където се виждат поддържаните формати (WordPress.org (Make WordPress Core)). Ако WebP или AVIF липсва, попитайте хостинга, преди да качвате файлове.

Как да проверите резултата и какво се обърква най-често

Отворете страницата на телефон през мобилни данни и наблюдавайте кога се появява главната снимка. Сравнете в инструментите на браузъра теглото на изображенията преди и след промяната. По-подробно за показателите на зареждане има в материала за Core Web Vitals.

Честите грешки са три, но се поправят лесно. Презаписване на оригиналите без копие. Качване на огромен файл с надежда сайтът сам да го смали. Подмяна на формата без alt и без резервен img, при което част от посетителите виждат празно място (MDN Web Docs (Mozilla), W3C (WAI)).