Faced the problem that images are not displayed in Safari if they have been resized in cdn.shopify.com
I just change the image size using an additional get parameter width=xxx.
The problem occurs with some images on Mac Safari 16.1 and on iOS 16, sometimes on Mac Chrome
Looks like the bug in shopify compression algorithm
Prepared an example for you:
https://codepen.io/BackS/pen/yLEgoNP
I am experiencing something similar: certain png images are being served with an AVIF MIME type automatically, these images don’t load in safari on iOS 16. According to the change release, https://shopify.dev/changelog/automatic-image-delivery-in-avif, Shopify automatically serves images as avif if the browser supports it. It looks like iOS 16 should support avif, but the images in question don’t load, the Inspector says “Resource has no content”. The image URLs do have a width parameter.
Chrome (images render as expected):
Safari:
Safari Inspector:
However, when I access the image URL (with width parameter) directly, it does display in the iOS 16 Safari browser:
Did you ever figure out a solution here? We’re also seeing this on multiple customer stores - the images are automatically being served with content-type: images/avif and that causes safari not to display them correctly
I ended up using SVGs in this case, but it seems there is a format
parameter for the img_url filter:
https://www.shopify.com/partners/blog/img-url-filter
This might help?
Sorry about the problem with this. I took a look at your Codepen example and I am able to see the same issue in Safari. I downloaded your original image and inspected it with the exiftool utility. It appears that your original image is a 16-bit PNG. I checked some 8-bit PNGs as source images and they appear to be converted OK.
I’m looking into updating our code to support 16-bit PNG source images such that they will work in Safari but in the meantime, as a temporary workaround, you could ensure you are starting with 8-bit PNGs to get around the problem.
We’ve shipped a fix which should make the 16-bit source PNGs which were having issues work fine now without any work around. Thanks for reporting this and your patience with getting it fixed.
