Какие изображения использовать в интернет-магазине?¶
Для корректного отображения контента и быстрой загрузки страниц придерживайтесь следующих рекомендаций по типу и размеру загружаемых изображений:
- размер загружаемых изображений — от 300x300 до 600x600 пикселей в зависимости от того, где используется изображение;
- высота или ширина изображения — не более 3 000 пикселей по большей стороне;
- размер файла — не более 1-2 МБ, в противном случае могут возникнуть проблемы с изменением размера изображения при работе в панели администратора.
Большие изображения занимают на сервере много места, что потенциально увеличивает плату за хостинг. Кроме того, из-за большого размера файлов страницы сайта могут загружаться медленно, и пользователь может покинуть сайт, не дождавшись полной загрузки страницы. Дополнительная нагрузка возникает и при генерации иконок на основе изображений большого размера, что также отрицательно сказывается на производительности сервера. В связи с этим существуют ограничения по параметрам изображений:
Ограничение по размеру файла:
В Панели администратора откройте Настройки → Общие настройки → Иконки. В параметре Размер файла с изображением можно выставить нужный размер загружаемого изображения в мегабайтах. Если оставить поле пустым, размер изображения будет ограничиваться настройками сервера.
В файле php.ini используйте соответствующие директивы post_max_size и upload_max_filesize.
Обратите внимание, что если эти значения разные, то из всех трех значений будет применяться наименьшее.
Ограничения по разрешению изображения: используйте твик max_uploaded_image_dimension в файле config.local.php. Этот твик проверяет, чтобы загружаемое изображение не превышало указанное в нём значение ни по одной из сторон.
$config['tweaks']['max_uploaded_image_dimension'] = 6000; // Maximum allowed width and height of an image in pixels
Подсказка
Используйте изображения, оптимизированные для Интернета. На маркетплейсе CS-Cart доступно множество модулей, которые оптимизируют изображения за вас, например Image Optimizer with CDN Features. Если вы пользуетесь облачным хостингом от CS-Cart, то оптимизировать изображения можно в личном кабинете хостинга.
Для оптимизации производительности вашего магазина при работе с изображениями, в частности, если в вашем магазине много изображений, можно использовать твик lazy_thumbnail. Он позволяет отделить процесс генерации страницы от процесса создания миниатюр (иконок изображений) на этой странице. Иными словами, страница формируется и отображается пользователю быстрее, а обработка картинок происходит отдельно. При использовании этого твика необходимо учесть следующее:
- не все сторонние темы работают с этим твиком (например, могут возникнуть проблемы с UniTheme);
- все миниатюры начнут генерироваться одновременно, в результате:
- на сервере с мощным многоядерным процессором это ускоряет работу: ресурсы используются параллельно, а обработка происходит быстрее;
- на слабом сервере одновременная генерация большого количества изображений может создавать серьезную нагрузку; в этом случае либо не включайте твик, либо ограничьте количество изображений для товаров.
Как получить изображение необходимого размера?¶
Существует множество онлайн-инструментов для редактирования изображений, например PicMonkey, Pixlr или FotoFlexer. Вы также можете воспользоваться офлайн- редакторами, например Adobe Photoshop или GIMP. В Photoshop можно оптимизировать несколько изображений сразу через команду Файл → Сохранить для Web.
Если вы хотите изменить размер детальных изображений товаров во время их загрузки, то вам может пригодиться бесплатный модуль “Размер Детальных Изображений”.
Как изменить размер изображений на витрине?¶
В CS-Cart изображения не отображаются как есть. После загрузки в интернет-магазин фотографии товаров автоматически уменьшаются и из них автоматически генерируются иконки. В меню Настройки → Общие настройки → Иконки вы можете задавать желаемый размер изображений на разных страницах (каталог, корзина, карточка товара и т. д.).
Важно
Мы рекомендуем указывать только один из размеров (ширину или высоту) для каждого типа иконок, иначе иконки станут неоднородными, и на витрине сетка товаров будет неровной.
Как выбрать формат?¶
В платформе поддерживаются четыре распространенных формата файлов, которые используются для публикации изображений в Интернете: JPEG, GIF, PNG и WebP. Каждый из них по-разному влияет на изображение.
| Формат | Описание | Преимущества | Недостатки и особенности |
|---|---|---|---|
| JPEG (.jpg) | Самый распространённый формат изображений в Интернете | Сильное сжатие без заметной потери качества, небольшой размер файла | При многократном сохранении качество постепенно ухудшается |
| GIF (.gif) | Формат для простых изображений | Поддерживает анимацию, подходит для иконок и пиктограмм | Меньше цветов, более низкое качество по сравнению с JPEG |
| PNG (.png) | Альтернатива JPEG и GIF | Поддерживает больше цветов, не теряет качество при повторном сохранении | Размер файла обычно больше, чем у JPEG |
| WebP (.webp) | Современный формат растровой графики, разработанный Google | Может заменить JPEG, PNG и GIF | Требует корректной настройки PHP и поддержки WebP в GD или Imagick |
Вот несколько советов, которые следует помнить при выборе типа файла:
- В большинстве случаев JPEG — оптимальный формат изображений для интернет-магазина.
- Никогда не используйте GIF для больших изображений, т.к. это сильно увеличит размер файла.
- При работе с форматом PNG, будьте осторожны: размер полноцветного изображения формата PNG-24 в три раза больше, чем PNG-8.
- Для сжатия файлов формата PNG может пригодиться сервис Tinypng. Для других форматов можно воспользоваться Image Optimizer.
Какие есть альтернативы привычным форматам?¶
Сейчас для оптимизации сайтов Google рекомендует использовать форматы WebP, JPEG 2000, JPEG XR.
Эти форматы не являются полной заменой JPEG или PNG, так как не все браузеры их поддерживают. Для других браузеров всегда придётся хранить резервные копии изображений в привычных форматах.
На маркетплейсе CS-Cart есть модули, которые конвертируют изображения в форматы WebP и JPEG 2000.
Какую графическую библиотеку использовать на сервере?¶
У вас на сервере могут быть разные графические библиотеки: Imagick, GD. GD более распространена и доступна практически на всех хостингах. Но мы рекомендуем использовать Imagick, так как производительность и качество изображений после обработки у Imagick лучше.
Какого размера должно быть изображение логотипа?¶
Выбор размера логотипа всегда индивидуален, однако не стоит загружать слишком большие изображения. Например, в демо версии магазина CS-Cart размер логотипа — 176×34 пикселя. Размер логотипа на витрине ограничен шириной блока, в котором он находится.
Логотип также отображается в письмах. По умолчанию размер логотипа в письмах не ограничен, поэтому лучше использовать изображение подходящего размера. Но при необходимости вы можете ограничить максимальный размер логотипа в письмах. Для этого на странице Администрирование → Уведомления → Сниппеты → Header замените эту часть кода:
<img src="{{logos.mail.image.image_path}}" alt="{{ company_data.company_name }}" width="{{logos.mail.image.image_x}}" height="{{logos.mail.image.image_y}}" />
на:
<img src="{{logos.mail.image.image_path}}" alt="{{ company_data.company_name }}" style="max-width: 300px; max-height: 300px;" />
Тогда максимальный размер логотипа в письме будет 300х300 пикселей.