New CDN URLs are a problem.

[twilson90]

I've noticed in my dev site (and other Shopify stores from a cursory Google search) that a new method of generating CDN URLs is causing issues.

All images and asset URLs generated by the appropriate liquid filter used to have a prefix like:
//cdn.shopify.com/s/files/.../products/
But now, for some stores (presumably this feature is getting slowly rolled out), they're all like this:
/cdn/shop/products/

The problem is many Shopify themes manipulate these URLs in Liquid or Javascript and expect them to start with "//".

So for instance, most themes I've come across implement a <meta property="og:image"> or <meta property="twitter:image"> tag so snippets can be displayed when posting links on social media, the content attribute has to be a fully qualified URL, so most themes do something like this:
<meta property="og:image" content="https:{{ image | image_url: width: 1280 }}">

This will now produce a broken URL, and I can see this is evident on several Shopify sites that I checked.
A very minor issue of course, but not to be overlooked.

In my theme however, the problem until I fixed it was much worse, I used a Javascript library to lazy load images and this new URL led to all of my images not loading.

The new CDN URLs have also broken image URLs for dev sites served with Shopify cli's theme dev command.
http://127.0.0.1:9292/cdn/shop/files/the-name-of-your-image.jpg will serve a 200 response but invalid image data.
However other assets like Javascript and stylesheets are served correctly.

This seems like a big oversight to implement this change quietly without informing devs or theme creators.

EDIT:

Just noticed this will also break many JSON-LD implementations, for example:

"@context": "http://schema.org/",
"@type": "Product",
...
"image": "https:{{ product.featured_image | image_url: width: 1500 }}",
...

This is a common implementation that Shopify stores so an image can display in rich text search results. With the new CDN URL it will output a bad URL:
https:/cdn/shop/products/...

[Alistair Shepherd]

As an example of where this may prove to be an issue, see the Shopify Dawn snippets/meta-tags.liquid.

<meta property="og:image" content="http:{{ page_image | image_url }}">
<meta property="og:image:secure_url" content="https:{{ page_image | image_url }}">

Shopify really need to provide a suitable fallback or migration tool for this change, especially given they are still recommending a practice that is going to break in presumably a few days to weeks.

[hedgehog90]

I haven't been working with Shopify long but I find it remarkable that they implemented this change silently, without any kind of announcement and without notifying devs.
I've reported it repeatedly and nobody seems to care!