Оптимизация изображений для Интернета: полное руководство

Медленная загрузка страниц приводит к гибели конверсий. Исследования показывают, что 40% пользователей покидают сайт, заход на который занимает более 3 секунд. Самая большая причина? Неоптимизированные изображения. Одна фотография размером 5 МБ на главной странице может увеличить время загрузки даже при быстром подключении.

Контрольный список по оптимизации изображений

<ол>

Правильные размеры — не отправляйте изображение размером 4000 пикселей там, где вы отображаете 800 пикселей.

Правильный формат — современный WebP/AVIF, резервный JPG/PNG.

Правильное сжатие — качество фотографий 75–85 %, графика без потерь.

Правильная доставка — ленивая загрузка, адаптивный набор исходных кодов

Форматы: когда и что использовать

<ул>

WebP: используется по умолчанию для 95 % веб-изображений. На 25–35 % меньше, чем JPG того же качества. Универсальная поддержка браузеров.

AVIF: Еще меньше (на 50 % меньше, чем JPG). Используйте для изображений героев. Новые браузеры поддерживают это.

JPG: Фотографии без прозрачности. Отличная совместимость.

PNG: логотипы, снимки экрана и все, что имеет прозрачность. Без потерь.

SVG: векторная графика, значки, простые иллюстрации. Крошечный размер файла, бесконечное масштабирование.

Преобразуйте эти форматы с помощью PDF7 Image Convert.

Сжатие: насколько агрессивно или слишком агрессивно?

Для фотографий: начните с качества 85%. Уменьшите до 75 % для страниц, которым важна пропускная способность. Ниже 70% артефакты становятся видимыми. Используйте наш инструмент сжатия изображений, чтобы найти правильный баланс.

Адаптивные изображения с помощью srcset

Не передавайте изображение в разрешении 2K на телефон. Используйте атрибут srcset HTML:

Браузер выбирает наименьшее подходящее изображение. Вам понадобится три размера для каждого изображения.

Отложенная загрузка

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

Правило 100 КБ

Старайтесь использовать отдельные изображения размером менее 100 КБ. Главные изображения могут растягиваться до 200 КБ. Если размер одной фотографии превышает 500 КБ, значит, вы напутали – измените размер и повторно сожмите.