Оптимизация на изображенията
Какво е оптимизация на изображенията?
Оптимизацията на изображенията е подготовка на снимките в сайта така, че всяка да тежи толкова, колкото е нужно за екрана, на който се показва, без видима загуба на качество. Тя включва точен размер за всяко устройство, компресия, съвременни формати като WebP и AVIF и отложено зареждане на снимките под първия екран. В повечето бавни сайтове и магазини изображенията са най-голямата част от теглото на страницата.
Пример
Магазин за играчки качва снимките така, както идват от фотографа: 4 000 пиксела ширина и около 2,5 MB всяка. Категорията показва 24 продукта, значи телефонът тегли 24 × 2,5 = 60 MB, за да покаже карти, широки 180 пиксела. Същите снимки, намалени до нужния размер и записани в WebP, тежат около 40 KB: 24 × 40 KB ≈ 1 MB. При мобилна връзка от 10 Mbit/s това е разликата между около 48 секунди и под една секунда изтегляне. На екрана страницата изглежда същата.
Защо има значение за бизнеса
Тежките снимки са най-честата причина за бавна мобилна версия и за лош LCP, защото главната снимка обикновено е най-големият елемент на страницата. Бавното зареждане е сред UX грешките, които намаляват продажбите, а снимките са първото място, където търсим причината. Поправката не променя дизайна и често носи най-много скорост за вложените часове. Тя обаче трябва да стане навик: ако всеки нов продукт се качва в пълен размер, след година проблемът се връща. Затова сайтът сам трябва да преоразмерява и да конвертира всяка качена снимка, независимо кой я качва.
Оптимизацията не е обработка на снимки. Ретушът променя как изглежда снимката — фон, цвят, дефекти, а оптимизацията променя колко тежи, без да се вижда разлика.
Как се подобрява
- Всяка снимка съществува в няколко размера и браузърът избира подходящия за екрана (атрибутите
srcsetиsizes). - Формат WebP или AVIF, с JPEG като резерв там, където още е нужен.
- Компресия, при която разликата не се вижда на екрана.
- Зададени ширина и височина, за да не подскача страницата.
- Отложено зареждане за снимките под първия екран, но никога за главната снимка.
- Автоматична обработка при качване, за да не зависи резултатът от това кой добавя продукта.
Изображенията са първото, което преглеждаме при оптимизацията на скоростта на сайта.