Image is preloaded with wrong resolution

  • Resolved felix001

    (@felix001)


    3 weeks, 2 days ago

    Hello!

    On my site I have a background image which I’m trying to preload. I used the button “find image to preload” to select the correct image. In the request waterfall of DebugBear (mobile selected) I can see that the image is indeed preloaded. It shows something like this:
    IMG_ABCD-1536×885.jpg

    But at the same time the LCP initiator is running and after it finishes, the same image is loading again but with a different resolution. It looks like this:
    IMG_ABCD-768×442.jpg

    Now I figured, that I can select the preloaded size (1536×885) for my background image in Elementor. Then it works and the LCP initiator in the request waterfall vanishes and the preloaded image is used as expected.

    The problem is: I don’t need that resolution for mobile and I intentionally reduced it to speed up the site. So why is the image preloaded with the wrong resolution when I select 768×442?

    The other problem is: Even if I select 1536×885 px in Elementor, Google page speed insights still doesn’t preload the LCP image. Probably because it uses a different resolution then DebugBear for testing.

    So the point is: A different resolution of the image is preloaded then what is needed later on. Maybe the plugin could make use of the attribute “imagesizes” to solve this?

    Thanks,

    Felix

Viewing 1 replies (of 1 total)
  • Plugin Author Rhys Wynne

    (@rhyswynne)

    2 days, 6 hours ago

    Hi Felix,

    Sorry for the delay in responding.

    Could you force the URL of the mobile/desktop images? Rather than use the button, force the URL by pasting the URL of the Pagespeed insights into the relevant box (Google Page Speed Insights will tell you the URL that it recommends preloading, and use that instead).

    It’s not ideal, nor an exact science, but I suspect that may be the way forward.

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.