Тяжёлые изображения на сайте: с чего начать оптимизацию

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

Составьте список заметных файлов

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

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

Подготовьте подходящие варианты

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

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

Сравните одну страницу до и после

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