OCI: when using a CDN that's a subdomain cdn.site.com, imagesrcset urls inside preload tag are not replaced to use the CDN cname
Before submitting an issue please check that you’ve completed the following steps: yes - Made sure you’re on the latest version yes - Used the search feature to ensure that the bug hasn’t been reported before
Describe the bug When the CDN is a subdomain of the site url, for example cdn.wphangar.com and we inject the OCI markup, the CDN replacement won’t be applied to the imagesrcset images, only to the href image:
CDN setting:
cdn.wphangar.com
LCP entry in the DB:
{"type":"img-srcset","src":"https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-1024x683.jpg","srcset":"https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-1024x683.jpg 1024w, https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-600x400.jpg 600w, https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-300x200.jpg 300w, https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-768x512.jpg 768w, https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341.jpg 1152w","sizes":"(max-width: 1024px) 100vw, 1024px"}
resulting markup:
<link rel="preload" data-rocket-preload as="image" href="https://cdn.wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-1024x683.jpg" imagesrcset="https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-1024x683.jpg 1024w, https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-600x400.jpg 600w, https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-300x200.jpg 300w, https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341-768x512.jpg 768w, https://wphangar.com/wp-content/uploads/2022/12/e5ec5320-c85f-3612-a79f-68079e82f341.jpg 1152w" imagesizes="(max-width: 1024px) 100vw, 1024px" fetchpriority="high">
To Reproduce Steps to reproduce the behavior:
- manually add the LCP entry in the db for a URL
- Set the CDN to use cdn.siteurl.com
- see the imagesrcset URLs not replaced in the preload tag
Expected behavior we should replace all the URLs when the CDN is used
Additional context
Slack thread: https://wp-media.slack.com/archives/C072P5EU5DF/p1725644143674919
Tickets: https://secure.helpscout.net/conversation/2700575552/511133/ https://secure.helpscout.net/conversation/2698303805/510752/
Acceptance Criteria (for WP Media team use only) Clear instructions for developers, to be added before the grooming
This is apparently not limited to CDNs that are subdomains of the origin domain, as I've got another case where the SRCSET is also not being written to the CDN, but the domain is third-party hosted:
TICKET: https://secure.helpscout.net/conversation/2708093350/512378/ SITE: https://www.ciotalknetwork.com/ CDN: https://eweajxggxf5.exactdn.com/
In this case, on a site that is using Cloudflront, OCI is fetching the image from the site instead of Cloudfront. HS ticket: https://secure.helpscout.net/conversation/2775294808/526519
I have what seems to be this same issue with one variation: the CDN isn't being applied to the HREF either, as this example shows:
<link rel="preload" data-rocket-preload as="image" href="https://www.aucoeurdujeu.fr/wp-content/uploads/kidyalarm-melon-9900-600x450.jpg" imagesrcset="https://www.aucoeurdujeu.fr/wp-content/uploads/kidyalarm-melon-9900-600x450.jpg 600w, https://www.aucoeurdujeu.fr/wp-content/uploads/kidyalarm-melon-9900-300x225.jpg 300w, https://www.aucoeurdujeu.fr/wp-content/uploads/kidyalarm-melon-9900-1024x768.jpg 1024w, https://www.aucoeurdujeu.fr/wp-content/uploads/kidyalarm-melon-9900-150x113.jpg 150w, https://www.aucoeurdujeu.fr/wp-content/uploads/kidyalarm-melon-9900-768x576.jpg 768w, https://www.aucoeurdujeu.fr/wp-content/uploads/kidyalarm-melon-9900-1536x1152.jpg 1536w, https://www.aucoeurdujeu.fr/wp-content/uploads/kidyalarm-melon-9900.jpg 1600w" imagesizes="(max-width: 600px) 100vw, 600px" fetchpriority="high">
TICKET: https://secure.helpscout.net/conversation/2843323978/539694?viewId=1061330 SITE URL: https://www.aucoeurdujeu.fr/kidyalarm-melon-9900 CDN: https://static.aucoeurdujeu.fr/ SLACK: https://wp-media.slack.com/archives/C08N8J6VC/p1739204945346459
Related: https://secure.helpscout.net/conversation/2849118557/540764
- Is the same as the case just above - both
hrefandimagesrcsetare wrongly not using the CDN domain.
How/when will this issue be planned for a fix please?
Another case that's the same as the last two: https://secure.helpscout.net/conversation/2902968886/552387/
another case here: https://secure.helpscout.net/conversation/3044180067/581504?viewId=2683093#thread-9282125574
Another case: https://secure.helpscout.net/conversation/3079703257/587367
And another: https://secure.helpscout.net/conversation/3102045586/591322