Оптимизация изображений для веба

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

Что такое оптимизация изображений?

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

Эта последняя часть важнее, чем многие думают. Оптимизация — это не только сжатие. Это сочетание выбора формата, правильного размера, стратегии доставки и поведения загрузки, и все эти элементы работают вместе.

Почему это важно

Изображения обычно составляют 40–60 % от общего объёма передаваемых данных страницы. Это напрямую влияет на несколько факторов, которые сказываются на реальных пользователях и измеримых результатах.

Core Web Vitals. Метрика Google Largest Contentful Paint (LCP) напрямую связана с тем, насколько быстро загружается самый крупный видимый контент. Элементом LCP очень часто является изображение: главное изображение страницы, фото товара или баннер. Медленный LCP ухудшает ваши позиции в поисковой выдаче, а оптимизированные изображения — один из самых надёжных способов его улучшить.

Мобильные пользователи и медленные соединения. Значительная часть веб-трафика приходится на пользователей с мобильным интернетом: при слабом покрытии сети или ограниченной скорости соединения. Отправлять в такой ситуации неоптимизированное изображение размером 2 МБ означает заставлять человека ждать несколько лишних секунд или вовсе покинуть страницу. Цена плохого пользовательского опыта на мобильных устройствах гораздо выше, чем на десктопе.

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

Распространённые методы оптимизации

Сжатие

Сжатие уменьшает объём данных, необходимых для хранения или передачи изображения. Есть два подхода, которые важно понимать, поскольку правильный выбор зависит от того, что именно вы сжимаете.

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

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

Использование правильных размеров изображений

Одна из самых распространённых и легко упускаемых из виду проблем — отправка изображения размером 3000×2000 px для отображения в контейнере шириной 400 px. Браузер загружает весь файл, а затем уменьшает его при рендеринге. В результате передаётся в 5–10 раз больше данных, чем необходимо.

Решение простое: изменяйте размер изображений до тех размеров, в которых они действительно будут отображаться, ещё до их отдачи пользователю. На динамических сайтах это обычно означает создание нескольких вариантов (миниатюра, средний размер, полный размер) на этапе сборки или с помощью сервиса обработки изображений, а не попытку полагаться на CSS для масштабирования.

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

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

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

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

По умолчанию браузеры начинают загружать изображения сразу, как только встречают их в HTML, включая изображения, расположенные далеко за пределами видимой области экрана. Ленивaя загрузка откладывает загрузку изображений вне экрана до тех пор, пока пользователь не прокрутит страницу ближе к ним.

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

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

Заключительные мысли

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