Замыливание изображений в категориях и в модулях

[Greyphon]

подскажите пожалуйста, как сделать что бы opencart не сжимал ( замыливал) изображения товаров. Когда открываю в товаре само изображение то нормальное, а когда в категории или модуле, не открывая изображение в карточке товара, то они замыленные

В файле image.php  поменял на 100, не помогло

 

[sitecreator]

13 часов назад, Greyphon сказал:

В файле image.php  поменял на 100, не помогло

 

там и 90 было достаточно выше крыши обычно.  Есть крайне редкие случаи когда этого мало. Но в этих случаях лучше использовать PNG, а не JPEG.

 

13 часов назад, Greyphon сказал:

что бы opencart не сжимал ( замыливал) изображения товаров

 

он этого и не делает по умолчанию.

 

вероятно, что у вас проблема в чем-то другом.

а, вообще, обсуждать такие темы не видя ни сайта, ни картинок (предмета обсуждения) - занятие неблагодарное и бесперспективное.

 

Источников проблем может быть очень много.

 

•  например, на хостинге (сервере) включена оптимизация изображений (webp), но по умолчанию качество равно лишь 75, и никак не регулируется, а потому сервер может замыливать ваши изображения.
•  
•   разница в плотности пикселей изображения. Может проявляться как на экранах обычной плотности, так и на экранах повышенной плотности пикселей. Например, картинка 400х400  будет всегда более качественно смотреться в окошке 200х200 по сравнению с картинкой 200х200  даже на обычном мониторе (не 4К).
•  
• картинки JPEG, подготовленные в Фотошоп с максимальным качеством будут всегда более качественные и бОльшего веса чем преобразованные на сервере за счет библиотеки GD  и т.п.  Т.е., грубо говоря качество 100 в фотошопе и 100 в GD - это две большие разницы по качеству и весу. Но заметно на глаз это далеко не всегда, а только на очень специфических изображениях с массой мелких деталей. Но если делать в PNG, то разницы практически нет, но это крайне тяжелый формат.
•  
• другие причины....

 

В Опенкарт используется для работы с и изображениями графическая библиотека GD,  обычно ее качества достаточно в подавляющем большинстве случаев.  Но есть боле качественная графическая библиотека - это imagick (imagemagick), с помощью нее можно добиться наилучшего качества. Imagick делает более качественно ресайз изображений, особенно от маленького размера к большому, в сравнении с библиотекой GD.

 

Есть программное решение, разработанное мною, которое поддерживает практически все необходимые действия с изображениями и полный контроль над качеством изображений, включая сжатые изображения. Сжатые - без потери качества, включая преобразование формата без потерь PNG в WEBP Lossless. Модуль Компрессор может использовать в приоритетном порядке библиотеку Imagick вместо GD, которую использует опенкарт.

 

(Кстати,   преобразование в WEBP Lossless не равносильно выставлению качества = 100)

 

 

Это программное решение (модуль Компрессор) неоднократно используется в магазинах, которые сами делают фото-сессии своих товаров, а потому у таких заказчиков крайне повышенные требования к качеству конечных изображений, включая качество сжатых изображений.

 

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

[Prooksius]

так может просто размер миниатюр не достаточно большой для верстки. Вот верстка и растягивает их.

[sitecreator]

56 минут назад, Prooksius сказал:

так может просто размер миниатюр не достаточно большой для верстки. Вот верстка и растягивает их.

 

это запросто.  Т.е. сама картинка может быть нормальной если смотреть ее отдельно, но за счет преобразования браузером может ухудшиться. Т.е. дело может быть не в опенкарт, да и вообще не в сервере и его обработке.

 

Как и прочие ресайзы как на стороне сервера, так и на стороне клиента (в браузере).

Множественные ресайзы в любую сторону (от большего к меньшему, от меньшего к большему)  могут ухудшить качество.

Нецелочисленный ресайз может ухудшить качество. 

 

Чтобы не гадать предлагаю показать сайт и сами изображения.

 

Кстати, когда появилась поддержка WEBP в FireFox, то он крайне некачественно рендерил эти изображения если требовался для них ресайз, появлялась замыленность.  При этом он делал хорошо рендеринг JPEG, PNG при таком же ресайзе.

[sitecreator]

8 часов назад, sitecreator сказал:

  разница в плотности пикселей изображения. Может проявляться как на экранах обычной плотности, так и на экранах повышенной плотности пикселей. Например, картинка 400х400  будет всегда более качественно смотреться в окошке 200х200 по сравнению с картинкой 200х200  даже на обычном мониторе (не 4К).

 

все банально как всегда.

я оказался прав.

на странице товара  @Greyphon  смотрит вот так:

 

 

 

Разумеется, что картинка 1200 х 800  будет существенно лучше выглядеть в окошке просмотра 363 х 322,  особенно на экранах с высокой плотностью.

Вот и весь секрет.

Никакого замыливания не создается.

 

Просто вы получаете разницу в качестве картинок исключительно за счет их геометрических размеров и, соответственно, их веса. А экран высокой плотности позволяет воспроизвести больше деталей с картинки бОльшего веса.

[Greyphon]

1 час назад, sitecreator сказал:

 

это запросто.  Т.е. сама картинка может быть нормальной если смотреть ее отдельно, но за счет преобразования браузером может ухудшиться. Т.е. дело может быть не в опенкарт, да и вообще не в сервере и его обработке.

 

Как и прочие ресайзы как на стороне сервера, так и на стороне клиента (в браузере).

Множественные ресайзы в любую сторону (от большего к меньшему, от меньшего к большему)  могут ухудшить качество.

Нецелочисленный ресайз может ухудшить качество. 

 

Чтобы не гадать предлагаю показать сайт и сами изображения.

 

Кстати, когда появилась поддержка WEBP в FireFox, то он крайне некачественно рендерил эти изображения если требовался для них ресайз, появлялась замыленность.  При этом он делал хорошо рендеринг JPEG, PNG при таком же ресайзе.

нужно делать картинки более подходящего размера?

[sitecreator]

13 минут назад, Greyphon сказал:

нужно делать картинки более подходящего размера?

 

 

можно и так сказать.

Чтобы все было идеально на экранах с высокой плотностью точек нужно делать соответствующую верстку, поддерживающую такие экраны.

например, так (через srcset заданы картинки для разных экранов по плотности пикселей):

 

<img src="/image/catalog/2.Jpg.webp"srcset="/image/catalog/2.Jpg.webp 1x, 
/image/catalog/_media_folder/2-sm.jpG.webp 2x" alt="Магазин" title="" width="331" height="67">

 

[Prooksius]

2 часа назад, sitecreator сказал:

Чтобы все было идеально на экранах с высокой плотностью точек нужно делать соответствующую верстку, поддерживающую такие экраны.

например, так (через srcset заданы картинки для разных экранов по плотности пикселей):

Да, вот тоже такое же делаю, но это же "кэш" картинок будет разрастаться..
У меня в проекте вообще для одной картинки по верстке требуется 6 вариаций в picture / source и srcset ставить.

 

Даже пришлось ваять редактор в CkEditor-е, чтобы вот такое к картинкам добавлять в текстах описания..

Змінено 24 лютого 2021 користувачем Prooksius

[sitecreator]

19 минут назад, Prooksius сказал:

Да, вот тоже такое же делаю, но это же "кэш" картинок будет разрастаться..

 

будет. а куда ж деваться то?

за все приходится платить.