Оптимизация картинок в HTML: как сделать сайт быстрее

Картинки часто тормозят страницу, особенно на мобильных. В этом материале я расскажу, какие шаги реально помогают сократить вес изображений и улучшить показатели скорости без потери качества.

Выбираем правильный формат

Самый простой способ экономии – подобрать подходящий формат. Для фотографий обычно берут WebP или AVIF: они дают 30‑50 % меньше байтов, чем JPEG, и почти не ухудшают вид. Для иконок и простых графиков лучше SVG – масштабируется без потери качества и почти не весит.

Если сайт уже живёт на JPEG или PNG, не спешите менять всё сразу. Сконвертируйте самые тяжёлые файлы в WebP и проверьте, как они выглядят в браузере. Большинство современных браузеров поддерживают WebP, а для старых можно добавить picture с fallback‑версией.

Сжатие без потери качества

После выбора формата нужно уменьшить размер файла. Онлайн‑сервисы (TinyPNG, Squoosh) и CLI‑утилиты (imagemin, guetzli) позволяют сжать изображения до 70‑80 % без заметных артефактов. При работе с PNG стоит отключать альфа‑канал, если он не нужен – это экономит несколько килобайт.

Не забывайте про «резку» – обрезайте лишние пустые области и уменьшайте разрешение до того, которое действительно используется на странице. Если изображение показывается в блоке 800×600, нет смысла загружать 3000×2000 пикселей.

Атрибуты img для SEO и UX

Заполняйте alt – поисковики используют его для индексации, а пользователи без картинок видят описание. width и height задают размеры до загрузки, благодаря чему браузер сразу знает, сколько места оставить, и избегает “скачка” контента.

Для адаптивных сайтов используйте srcset и sizes. Это позволяет браузеру выбирать оптимальное изображение под текущий экран, экономя трафик.

Отложенная загрузка (lazy‑load)

Сейчас браузеры поддерживают атрибут loading="lazy". Добавьте его к каждому img, и изображения за пределами viewport будут загружаться только когда пользователь прокрутит страницу. Это снижает начальный вес и ускоряет First Contentful Paint.

Если нужен более гибкий контроль, подключите небольшую библиотеку (lazysizes) и задайте класс lazyload. Она умеет подменять src на data-src, подгружая картинку точно в момент появления в видимой области.

Кеширование и CDN

Установите заголовки Cache‑Control с длительным сроком (например, 1 год) для статических изображений. При изменении файла меняйте его имя (добавляйте хеш), чтобы браузер понимал, что нужно загрузить новую версию.

Если у вас глобальная аудитория, разместите картинки на CDN. Это сокращает расстояние до пользователя и убирает нагрузку с основного сервера.

Вот простой чек‑лист, которым можно пользоваться каждый раз перед публикацией:

• Выберите оптимальный формат (WebP/AVIF/SVG).
• Сожмите изображение с помощью онлайн‑сервиса или CLI‑утилиты.
• Обрежьте лишнее и уменьшите разрешение до нужного.
• Заполните alt, width, height, добавьте srcset при необходимости.
• Включите loading="lazy" или используйте lazy‑load библиотеку.
• Настройте кеширование и подключите CDN.

Следуя этим шагам, вы заметно ускорите загрузку страниц, улучшите SEO и сделаете сайт удобнее для всех посетителей.