# Оптимизация на изображенията

URL: https://tnb-tech.com/termini/optimizatsia-na-izobrazheniyata/

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

Оптимизацията на изображенията е подготовка на снимките в сайта така, че всяка да тежи толкова, колкото е нужно за екрана, на който се показва, без видима загуба на качество. Тя включва точен размер за всяко устройство, компресия, съвременни формати като 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 като резерв там, където още е нужен.
- Компресия, при която разликата не се вижда на екрана.
- Зададени ширина и височина, за да не подскача страницата.
- Отложено зареждане за снимките под първия екран, но никога за главната снимка.
- Автоматична обработка при качване, за да не зависи резултатът от това кой добавя продукта.Изображенията са първото, което преглеждаме при оптимизацията на скоростта на сайта.

- Услуги: [Оптимизация на скоростта на сайта](https://tnb-tech.com/uslugi/uebsayt-zabarzvane/)
- Термини: https://tnb-tech.com/termini/