Веб-страница | frontend, backend, fullstack, react, vue, javascript, typescript, css, html
IT и технологии · 3 октября 2026 г.
Как перестать отдавать браузеру лишние мегабайты картинок
Как перестать отдавать браузеру лишние мегабайты картинок Начните не с AVIF или WebP, а с размеров. Фото 6000×4000 в карточке шириной 1200 CSS-пикселей передаёт в 25 раз больше пикселей, чем нужно обычному экрану. Уменьшение до отображаемого размера сократило тестовый файл с 4,7 до 1,1 МБ без потери качества. Для плотных экранов подготовьте варианты в srcset, нужный выберет браузер. Затем выбирайте формат: WebP или AVIF для фото, PNG либо WebP без потерь для скриншотов, SVG для логотипов. AVIF в тесте занял 210 КБ против 420 КБ у JPEG при сопоставимом качестве, но кодировался примерно в 15 раз дольше. Его стоит генерировать на сборке, а не при каждом запросе. Чеклист оптимизации пригодится перед настройкой обработки изображений: сначала проверьте размеры, затем формат, качество и метаданные.