{"id":6278,"date":"2020-07-27T11:10:03","date_gmt":"2020-07-27T10:10:03","guid":{"rendered":"https:\/\/www.bronco.co.uk\/our-ideas\/?p=6278"},"modified":"2022-09-20T09:14:23","modified_gmt":"2022-09-20T08:14:23","slug":"using-relpreload-for-responsive-images","status":"publish","type":"post","link":"https:\/\/www.bronco.co.uk\/our-ideas\/using-relpreload-for-responsive-images\/","title":{"rendered":"Using rel=preload for responsive images"},"content":{"rendered":"\n

If you\u2019re looking to preload images in your webpages it\u2019s probably because you\u2019re trying to improve your Core Web Vitals<\/a> scores, most specifically Largest Contentful Paint (LCP). Given these will be part of Google\u2019s ranking algorithm in 2021 it\u2019s vital to focus on improving these metrics.<\/p>\n\n\n\n

Basic preload<\/h2>\n\n\n\n

Most websites will have at least one page which includes an image that\u2019s the largest element in the viewport. This image will most certainly be responsible for your LCP score, and the bigger the image the more it\u2019s likely to impact negatively on your score.<\/p>\n\n\n\n

By using rel=\"preload\"<\/code> within the <head><\/code> of your webpage you can set the browser off downloading a file much sooner than if you waited for the rendering engine to request it when it arrives at that line of code, potentially after other render blocking resources.<\/p>\n\n\n\n

Doing so is pretty simple\u2026<\/p>\n\n\n\n

<link rel="preload" as="image"  href="banner.jpg" \/><\/code><\/pre><\/div>\n\n\n\n
Now your image will load sooner, and positively impact your LCP score.<\/p>\n\n\n\n
Using responsive images<\/h2>\n\n\n\n
But what if you\u2019re using responsive images? Preloading an image at the wrong size just isn\u2019t going to do you any good. Consider we have the following image\u2026<\/p>\n\n\n\n
<img src="banner-sm.jpg" srcset="banner-sm.jpg 640w, banner-med.jpg 920w, banner-lg.jpg 1280w" sizes="50vw" alt="" \/><\/code><\/pre><\/div>\n\n\n\n
Using only the href attribute as in the example above means you can only reference a single image, which might not be the same one the browser has deemed the right image to show based on the screen size. This is where imagesrcset and imagesizes attributes come in handy:<\/p>\n\n\n\n
<link rel="preload" as="image" href="banner-sm.jpg" imagesrcset="banner-sm.jpg 640w, banner-med.jpg 920w, banner-lg.jpg 1280w" imagesizes="50vw" \/><\/code><\/pre><\/div>\n\n\n\n
Now the browser will select the appropriate image to download as it would for the <img><\/code> element. You even use it for pixel density rather than width too:<\/p>\n\n\n\n
<link rel="preload" as="image" href="banner.jpg" imagesrcset="banner.jpg 1x, banner-2x.jpg 2x" \/><\/code><\/pre><\/div>\n\n\n\n
What about the <picture> element<\/h2>\n\n\n\n
But how does this work for the <picture><\/code> element where you\u2019re specifying different images based on a media query. For this we simple modify the original rel=\u201dpreload\u201d reference. But first, here\u2019s an example image\u2026<\/p>\n\n\n\n
<picture>\n    <source src="banner-sm.jpg" media="(max-width: 640px)">\n    <source src="banner-med.jpg" media="(max-width: 920px)">\n    <img src="banner-lg.jpg">\n<\/picture><\/code><\/pre><\/div>\n\n\n\n
In this instance we need only add the media<\/code> attribute and duplicate the reference for each image size.<\/p>\n\n\n\n
<link rel="preload" as="image" href="banner-sm.jpg" media="(max-width: 640px)"\/>\n<link rel="preload" as="image" href="banner-med.jpg " media="(min-width: 641px) and (max-width: 920px)"\/>\n<link rel="preload" as="image" href=" banner-lg.jpg" media="(min-width: 921px)" \/><\/code><\/pre><\/div>\n\n\n\n
The main difference between this and the media attributes within the image is that you need to specify both min and max widths for those in-between images. Unlike the <picture><\/code> element the browser isn\u2019t going to load only a single image based on what best fits the current screen size. In the case of preload, the browser will load anything that meets the criteria set within the media attribute, even if that means loading images that won\u2019t be output to the page.<\/p>\n\n\n\n
You can also specify different file types<\/h2>\n\n\n\n
Though you can specify a type<\/code> attribute for different file formats, like this:<\/p>\n\n\n\n
<picture>\n    <source src="banner.webp" type="image\/webp" \/>\n    <source src="banner.jpg" type="image\/jpg" \/>\n    <img src="banner.jpg">\n<\/picture><\/code><\/pre><\/div>\n\n\n\n
You may not want to do this in your preload link. You can use type=\"\"<\/code> in your preload, but any modern browser which supports both jpg and webp images is likely to download both images.<\/p>\n\n\n\n
In this case it\u2019s probably better to only preload the webp images as the support for webp and preload through different browsers is more closely aligned (see here<\/a> and here<\/a>).<\/p>\n\n\n\n
Finding that more images are preloaded that expected?<\/h2>\n\n\n\n
When we first started using rel=\"preload\"<\/code> we noticed that Chrome had a habit of downloading two sizes of the image when we were using the media attribute.<\/p>\n\n\n\n
As you might expect, we place our preload <link><\/code>\u2019s high in the <head><\/code> so that the browser starts loading these resources as early as possible. But having them above everything else was the cause of the problem, as we\u2019d demoted our meta viewport reference. Without this above our preloads the browser seemingly didn\u2019t know which image was the right one to preload and so would sometimes download the wrong one as well as the right one later in the render path.<\/p>\n\n\n\n
Understanding this, our code had to change so it resembled the following:<\/p>\n\n\n\n
<meta name="viewport" content="width=device-width,initial-scale=1" \/>\n\n<link rel="preload" as="image" href="banner-sm.jpg" media="(max-width: 640px)"\/>\n<link rel="preload" as="image" href="banner-med.jpg " media="(min-width: 641px) and (max-width: 920px)"\/>\n<link rel="preload" as="image" href=" banner-lg.jpg" media="(min-width: 90px)" \/><\/code><\/pre><\/div>\n\n\n\n
Further Reading<\/h2>\n\n\n\n
While this article is focused on providing some info on using preload for responsive images, you can go a step further on servers that support HTTP\/2 Push and instruct the server to send assets before the browser even starts to render the page.<\/p>\n\n\n\n
So far, we\u2019ve tended to use this more for stylesheets and fonts, but this can also be used for imagery. But without the ability to set attributes like media queries at this point, HTTP\/2 Push might best reserved for images displayed at a single size; like your logo.<\/p>\n","protected":false},"excerpt":{"rendered":"
If you\u2019re looking to preload images in your webpages it\u2019s probably because you\u2019re trying to improve your Core Web Vitals scores, most specifically Largest Contentful Paint (LCP). Given these will be part of Google\u2019s ranking algorithm in 2021 it\u2019s vital to focus on improving these metrics. Basic preload Most websites will have at least one […]<\/p>\n","protected":false},"author":2,"featured_media":6280,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"class_list":["post-6278","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-and-ux"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts\/6278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/comments?post=6278"}],"version-history":[{"count":0,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts\/6278\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/media\/6280"}],"wp:attachment":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/media?parent=6278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/categories?post=6278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}