Как оптимизировать изображения для сайта: размер, формат, alt

Фотографии работ, иллюстрации к статьям, баннеры, карточки товаров — изображения делают сайт понятнее и привлекательнее. Но они же чаще всего замедляют загрузку: одна неоптимизированная фотография может весить больше, чем весь остальной код страницы. Правильная обработка изображений ускоряет сайт, улучшает Core Web Vitals и даёт дополнительный трафик из поиска по картинкам.

Выбор формата

WebP

Современный формат, который поддерживают все актуальные браузеры. При сопоставимом визуальном качестве файлы WebP обычно заметно легче JPEG и PNG. Поддерживает прозрачность, поэтому подходит и вместо PNG. Для большинства изображений на сайте это оптимальный выбор.

AVIF

Ещё более эффективный формат, но кодирование медленнее, а поддержка в инструментах и на хостингах пока менее универсальна. Может использоваться дополнительно к WebP.

JPEG

Классика для фотографий. Если по каким-то причинам WebP недоступен, используйте JPEG с разумным сжатием.

PNG

Подходит для изображений с чёткими границами и прозрачностью — скриншотов, схем. Для фотографий PNG слишком тяжёлый.

SVG

Векторный формат для логотипов, иконок и простой графики. Масштабируется без потери качества и весит очень мало.

Размер изображения

Главное правило: изображение не должно быть больше, чем оно отображается на экране. Если блок на странице шириной 800 пикселей, загружать фото шириной 4000 пикселей бессмысленно.

Адаптивные изображения

С помощью атрибутов srcset и sizes браузеру можно предложить несколько вариантов одного изображения разной ширины, и он сам выберет подходящий для экрана устройства. Телефон загрузит компактную версию, большой монитор — полноразмерную.

Указание размеров

Всегда указывайте ширину и высоту изображения в HTML или задавайте пропорции в CSS. Тогда браузер заранее резервирует место, и вёрстка не «прыгает» при загрузке — это влияет на метрику CLS.

Сжатие

Сжатие с потерями уменьшает файл за счёт деталей, которые глаз почти не замечает. Для фотографий на сайте обычно достаточно качества около 75–85 процентов — разница с оригиналом незаметна, а вес снижается в разы. Сжатие без потерь удаляет служебные данные (метаданные камеры, лишние цветовые профили).

Ленивая загрузка

Атрибут loading="lazy" откладывает загрузку изображений, которые находятся ниже первого экрана, до момента, когда пользователь до них прокрутит. Это ускоряет первоначальную загрузку страницы.

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

Атрибут alt

Alt — текстовое описание изображения. Он нужен:

• людям, которые пользуются экранными дикторами;
• поисковым системам, чтобы понять, что изображено, и показывать картинку в поиске по изображениям;
• на случай, если изображение не загрузилось.

Как писать alt

• описывайте, что изображено, коротко и конкретно: «Главная страница интернет-магазина мебели на смартфоне»;
• не перечисляйте ключевые слова через запятую;
• для чисто декоративных изображений alt оставляют пустым, чтобы экранные дикторы их пропускали;
• не начинайте с «картинка» или «изображение» — это и так понятно.

Имена файлов

Понятное имя файла — дополнительный, хоть и небольшой, сигнал для поиска по картинкам: razrabotka-internet-magazina.webp информативнее, чем IMG_4521.webp. Используйте латиницу и дефисы.

Автоматизация вместо ручной работы

Требовать от редакторов вручную уменьшать, сжимать и конвертировать каждую картинку — значит гарантировать, что рано или поздно на сайт попадёт фото на несколько мегабайт. Надёжнее, когда система обрабатывает изображения сама при загрузке:

• уменьшает до максимально нужной ширины;
• конвертирует в WebP;
• создаёт уменьшенные копии для карточек и мобильных;
• проставляет размеры и ленивую загрузку в тексте статьи.

Так устроены мои проекты: редактор загружает фото как есть, а на сайт попадает оптимизированная версия. В админ-панели также есть подсказка, если у изображения не заполнен alt.

Изображения в портфолио и карточках товаров

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

Как проверить изображения на сайте

• PageSpeed Insights покажет изображения, которые можно сжать или уменьшить, и сколько это сэкономит;
• во вкладке «Сеть» в инструментах разработчика отсортируйте файлы по размеру;
• краулер найдёт изображения без alt.

Частые ошибки

• фото с камеры загружено без обработки;
• одинаковое большое изображение отдаётся и телефонам, и мониторам;
• нет размеров, и вёрстка смещается при загрузке;
• ленивая загрузка включена для главного баннера;
• все alt одинаковые или заполнены ключевыми словами.

Итог

Оптимизация изображений — одна из самых результативных доработок: она ускоряет сайт, улучшает пользовательский опыт и даёт трафик из поиска по картинкам. Лучше всего, когда она происходит автоматически. Я встраиваю автоматическую обработку изображений при разработке сайтов и оптимизирую изображения на существующих сайтах в рамках технической поддержки. Оставьте заявку, если ваш сайт загружается медленно.