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

Какой формат фото использовать: JPG, PNG, WebP или AVIF?

Сейчас стандарт — использовать для фото в первую очередь WebP или AVIF, а для логотипов и иконок — SVG. web.dev сообщает, что WebP и AVIF обычно сжимают лучше старых форматов (JPG · PNG), и советует по возможности использовать их.

Но при использовании AVIF безопаснее держать запасной файл, например JPG, на случай сред, которые его не читают. Анимированные GIF очень тяжёлые, и гораздо легче заменить их коротким видеофайлом.

Часто выбирать формат самому не нужно. В зависимости от того, как сделан сайт, в нём может быть функция, которая при загрузке JPG сама отдаёт браузеру клиента WebP или AVIF.

Логотипы с прозрачным фоном и фото товаров с удалённым фоном тоже часто становятся легче, если сохранить их не в PNG, а в WebP.

Какого размера в пикселях и КБ загружать фото на сайт?

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

Оригиналы с камеры телефона часто больше 4 000 пикселей по ширине, и если загрузить их как есть, большая часть пикселей пропадает впустую. Для больших баннеров и маленьких миниатюр в списках лучше делать отдельные размеры.

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

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

Что такое адаптивные изображения и отложенная загрузка?

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

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

Важно также указывать для каждого фото ширину и высоту (width · height). Если размер неизвестен, при появлении фото текст съезжает вниз, и клиент может нажать не ту кнопку.

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

Как уменьшить фото, если загружаешь их сам?

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

Для часто публикуемых фото — новинок кафе, работ мастерской — удобно один раз определить стандарт. Запишите правило, согласованное с веб-студией, например «фото галереи — столько-то пикселей по ширине, WebP», и каждый раз уменьшайте одинаково.

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

1. 01Посмотрите, насколько крупно на экране отображается место, куда загружается фото (баннер, галерея, список товаров).
2. 02В фоторедакторе или бесплатном сервисе сжатия уменьшите ширину под это место.
3. 03Выберите формат WebP и снижайте качество, пока разница не станет заметной на глаз.
4. 04Переименуйте файл: вместо «IMG_1234» — по содержанию, например «yeonnam-cafe-handdrip.webp».
5. 05После загрузки откройте страницу через мобильный интернет (с выключенным Wi-Fi) и проверьте скорость.

Как писать описания к фото (alt) и имена файлов?

Описание к фото пишите так, будто одним предложением рассказываете человеку, который его не видит, «что сообщает это фото». Центр Google Поиска считает описание самым важным атрибутом изображения и советует не набивать его ключевыми словами.

Для фото без содержания — декоративных узоров или фонов — описание правильно оставить пустым. Руководство W3C по изображениям тоже советует оставлять пустое значение для декоративных картинок. А для фото с текстом, например меню, этот текст нужно перенести в описание.

Имя файла — тоже небольшая подсказка. Google советует вместо имён вроде «IMG00023.JPG» давать короткие и описывающие содержание имена. Если использовать строчные латинские буквы и дефис (-), адрес не «ломается» и управлять файлами удобнее.

• Хороший пример: «Кусочек клубничного торта со сливками, сверху три свежие клубники»
• Неудачный пример: «торт вкусный торт рекомендуем торт заказать» (только набор ключевых слов)
• Неудачный пример: «фото1», «image» (никакой информации)

Какие ошибки чаще всего совершают в оптимизации изображений?

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

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

Скорость можно проверить, просто вставив адрес в бесплатный инструмент вроде Google PageSpeed Insights. Если в результатах есть рекомендации по изображениям, начинайте с фото.

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

Что спросить у веб-студии об оптимизации изображений?

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

• Уменьшает ли админ-панель загружаемые фото автоматически и меняет ли формат?
• Используете ли вы адаптивные изображения, отдающие фото под размер экрана?
• Измерите ли вы скорость загрузки фото первого экрана перед запуском?
• Будете ли вы после запуска проверять, не прибавилось ли тяжёлых фото?