Как готовить фото для сайта

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

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

Чем опасны крупные изображения

Частая ситуация: владелец сайта получает от фотографа оригиналы снимков в большом разрешении (например, 4K), весом по 30–100 МБ. Эти файлы отправляются разработчикам или техподдержке и бездумно загружаются на сайт.

К чему это приводит:

• Фотографии долго загружаются или не загружаются вовсе.

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

• Пользователи закрывают страницу → увеличивается процент отказов.

• Поисковые системы пессимизируют сайт за медленную загрузку.

Даже фотографии по 6–7 МБ — это слишком много для веба, особенно если их на странице несколько.

Оптимальное разрешение изображений

Для большинства сайтов достаточно:

• 1000–2000 пикселей по длинной стороне

• «Золотая середина» — около 1200 × 900 пикселей, в зависимости от ориентации.

Этого достаточно даже для экранов с высокой плотностью пикселей (например, Retina).

Изменить размер можно в любом фоторедакторе, включая Adobe Photoshop.

Ленивая загрузка (Lazy Loading)

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

Преимущества:

• экономия трафика;

• ускорение загрузки страницы;

• особенно полезно на страницах с большим количеством фото.

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

Изображения для мобильных устройств

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

Оптимальные размеры для мобильной версии:

• 300 × 300 пикселей

• или 400 × 400 пикселей

Правило: размер изображения должен соответствовать размеру блока, в котором оно отображается.

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

Идеальный вес одной фотографии:

• 50–200 КБ

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

Как сжать изображение в Photoshop

Пример оптимизации:

1. Открываем фотографию в Photoshop.

2. Заходим в «Размер изображения».

3. Устанавливаем, например, 1200 px по длинной стороне.

4. Сохраняем через Export → Save for Web.

5. Выбираем формат JPEG, если не требуется прозрачный фон.

На выходе изображение может уменьшиться с 7 МБ до примерно 145 КБ.

Современные форматы изображений

Формат AVIF

Самый современный формат:

• высокое качество при малом весе;

• поддержка HDR, альфа-канала, анимации.

Недостаток — ограниченная поддержка браузеров.
На старых устройствах и браузерах AVIF просто не откроется.

Поэтому внедрять AVIF на сайте пока рано.

Формат WebP

Наиболее удачный вариант для сайтов:

• разработан Google;

• лучше сжимает изображение, чем PNG/JPEG;

• широко поддерживается браузерами;

• минимальные потери качества.

Сейчас WebP — оптимальный выбор для веб-проектов.

Как правильно внедрять WebP

Не стоит загружать WebP-файлы вручную. Рекомендуется загружать стандартные форматы (JPEG/PNG), а конвертацию в WebP выполнять на стороне сайта.

Почему так правильно:

• если браузер пользователя не поддерживает WebP, он увидит обычный JPEG/PNG;

• не будет битых или пустых изображений на старых устройствах;

• система автоматически выберет оптимальный формат.

Как это реализовать

• подключить скрипт для автоматической генерации WebP;

• или использовать плагин (например, Imagify для WordPress).

Практически для любой CMS есть подходящие решения.

Итог: чего мы добились при оптимизации

Пример оптимизации одной фотографии:

• исходный вес: 7+ МБ

• уменьшение разрешения → уменьшение в 3–4 раза

• сохранение «для веб» → 145 КБ

• конвертация в WebP на стороне сайта → ещё минус 20–30%

Итоговое уменьшение: в 60–70 раз.

Что это даёт сайту

• Быстрая загрузка страниц.

• Улучшение поведенческих факторов.

• Лучшие позиции в поисковых системах.

• Комфортные условия для пользователей на любом устройстве.

И помните, вы всегда можете передать сопровождение сайта в нашу компанию и тогда вам не придется думать о таких вещах, как оптимизация фото.

Тема в видеоформате