Preload images with scrset and webp

  • Resolved AJD

    (@ajd)


    3 years, 10 months ago

    I am trying to preload the hero image background to improve first paint and LCP.

    I am using the ‘rewrite’ option not <picture> for WEBP replacement. Can I just preload the .jpg version and if so will it rewrite to webp, or do I need to indicate both somehow in the preload link?

    <link rel="preload" as="image"   imagesrcset="
          image-400.jpg 400w, 
          image-800.jpg 800w, 
          image-1600.jpg 1600w" 
          imagesizes="100vw">
    • This topic was modified 3 years, 10 months ago by AJD.

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author WP Media

    (@wp_media)

    Hi @ajd

    WebP will be delivered no matter it is preloaded or not.

    On the other hand, I believe using this way would be ok for PageSpeed Insights, but it would be best to test it out and see if the recommendation is still there. Just to be 100% sure.

    ?Let me know if you need any further assistance, I am happy to help.

    Best Regards
    Marko

    How do you know the name of the hero image to pre-load? Is there a variable that can be used? I would like to try but I’m not sure how to make the image file name change.

    Plugin Author WP Media

    (@wp_media)

    Hey @fascinantjapon

    This depends on the way it’s coded. You should check the section of your theme where this is defined and edit the code directly (in the best case) – it might be in functions.php or other file.

    It would be important to make sure this is not overwritten on theme update.

    If you use some page builder or Gutenberg for this, you would probably have to edit or create a new block but it would be ideal to contact theme (or page builder) support.

    Hope this helps. ?Let me know if you need any further assistance, I am happy to help.

    Best Regards

    Marko

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Preload images with scrset and webp’ is closed to new replies.