Оптимизация изображений: как хранить 9 версий одного файла

При разработке современного сайта каждое изображение из макета требует минимум 9 файлов для корректного отображения на разных устройствах и в разных браузерах. Это необходимо для поддержки Retina-дисплеев, форматов WebP и AVIF, а также адаптивной вёрстки. Рассмотрим типичный набор файлов для одного исходного изображения hero.jpg:

• hero.jpg (базовое)
• hero@2.jpg (для Retina 2x)
• hero@3.jpg (для Retina 3x)
• hero.webp
• hero@2.webp
• hero@3.webp
• hero.avif
• hero@2.avif
• hero@3.avif

Уже для небольшого лендинга с 10 картинками получается 90 файлов. Как организовать хранение такого количества графики без хаоса? Разберём лучшие практики.

Проблема хранения множества форматов изображений

Простое складирование всех версий в одну папку ./images быстро приводит к путанице. Трудно найти нужный файл, сложно автоматизировать сборку, а система контроля версий (Git) начинает тормозить из-за большого количества бинарных файлов. Кроме того, без чёткой структуры сложно удалять устаревшие версии при редизайне.

Лучшие практики организации файлов изображений

1. Разделение по типам контента

Создайте подпапки для разных категорий: ./images/hero/, ./images/icons/, ./images/photos/. Внутри каждой категории храните все версии одного изображения вместе. Например:

images/hero/
  hero.jpg
  hero@2.jpg
  hero@2.webp
  hero.avif
  ...

2. Использование подпапок для форматов

Альтернативный подход - группировать по формату: ./images/jpg/, ./images/webp/, ./images/avif/. Внутри каждой папки - файлы с одинаковыми именами (hero.jpg, hero@2.jpg и т.д.). Это упрощает настройку веб-сервера для автоматической выдачи нужного формата.

3. Автоматизация с помощью сборщиков

Используйте инструменты вроде Gulp, Webpack или Vite с плагинами для генерации всех версий. Достаточно хранить только исходник (например, hero.png), а остальные 8 файлов создавать автоматически при сборке проекта. В репозиторий коммитьте только исходники.

Как выбрать правильную структуру для SEO и скорости

Для поисковой оптимизации важно, чтобы пути к изображениям были логичными и не менялись при обновлении. Рекомендуется использовать структуру вида /images/hero/hero-{размер}.{формат}. Это позволяет кэшировать файлы на CDN и ускорять загрузку страниц. Также не забывайте про атрибут srcset в HTML для адаптивной загрузки.

Заключение

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