Всё зависит от того, где именно используется изображение:
1⃣ Каталог товаров (список товаров на странице)
✅ Оптимальный размер: 70–200 КБ (чем меньше, тем лучше)
✅ Разрешение: до 800×800 px (обычно 400×400 px уже достаточно)
✅ Формат: WebP (если поддерживается), JPEG (если WebP нельзя), PNG (только если нужен прозрачный фон)
2⃣ Карточка товара (большая картинка при просмотре товара)
✅ Оптимальный размер: до 300 КБ (если есть зум, можно до 500 КБ)
✅ Разрешение: 1000×1000 px – 1600×1600 px (не стоит делать гигантские фото)
✅ Формат: WebP или JPEG
3⃣ Превьюшки (маленькие картинки, например, в рекомендациях)
✅ Оптимальный размер: 30–80 КБ
✅ Разрешение: 150×150 px – 300×300 px
✅ Формат: WebP или JPEG
📌 Как это работает в WordPress?
Когда вы загружаете изображение в WordPress, он автоматически создаёт несколько копий разного размера. Например:
✔ Миниатюра (thumbnail) – для списка товаров в каталоге (например, 150×150 px)
✔ Средний размер (medium) – для внутренних страниц (например, 300×300 px)
✔ Крупный размер (large) – для карточки товара (например, 800×800 px)
✔ Оригинал (full-size) – остаётся без изменений
Эти размеры можно настроить в «Настройки → Медиафайлы».
🎯 Нужно ли загружать картинки разного размера вручную?
❌ Нет, WordPress всё делает сам.
✅ Но! Лучше изначально загружать оптимизированные изображения.
🔧 Иногда бывает, что миниатюры обрезаются некорректно. В этом случае:
👉 Установите плагин Regenerate Thumbnails – он пересоздаст все размеры заново.
👉 Проверьте настройки темы – некоторые темы сами задают кастомные размеры.
🔧 Как сжимать изображения без потери качества?
📌 Онлайн-сервисы:
Squoosh – супер-инструмент
TinyPNG – жмёт без видимой потери качества, сама использую
📌 Плагины для автоматической оптимизации (если сайт на CMS, например, WordPress):
🟢 ShortPixel – жмёт круто, поддерживает WebP
🔵 Smush – подходит для крупных магазинов
🟠 Imagify – быстро конвертирует изображения в WebP
📌 Почему JPEG (или WebP), а не PNG?
✅ JPEG отлично подходит для фотографий товаров, потому что:
– Весит меньше (по сравнению с PNG)
– Сохраняет хорошее качество при сжатии
– Быстрее загружается (что важно для скорости сайта)
✅ WebP – это вообще идеальный вариант, если ваш сайт и браузеры его поддерживают, потому что:
– Дает качественную картинку при ещё меньшем весе (примерно в 2 раза меньше, чем JPEG)
– Поддерживает прозрачность, как PNG
– Загружается быстрее, что улучшает SEO
🚫 PNG стоит использовать только если:
– Нужен прозрачный фон (например, для логотипов или иконок), если ваш сайт и браузеры не поддерживают WebP.
– Графика содержит много чётких линий (например, схемы, инфографики)
– Нужно максимальное качество без потери данных (но это редко требуется для фото товаров)
🛠 Как проверить скорость загрузки сайта?
📌 Google PageSpeed Insights – показывает, какие картинки грузятся долго
📌 GTmetrix – даёт советы, как ускорить сайт
‼ Важно:
Чем больше фото на странице, тем дольше она грузится. Если страница каталога загружается медленно, пользователи могут просто уйти.
🎯 Итог:
✅ Для каталога – до 200 КБ, 800×800 px
✅ Для карточки товара – до 300 КБ, 1000×1000 px
✅ Формат WebP или JPEG
✅ Используйте сжатие и оптимизацию (онлайн-сервисы, плагины)
✅ Проверяйте скорость через Google PageSpeed
Если будут вопросы – спрашивайте! 😊