Как увеличить изображение без потери качества?
Посещая интернет-магазины, потенциальный покупатель обращает внимание в первую очередь на изображение товара, именно поэтому оно должно быть качественным. Каждому товару на сайте просто необходима виртуальная красивая «обертка», ведь подсознательно лоск и красота – привлекают внимание, вызывая желание остаться на сайте. Именно поэтому необходимо позаботиться о фото товара, оно должно быть качественным и в то же время легко загружаемым. Большие картинки не только перегружают браузеры пользователей, увеличивая время загрузки страницы, но и негативно воспринимаются поисковыми системами. Как же сделать карточку товара, оптимизированной?
Размер изображения в пикселях
Поисковые системы анализируют изображения по особым критериям, которые могут способствовать повышению в позициях поисковых запросов. За счет картинок есть вероятность увеличить узнаваемость сайта. Критериями для изображений выступают: качество, размер, формат и уникальность.
- На сегодняшний день оптимальным размером полновесных изображений для сайтов является 1000х1000 px при размере не более 200 kB.
Чем больше имеет разрешение картинка, тем больше она занимает места. В то же время, при уменьшении плотности пикселей качество может заметно уменьшиться, и для того чтобы не упустить мелкие детали, которые хотелось бы подчеркнуть, лучше кадрировать фото, акцентируя крупный план, и добавить фото в плейлист товара. Размер, который указан выше, является сбалансированным, он не настолько мал, чтобы сильно потерять в качестве, но и достаточно большой, чтоб открываться на всех устройствах. При уменьшении разрешения следует особое внимание уделять резкости фото, увеличивая его после обработки, например, с помощью фильтров усиления резкости в графических редакторах .
Для миниатюры изображений товаров принято использовать разрешение в пределах 40-50 px. Следует подбирать изображения так чтобы товары на сайте имели одинаковую пропорцию, тогда магазин приобретет эстетический вид. Со временем были выбраны стандарты приятные глазу покупателя, это 1:1, 4:3, 3:2, 16:9. Идеально сохранять в том размере, в котором будут отображены на сайте.
Форматы изображений
- При сохранение в формате JPEG, происходит смешивание 3 –х цветов: красного, зеленого, синего. Формат охватывает большой диапазон цветов и имеет возможность производить сжатие от 0 до 100%. Но данный тип сжатия происходит с заметными потерями качества, и чем больше изменение, тем больше потери. Использовать данный формат лучше с фотографиями или сложными цветами и динамикой.
- Формат PNG – более новый, имеет лучшие варианты прозрачности. Сохраняется без потери качества, но и имеет больший размер. Использовать данный формат лучше в случае, где требуется прозрачность, также для сжатия сложных изображений или тех, у которых требуется повторная обработка.
- Формат GIF – имеет преимущества перед предшественниками когда используется с маленькими иконками/флагами, анимацией. Качество не теряется, но он не рекомендован для работы с большими и сложными фото.
- WebP и JPEG-XR – являются новыми форматами с маленьким весом, но не все браузеры их поддерживают.
- SVG – формат с масштабированной векторной графикой. Используется для флагов, карт, логотипов. Идеально сочетается с адаптивным дизайном. Не теряет качества, подходит для веб-дизайнеров.
Как быстро изменить размер изображения без потери качества?
Если вы простой владелец сайта или интернет-магазина, советы выше вы можете принять к сведению, но с практической точки зрения неспециалисту они мало чем помогут. Если вы сами делаете фотографии товара, либо у вас есть готовые, но неподходящего размера, предлагаю вам простой способ их оптимизации в три простых шага.
1 шаг. Открываем файл в любом графическом редакторе, например в бесплатном просмотрщике с дополнительными возможностями Irfan View. Далее выбираем в строке меню: Изображение - > Свойства изображения - > Задаем размеры и нажимаем - > Установить. Если вы используете Adobe Photoshop, то следует выбрать в меню: Изображение - > Размер изображения - > Задаем размер. После чего сохраняем полученный файл.
2 шаг. В Irfan View выбираем: Изображение - > Повысить резкость. В Adobe Photoshop выбираем: Фильр - > Усиление резкости.
3 шаг. Открываем сайт по оптимизации изображений. Сайтов существует много, но большинство имеют похожие функции. Я обычно использую в работе imagecompressor.com. Загружаем файл на сайт без регистрации, а спустя несколько секунд скачиваем готовый. Можно поиграться палитрой на сайте, чтобы максимально сжать изображение.
Заключение
Теперь вы знаете особенности форматов и как самостоятельно уменьшить изображение на сайте (например, в карточке товара для интернет-магазина) без потери качества. Не забывайте также, что изображения должны быть уникальными, либо, в крайнем случае, взяты со стоков, которые распространяют бесплатные изображения. Если вы разместите изображение защищенное авторским правом, поисковая система может наложить санкции на ваш сайт.
