AVIF или WebP — изображенията в WordPress
Кой формат да изберете, колко спестявате спрямо JPEG и PNG, как WordPress прави размерите, кога lazy loading вреди и как да не загубите качество.
Снимките са най-тежката част на почти всеки сайт, който мерим. И главната снимка в първия екран почти винаги е LCP елементът — този, по който Google мери колко бързо се зарежда страницата. Затова изображенията са едно от първите места, където търсим.
Форматите накратко
| Формат | За какво | Спрямо JPEG/PNG |
|---|---|---|
| JPEG | Снимки | база за сравнение |
| PNG | Графики с прозрачност | много тежък за снимки |
| WebP | Снимки и графики, с прозрачност | по данни на Google — около 25–34% по-малък от JPEG при сходно качество; около 26% по-малък от PNG при компресия без загуба |
| AVIF | Снимки и графики, с прозрачност | обикновено още по-малък от WebP при същото качество |
| SVG | Лога, икони, прости графики | векторен — остър при всеки размер |
И WebP, и AVIF се поддържат от всички съвременни браузъри.
Кой да изберете
- WebP — безопасният избор. Бързо се кодира, поддържа се навсякъде, спестява значително.
- AVIF — по-добра компресия, особено за големи снимки с плавни преходи. Кодирането е по-бавно и не всеки хостинг го поддържа. WordPress приема AVIF файлове от версия 6.5, ако сървърът може да ги обработва.
- Двата заедно — някои плъгини правят и двата формата и браузърът избира. Това е най-доброто, но изисква повече място на диска.
Размерът е по-важен от формата
Снимка 4000×3000 px във WebP пак е много по-тежка от нужното, ако се показва в кутия 600 px. WordPress автоматично прави няколко размера при качване и използва srcset, за да може браузърът да избере подходящия. Проблемът е, когато:
- темата или конструкторът показват оригиналния файл вместо подходящия размер;
- няма размер, близък до реално показания;
- старите снимки са качени преди смяна на темата и нямат новите размери — тогава трябва регенериране на миниатюрите.
Lazy loading: полезно, но не за първата снимка
Мързеливото зареждане (loading="lazy") отлага снимките под първия екран, докато потребителят не скролне до тях. WordPress го добавя автоматично от версия 5.5.
Но ако е включено за главната снимка, браузърът я открива и зарежда по-късно — и LCP става по-лош. От WordPress 6.3 ядрото добавя fetchpriority="high" към снимката, която вероятно е LCP, и не я зарежда мързеливо. Някои теми, слайдери и плъгини за оптимизация обаче отменят това. Проверете в PageSpeed Insights кой е LCP елементът и как се зарежда.
Зададени размери срещу подскачане
Всяка снимка трябва да има width и height в HTML-а (или фиксирано съотношение в CSS). Така браузърът запазва място, преди снимката да се изтегли, и съдържанието не подскача — иначе CLS се влошава.
Качество: колко да компресирате
- За снимки на продукти и хора — качество около 75–85 във WebP обикновено е неразличимо от оригинала на екрана.
- За графики с текст — по-високо качество или компресия без загуба, иначе текстът става размит.
- Винаги сравнявайте визуално на голям екран, преди да приложите настройката за целия сайт.
Как да го направите в WordPress
- Плъгин, който конвертира автоматично в WebP/AVIF при качване и за съществуващите снимки — например ShortPixel, Imagify, EWWW Image Optimizer или LiteSpeed Cache на LiteSpeed сървър.
- Проверка, че темата използва правилните размери и
srcset. - Без lazy loading за главната снимка; с lazy loading за всичко под първия екран.
- Регенериране на миниатюрите, ако сте сменяли тема.
При ръчната оптимизация правим това за всички съществуващи снимки, без да губим качество и без да пипаме оригиналите — те остават в архива.
Въпроси и отговори
По-добър ли е AVIF от WebP?
AVIF обикновено компресира по-добре, особено големи снимки, но се кодира по-бавно и не всеки хостинг го поддържа. WebP е по-безопасният универсален избор.
Трябва ли да има lazy loading за всички снимки?
Не. Главната снимка в първия екран трябва да се зарежда веднага и с висок приоритет. Lazy loading е за снимките под първия екран.
Ще загубя ли качество при конвертиране в WebP?
При качество около 75–85 разликата обикновено не се вижда на екран. Оригиналите остават в архива, ако някога ви трябват.
