Images Now Have Black Background Even Though Transparent

  • Posts: 3
  • Thank you received: 0
4 years 9 months ago #308914

-- HikaShop version -- : 4.2.0
-- Joomla version -- : 3.6.5

Is there any reason why after updating from an older version to a new version of Hikashop, that all the images that I had transparent backgrounds on, now have black backgrounds instead? Please advise on how to remedy this. I'd like to still be able to use PNG transparent backgrounds on my images.

Please Log in or Create an account to join the conversation.

  • Posts: 81504
  • Thank you received: 13064
  • MODERATOR
4 years 9 months ago #308916

Hi,

Well, first the thumbnails should already be generated so the update itself shouldn't change anything.
However, HikaShop now has a new setting "Stripes color" in the HikaShop configuration where you can configure the color for the background of images. By default it is blank. But if you set it to black that would explain why your images thumbnails background is now black.
So I would recommend to first check that setting

Please Log in or Create an account to join the conversation.

  • Posts: 3
  • Thank you received: 0
4 years 9 months ago #308958

That setting is unfilled, so, transparent still.

I understand you mention that the thumnails already generated so the update shouldn't change anything, but it did. For whatever reason, my transparent images now have a black background on them. There's nothing wrong with the images themselves, they are created via png in photoshop. It looks as if with the update, it added in the new webp format which may be causing issues.

But is there anyway you can check it out and let me now?

Please Log in or Create an account to join the conversation.

  • Posts: 81504
  • Thank you received: 13064
  • MODERATOR
4 years 9 months ago #308959

Hi,

Well, I suppose that there is an issue between the webp image conversion library of PHP and the way the transparency is done in the PNG (there are different ways to format a PNG image...).
The simpliest will be to just turn off the webp image support. For that, add an entry with the namekey add_webp_images and the value 0 in the hikashop_config table via your phpmyadmin.

The following user(s) said Thank You: jsyaruss

Please Log in or Create an account to join the conversation.

  • Posts: 103
  • Thank you received: 7
4 years 8 months ago #309454

Giving a bit more background on this (sorry for the pun).

The black stripe issue only happens on chrome and Firefox; I don't get it on Safari. There, the webp images look just like they're supposed to.

Because I didn't know how to fix it for the two other browsers, I turned off the webp images, just as recommended. But, it would be interesting to know if there is some better fix for this, since implementing webp images is a good thing in the grand scheme.

Please Log in or Create an account to join the conversation.

  • Posts: 81504
  • Thank you received: 13064
  • MODERATOR
4 years 8 months ago #309481

Hi,

It's really a problem of PNG image format. There are several ways to do it and the webp image conversion library in PHP is a bit limited. Further versions of PHP and/or browsers might improve that in the future:
github.com/thumbor/thumbor/issues/501
stackoverflow.com/questions/18300226/on-...-are-not-transparent
So potentially, you could fix it by changing the way you save your PNG images (not compress them too much, not use a color palette, not using an alpha channel, etc) and then reupload them, delete the thumbnails via FTP and reactivate the webp images.
I wouldn't bother for now unless your website speed is really important to you and every microsecond counts, like for amazon's website or google's.

Please Log in or Create an account to join the conversation.

  • Posts: 103
  • Thank you received: 7
4 years 8 months ago #309485

Thanks for this. Very helpful. I’ll leave the wean off for now and fix the png files in the future. Again thanks.

Please Log in or Create an account to join the conversation.

  • Posts: 195
  • Thank you received: 13
  • Hikashop Business
4 years 7 months ago #310168

We've had the same issue. Hikashop thumbnail generation of pngs with transparent background are converted to webp images with a black background. This was still the case even though at first the stripes color field had no value and then we tried setting it to #ffffff with no change.

For now, we've added the config table entry to disable webp image generation.

3by400, Inc.
3by400.com
Websites that Work, Marketing that Matters
The following user(s) said Thank You: nicolas

Please Log in or Create an account to join the conversation.

Time to create page: 0.089 seconds
Powered by Kunena Forum