[Resolved] Empty srcset 2x variant causing issues with CDN

[James]

Hi,

I’m currently testing out a new CDN and am using WP Rocket to replace URLs with the correct hostname.

However, my site actually slowed down and I’ve discovered that an image on every page is not being correctly directed to the CDN version. This image is a logo added by a GP header element (the actual site logo is fine). Specifically, the src URL is fine but the srcset url is not.

The srcset looks like =”image.svg_1x,__2x”.

I’ve reached out to WP Rocket who have diagnosed that this issue has been caused by the empty 2x variant breaking the CDN rewrites. They’ve opened an issue about it but have warned me that it may take some time to be patched and either removing the 2x variant or adding an image related to it would be a much faster fix.

Would it be possible to get some help with removing / fixing this 2x variant?

I’ve tried the code on this page. But it removed all the other image srcsets without removing the offending one.

Cheers

[David]

Hi there,

go to Customizer > Site Identity and remove the Retina Logo – you don’t require it for SVG images.
If the Retina Logo field is empty, add an image to it and publish the changes, and then remove the image and re-publish changes.

[James]

Hi David,

I’ve given this a shot but unfortunately, it hasn’t worked.

It’s not actually the main site logo that is the issue which is probably why it hasn’t worked. But the logo is one that has been added to only some pages by using GP Elements > Header element and setting a custom site logo for those pages. So it has the class of “header-image is-logo-image”.

Thanks!

[David]

Not sure if its easy for us to change that without overwriting the function.
I am gonna ask Tom if he has a simple solution to this – thanks for your patience on this.

[James]

Thanks David – much appreciated.

[Tom]

Very strange – have you tried adding a retina logo to those Header Elements and then removing it? It could have a “hidden” value causing the markup to appear when it shouldn’t.

[James]

Hi Tom,

How do you add a retina logo in a header element? I only see options for site logo and mobile logo. I’ve tried removing these, saving the element and then adding them again but no luck.

I’ve also tried the following on my staging site:

1. Disabling all plugins and snippets apart from GenerateBlocks, GenerateBlocks Pro and GP Premium
2. Including and not including a mobile logo in the header element
3. Swapping the SVG logo for a jpg image

Unfortunately, nothing has worked and the empty “, 2x” still appears in srcset.

I’ve included a screenshot of my header element settings just in case this helps.

Cheers

[David]

You would need to add a Retina Logo in the Customizer > Site Identity. Then when you edit the Header Element you should see the Retina Logo option.

[James]

Perfect – that has worked, thanks. I hadn’t realised that the retina image setting in the header element required for the sitewide logo to have a retina image.

I’ve added both and the empty “, 2x” has been replaced with the full URL and is now correctly being replaced with the CDN hostname.

Thanks to both of you for your help!

[David]

Glad to hear that!

[Author]

Posts