Как подготовить фото для сайта
Тяжёлые картинки — главная причина медленных сайтов. Правильная подготовка фото ускоряет загрузку, улучшает впечатление посетителей и положительно влияет на позиции в поиске.
Почему это важно
Фотографии часто занимают основную часть веса страницы. Если на сайте лежат снимки по 5 МБ, посетитель с мобильным интернетом долго ждёт, а поисковые системы учитывают скорость загрузки при оценке удобства сайта. Подготовка изображений — самая простая и эффективная оптимизация.
Какой размер выбрать
- Фото на всю ширину страницы — 1600–1920 пикселей по ширине.
- Картинки в тексте статьи и карточки — 800–1200 пикселей.
- Превью и миниатюры — 300–600 пикселей.
- Для экранов Retina можно взять размер в 1,5–2 раза больше отображаемого, но не гонитесь за максимумом.
Какой формат выбрать
- WebP — основной выбор для фото и графики на современном сайте.
- JPEG — запасной вариант для фотографий с максимальной совместимостью.
- PNG — для логотипов, схем и скриншотов с мелким текстом.
- SVG (в редакторе не используется) — для векторных иконок и логотипов.
К какому весу стремиться
Ориентир для фотографий — 100–300 КБ, для небольших картинок в тексте — до 100 КБ. Это не жёсткие правила: важнее общая картина — вес страницы целиком и скорость загрузки на мобильном интернете.
Порядок подготовки
- Обрежьте лишнее, чтобы убрать пустые края и выделить главное («Обрезать»).
- Уменьшите размер до нужного («Изменить размер»).
- При необходимости добавьте резкость после уменьшения («Резкость и шум»).
- Сохраните в WebP или JPEG с качеством 75–85% («Сжать фото»).
- Проверьте итоговый вес — он показывается внизу рядом с кнопкой «Скачать».
Советы для вебмастеров
- Давайте файлам осмысленные имена на латинице (kak-vybrat-chehol.jpg вместо IMG_4521.jpg) — это помогает поиску по картинкам.
- Всегда заполняйте атрибут alt с описанием картинки.
- Не вставляйте большие картинки и уменьшайте их через CSS — браузер всё равно скачает исходный файл.
- Метаданные в файле не нужны: после обработки в нашем редакторе они удаляются, а вес снижается.