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

Technical Q&A
, , ,

AI-generated summary

Transparent PNG collection images intermittently lose transparency after saving and refreshing in Shopify Admin, then display with a black background. Immediately after upload and even after saving, transparency appears correct; the black background only shows after a page refresh.

  • Suspected cause: automatic CDN (content delivery network) transformation from PNG to PJPG/JPEG, which does not support transparency.
  • Frequency/scale: occurs randomly (~1 in 10 images). Affected files noted around 5.6 MB; other images below 5 MB and above 7+ MB do not consistently exhibit the issue.
  • Evidence: step-by-step screenshots and the original image are provided and central to understanding the problem.
  • Environment/actions taken: developer searched the theme code and found no explicit PNG→PJPEG transforms, suggesting the behavior is at the Shopify CDN level rather than theme code.

Open questions/requests:

  • Is there a way to prevent CDN image conversion or force PNG delivery from the theme?
  • Can this be controlled via the img_url filter or another declarative setting?

Status: Unresolved; user requests guidance from Shopify’s development team.

1

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.

Notes:

  • 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:

candles-collection.png
candles-collection.png2400×2400 668 KB

  1. After initial upload:

Screenshot 2023-10-12 at 10.37.24 AM.png
Screenshot 2023-10-12 at 10.37.24 AM.png1810×2096 280 KB

  1. Before saving:

Screenshot 2023-10-12 at 10.37.46 AM.png
Screenshot 2023-10-12 at 10.37.46 AM.png1946×1534 244 KB

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

Screenshot 2023-10-12 at 10.37.55 AM.png
Screenshot 2023-10-12 at 10.37.55 AM.png1920×1504 240 KB

  1. Upon refresh: Image has black background

Screenshot 2023-10-12 at 10.38.08 AM.png
Screenshot 2023-10-12 at 10.38.08 AM.png2108×1612 263 KB

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?

@Shopify_77 DEVELOPMENT TEAM: PLEASE SEND HELP

1 Like