Encode Commas for valid srcset

[lxbdr]

tl;dr It might be good to encode commas in cloudinary URLs as %2C except f_auto

I had the issue that Chrome was not picking up the correct image from the srcset. And I found these two interesting things:

Media queries in sizes attribute work exactly same as CSS media queries. So first valid media query, reading from left to right will be applied. Funny thing browser does (Chrome at least), if one query between set of commas is invalid it won't invalidate whole sizes attribute, just that query.

https://stackoverflow.com/a/55240049/10316085

Commas can indeed be encoded in Cloudinary URLs in most places without any issues. However, in conjunction to f_auto, existing commas should remain unencoded at the moment.
Nevertheless, there is a quick and easy workaround for this. Just replace the comma that is after f_auto with a solidus (slash - /) sign and it will work: https://res.cloudinary.com/endjin/image/upload/f_auto%2Cq_70%2Cw_512/v1590614405/assets/images/blog/2020/05/header-depositing-cheques-via-a-mobile-banking-experience-1024px.png

https://support.cloudinary.com/hc/en-us/community/posts/360008383359-Encoding-Commas-in-the-URL-changes-behaviour

I solved it with adding a filter, and it started picking up the correct image from the srcset

\add_filter('cloudinary_url', function ($url) {
    $url = preg_replace('/\/f_auto,/i', '/f_auto/', $url);
    $url = str_replace(',', '%2C', $url);
    return $url;
}, 10, 1);

[junaidbhura]

Hi @lxbdr thanks for creating this issue!

Can you share an example of the full image with SRCSET here that was causing the issue on Chrome? Not sure I fully understand the issue?