Отображение изображений в формате png с прозрачным фоном

[Zealot]

ocStore 3.0.3.7

Изображения товаров в формате png с прозрачным фоном отображаются в списке товаров (миниатюры), а также в карточке товара (как главное изображение, так и дополнительные, также и при просмотре большого изображения товара) - с чёрным фоном вместо прозрачности.

При этом эти же изображения в админпанели в списке товаров и во вкладке "Изображение" для конкретного товара имеют белый фон (или, возможно, прозрачный, учитывая, что белый цвет фона самой админпанели).

Вопрос: как избежать замену прозрачности на чёрный цвет.

С учётом того, что сам фон страницы у меня белый, меня бы устроил и белый фон картинок. Казалось бы простое решение замены прозрачности самих изображений на белый фон работает не совсем корректно: в моем случае размер большого изображения товара у меня 720х720px, и в таком же размере я загружаю исходные изображения товаров в формате png. Но при дальнейшем масштабировании изображений средствами самого движка ocStore до размеров 360х360px (главное изображение товара) или 240х240px (миниатюры в списке товаров) - на белом фоне появляются серые артефакты - группы точек с цветом, отличным от (255, 255, 255). Эти артефакты малозаметны, но всё-таки видны. А вот при прозрачном фоне изображения подменяющий его чёрный цвет не имеет таких артефактов, отсюда и вопрос о том, как сохранить прозрачность фона, или по крайней мере, если замена прозрачности на определённый цвет неизбежна - то заменить её на (255, 255, 255), а не (0, 0, 0).

[sitecreator]

Все вопросы с фоном решены в указанном ниже модуле.

Решены также масса других проблем, возникающих с изображениями.

Плюс оптимизация размеров в комплексе, включая сжатые форматы.

 

 

[Zealot]

@sitecreator , спасибо. Ознакомился с модулем.
У меня на сайте используются исключительно изображения в формате svg и png. svg - для значков, символов, логотипов и т.п., а png я прогоняю через OptiPNG.
И, если можно, несколько уточнений по Вашему модулю:
1) модуль модифицирует штатный механизм генерации производных изображений OpenCart? (Извините за корявую терминологию; имеется в виду тот встроенный в OpenCart механизм, который на основе загруженного мною "большого" изображения создаёт ряд производных уменьшенных изображений - например, для миниатюр). В самом деле, каким бы безупречным ни было "большое" изображение - его производные обычно пережимаются и появляется блюр, артефакты и т.п., на что я не могу влиять.
2) насколько я понял из описания, Ваш модуль сохраняет исходные изображения и создаёт их дубли: например, если исходное изображение в PNG - то модуль может либо прогнать его через оптимизацию OptiPNG, либо преобразовать в WEBP, и если я Вас правильно понял, то вопрос с фоном для того же WEBP решен - то есть прозрачный фон будет белым, а не чёрным. При этом в описании к модулю указано, что в случае, если браузер не поддерживает WEBP, то будет отображаться исходная картинка. Отсюда вопрос: будет ли при такой выдаче (то есть при выдаче исходных, неоптимизированных файлов) отображаться белый фон, или чёрный?

[sitecreator]

3 часа назад, Zealot сказал:

OptiPNG

 

во-первых, это бесполезно, т.к. в кеше опенкарт создает почти всегда изображения заново.

во-вторых, эффективность этого метода крайне низкая. В среднем  - это 15-20% выигрыш.

 

webp для png дает выигрыш в весе, как правило, в несколько раз.

 

3 часа назад, Zealot сказал:

1) модуль модифицирует штатный механизм генерации производных изображений OpenCart?

 

Компрессор может использовать стандартную графическую библиотеку GD, которая используется в опенкарт. Но если у вас на хостинге есть библиотека imagick, то используется именно она, т.к. в таком случае можно получить картинку лучшего качества, особенно при всевозможных ресайзах.  imagick в большинстве случаев можно включить на хостинге, т.к. нередко эта опция просто отключена в настройках. На обычном хостинге, правда, нет возможности повлиять на все настройки imagick/imagemagick, наиболее полно можно настраивать все на VDS, это к вопросу максимального качества, поскольку, например, бикубическая интерполяция (как наиболее качественная при ресайзе) обычно отключена на общем хостинге ввиду того, что жрет много ресурсов. Нужно понимать, что обычный хостинг не может выделить вам много ресурсов для обработки графики, поэтому если есть очень высокие требования к графике, то тут уже нужно смотреть в сторону VDS или мощного выделенного сервера. Но обычно imagick на общем хостинге достаточно в 90% случаев чтобы получить хорошее качество на выходе.

 

3 часа назад, Zealot сказал:

если я Вас правильно понял, то вопрос с фоном для того же WEBP решен - то есть прозрачный фон будет белым, а не чёрным. При этом в описании к модулю указано, что в случае, если браузер не поддерживает WEBP, то будет отображаться исходная картинка. Отсюда вопрос: будет ли при такой выдаче (то есть при выдаче исходных, неоптимизированных файлов) отображаться белый фон, или чёрный?

 

 

вопрос с черным фоном решен на разных уровнях. с этим нет проблем.

сама проблема черного фона может иметь разные причины, вот все эти причины изучены и проработаны.

например, можете прочитать в отзывах о решении проблемы:

 

https://opencartforum.com/files/file/4572-image-compressor-watermark-webp-lazy-load-etc-by-sitecreator/?do=findReview&review=35597

 

 

[Zealot]

@sitecreator , спасибо за столь развёрнутые ответы! Как и большинство хороших ответов, они порождают новые вопросы, на которые уже постараюсь найти ответы сам. Вполне возможно, вскоре приду к тому, чтобы приобрести Ваш модуль.