Product pictures dark in admin and on site

I’ve noticed this is only happening if I upload the product photo as a .png
If i upload the exact same picture in .webp or .jpg they look fine

Hi @explorergt92

If https://carkeysatl.com/product/68394205aa/ this product is an example of the problem you’re seeing, then it could be a problem specific to your computer, because on my end the frontend/product page is looking normal.

Link to image: https://snipboard.io/ZfLd3H.jpg

unless I click the magnifying glass

On my end it is looking equally bright with or without the magnifier.

I’d recommend testing this out on another computer to see if that helps, or have someone else check at their own place.

If required you may want to clear your browser’s cache as explained in this guide: https://wordpress.com/support/browser-issues/#clearing-your-browser-cache

If the issue doesn’t resolve then please share a screenshot of your backend where the dark image can be seen. We recommend https://snipboard.io for easily sharing screenshots – please follow the instructions on that page, then paste the URL in this thread.

this is only happening if I upload the product photo as a .png
If i upload the exact same picture in .webp or .jpg they look fine

You can send links of some more products where this is happening so we can check further.

Cheers

• This reply was modified 2 years, 8 months ago by Margaret S. woo-hc.

PNG upload

webp upload

Hi @explorergt92

Thanks for sharing the comparison images.

The screenshot I shared seems to be of the better type (not the darker one) – so this seems to be a computer-specific issue. Please try the other steps suggested in our previous interaction.

Let us know if we can be of further help.

Thanks

Here’s the difference I’m seeing on my end
https://carkeysatl.com/wp-content/uploads/2022/03/webpvspng.webp

Hello,

Thanks for writing back!

I can see you have both PNG and WEBP images in that product and could reproduce the behavior you’re describing on my end.

Notice that when you click the magnifying glass, you’re seeing a different image file: DJC-68394205AA-A-416x416.png vs DJC-68394205AA-A.png.

This seems to be an issue related to the compression used to create the image thumbnails – some loss in color/quality may happen. If you’re having better results with WEBP, that’s great, it was developed as a web-friendly alternative to PNG and JPEG, so I would suggest you use it instead.

Here’s an article focused on using WEBP images in WordPress sites: https://www.wpbeginner.com/wp-tutorials/how-to-use-webp-images-in-wordpress/

Please let us know if we can be of any further assistance.

We’ve not heard back from you in a while, so I’m marking this thread as resolved. Hopefully, the above info was helpful.

If you have further questions, please feel free to open a new topic.