@jvjerde 🤦♂️
That’s a very silly mistake on my part. Especially since the reason for inserting it as an image element (in addition to a background image) in the first place is to speed up image load times, which of course is completely nullified when the image is of a different size.
I’ve included a fix in version 2.5.16, which should be live within the hour. Thanks for letting me know!
Thread Starter
c1arkj
(@jvjerde)
@anlino
Thanks for the quick reply. Just updated and looks like the duplicate is still there.
@jvjerde It might be your cache. I’m only getting the one hero image when I visit your site now.
Thread Starter
c1arkj
(@jvjerde)
@anlino
Hmm… When I run it through GTmetrix it’s showing 2 loading… https://gtmetrix.com/reports/ketounitedkingdom.com/UWOvlu5L
The original 1600×900 and the resized 1536×864.
Thread Starter
c1arkj
(@jvjerde)
Hi @anlino
Sorry if I’m missing something here. I did a test on Pingdom as well and it’s also showing that the banner is still loading twice… https://tools.pingdom.com/#5d2d05264dc00000
Thoughts?
Hi @jvjerde,
The post thumbnail image element is output using WordPress the_post_thumbnail() function, which in turn gets the markup from wp_get_attachment_image(), which includes the srcset attribute as part of the <img/> element markup.
The srcset attribute makes images responsive by specifying different image sizes for different screen sizes, so a 1600×1200 image is not loaded on a 320×480 screen. It’s possible that Pingdom and GT Metrix are loading the lower resolution image because the “screen” of the device they’re testing it on is of a lower resolution than the 1600×1200 image.
I believe that some browsers will skip the srcset attribute if the primary size of the <img/> (the one set as src) has already been loaded on the page, which is probably why I only see one version of the image in Safari.
— Anders
Thread Starter
c1arkj
(@jvjerde)
@anlino
That makes sense. Thank you for taking the time to explain.
