Инструкция по подготовке изображения для сайта (карточка товара)

1) Подготовьте исходник

  • Откройте фото/макет в Photoshop или Affinity Photo.

  • Проверьте, что изображение не размытое и без лишних артефактов (шум, «ступеньки» на границах, пересветы).

2) Проверьте размер (короткая сторона минимум 500 px)

Требование: короткая сторона (ширина или высота — что меньше) должна быть не меньше 500 пикселей.

  • Определите текущий размер:

    • Photoshop: Image → Image Size… (Размер изображения)

    • Affinity Photo: Document → Resize Document… (Изменить размер документа)

  • Если короткая сторона меньше 500 px — увеличивать можно, но качество может ухудшиться. По возможности возьмите исходник большего размера.

3) При необходимости измените размер правильно

Рекомендации:

  • Если уменьшаете — качество обычно сохраняется лучше.

  • Если увеличиваете — делайте это умеренно и внимательно проверяйте резкость.

Настройки:

  • Photoshop: в Image Size… включите Resample и выберите подходящий алгоритм (обычно “Bicubic Sharper” для уменьшения).

  • Affinity Photo: в Resize Document… выберите качественный метод ресемплинга (обычно Lanczos или аналогичный качественный вариант), включите ресемплинг.

4) Сконвертируйте в sRGB (важно для веба)

Чтобы цвета на сайте отображались предсказуемо:

  • Photoshop: Edit → Convert to Profile… → выберите sRGB IEC61966-2.1

  • Affinity Photo: Document → Convert Format / ICC Profile… → профиль sRGB

5) Экспортируйте JPG с оптимизацией “для web”

Главная цель: уменьшить вес файла, сохранив хорошее качество.

Photoshop (рекомендуемый способ)

  • File → Export → Save for Web (Legacy)…

  • Формат: JPEG

  • Quality (качество): ориентир 60–80 (подберите по изображению)

  • Включите Convert to sRGB

  • Progressive можно включить (часто помогает приятнее грузиться)

  • Посмотрите предпросмотр и итоговый размер файла

Affinity Photo

  • File → Export… → выберите JPEG

  • Quality: ориентир 70–85

  • Включите Embed ICC Profile (или убедитесь, что sRGB применён)

  • Используйте предпросмотр, чтобы сравнить качество и вес


6) Рекомендации по весу файла (практично для сайта)

Ориентиры (не строгие, но полезные):

  • Небольшие изображения/карточки: 100–300 KB

  • Крупные изображения: 300–800 KB (иногда больше, если много деталей)

Если файл слишком тяжёлый:

  • Снизьте Quality на 5–10 пунктов

  • Чуть уменьшите размеры (если это допустимо)

  • Избегайте лишней резкости и сильного шума — они сильно увеличивают вес JPG

7) Финальная проверка перед загрузкой

  • Формат: .jpg / .jpeg

  • Короткая сторона: ≥ 500 px

  • Цвет: sRGB

  • Визуально: нет «квадратиков», полос, сильной замыленности

  • Вес: разумный для быстрой загрузки

GEARSITE

О нас

ДоговорО компании

2019 - 2024