Изображения нередко составляют большую часть общего веса страницы — иногда больше, чем весь остальной код вместе взятый. Правильная работа с картинками способна заметно ускорить загрузку сайта, и для этого не всегда требуются сложные технические решения.
Формат изображения стоит выбирать под конкретную задачу: фотографии обычно эффективнее сжимаются в форматах jpeg или более современном webp, а изображения с прозрачностью или простой графикой вроде логотипов лучше смотрятся в png или, если это векторная графика, в svg.
Размер картинки в пикселях должен соответствовать тому, как она реально отображается на странице — загружать изображение шириной в две тысячи пикселей для блока, который на экране занимает лишь треть этой ширины, значит зря тратить и время загрузки, и трафик посетителя без всякой пользы для качества.
Атрибут srcset у тега img позволяет предложить браузеру несколько вариантов одного изображения в разных размерах, и браузер сам выберет подходящий в зависимости от реального размера экрана и его плотности пикселей, не заставляя мобильные устройства загружать десктопную версию картинки.
Ленивая загрузка через атрибут loading со значением lazy откладывает подгрузку изображений, которые пока не видны на экране, до момента, когда пользователь долистает до них — это особенно заметно ускоряет первую отрисовку длинных страниц с большим количеством картинок.
Сжатие изображений перед публикацией — отдельный важный шаг, который часто упускают: даже без визуальной потери качества можно уменьшить вес файла в несколько раз при помощи специальных инструментов сжатия, которые убирают избыточные технические данные внутри самого файла.
Практическое руководство по современным подходам к изображениям в вебе есть в разделе про изображения на web.dev.
