@husainovcom

Как уменьшить разрешение картинки товара без потери качества?

Здравствуйте,

Есть картинка продукта в формате JPEG разрешением 1000х1000, на сайте он отображается в нескольких форматах: в карточке товара на страницах каталога и на собственной странице товара. Блоки на сайте под эту картинку имеют меньший размер: в карточке 200х200, на странице 430х430.

В шаблоне сайта был настроен ресайзер, чтобы в этих блоках картинки автоматически подстраивались под размер блока. Но при этом качество картинки становится поршивым. Я отключил ресайзер, чтобы посмотреть на результат и в этих же блоках (200х200 и 430х430) теперь отображается картинка с разрешением 1000х1000 и качество отличное. Но с точки зрения оптимизации это не самое удачное решение.

Как так получается что большая картинка в маленьких блоках не теряет свои качества? По сути то она в конечном итоге выдается в разрешениях 200х200 и 430х430, потому что она ограничена размерами блоков. Есть ли способ так же сжимать изображения без искажений и потери качества как это делает браузер?

Пример карточки товара в каталоге, где блок имеет размеры 200х200:

g-_j1lm_efqvrem9t1k-hcs44ho.jpeg
  • Вопрос задан
  • 107 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Metotron0
Качество — это субъективное понятие. Если выбран JPEG, то у него, например, при сжатии можно выбрать некий коэффициент "качества" от 1 до 100, он есть и в GIMP, и в PHP у функции imagejpeg. Я бы лучше обратил внимание на то, что бывают 4k (и прочие Nk) экраны, для которых может потребоваться удвоенное, а то и утроенное разрешение. Тогда для блока 250x250 нужно брать, например, 500x500, иначе всё будет мыльное. Тег img поддерживает атрибут srcset, который позволяет браузеру выбрать картинку из предложенных на основании своего PixelRatio.

Ещё webp достаточно быстро жмёт и иногда получается меньше, чем JPEG.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы