Duplicate featured image on homepage loading twice

  • Resolved c1arkj

    (@jvjerde)


    4 years, 2 months ago

    The featured image on the homepage is being duplicated, resized, and loaded twice creating more unnecessary load time. See… https://gtmetrix.com/reports/ketounitedkingdom.com/lmAunss1

    Original size is 1600×900 and it’s also being automatically resized and loaded at 1120×630 causing more resources to load. On my page it adds another 176kb to load.

    Is there a way to stop the double image loading and use responsive resizing only? I’m not a developer but this seems like it should be fixed. Thoughts?

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Theme Author Anders Norén

    (@anlino)

    @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.

    Theme Author Anders Norén

    (@anlino)

    @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?

    Theme Author Anders Norén

    (@anlino)

    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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Duplicate featured image on homepage loading twice’ is closed to new replies.