New Shopify Certification now available: Liquid Storefronts for Theme Developers

Automatic PNG to JPEG/PJPG conversion causing black background on transparent images

Shopify Partner
1 0 0

Expected behavior: 
1. PNG Image w/ transparent background is added to collection via Shopify Admin/Products
2. Same Image w/ transparent background should be displayed 


Actual behavior: 

1. PNG image w/ transparent background uploaded as collection image 
2. Upon upload, image appears correct 
3. After save, image has been transformed (probably png to pjpg/jpeg) and transparency is lost. Transparent background replaced by black background. 

- This only occurs randomly; approx 1 in 10 images that are all processed the same way will end up w/ a black background 
- No noticeable differences in file size for the images that are changed except that they are around 5.6 mb. There are images that do not show this issue at sizes below 5mb and above (7+ mb). 

The issue shown step-wise:

1. Original Image: 


2. After initial upload: 

Screenshot 2023-10-12 at 10.37.24 AM.png

3. Before saving:

Screenshot 2023-10-12 at 10.37.46 AM.png

4. After saving: (Notice that the image is still transparent)

Screenshot 2023-10-12 at 10.37.55 AM.png

5. Upon refresh: Image has black background

Screenshot 2023-10-12 at 10.38.08 AM.png



I am a developer and have searched the codebase for our theme looking for indications of declared png to pjpg transformations. This is pointing to a transformation designated by the Shopify CDN. Can I declaratively program my theme somewhere to state that images should not be transformed? Do I use the img_url filter? 


Replies 0 (0)