Picture Element
The html <picture> element contains one or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.
The picture element can be used for a number of reasons but should mainly be used for 'art direction', if you are simply changing pixel density or size, use the srcset attribute.
Srcset Image
Src set works much like the picture element, however the browser does some of the work for you. It’s a slightly less opinionated approach than using the picture element. Chris Coyer explains it well here.
Lazyload
Add lazy loading to any image (or iframe), that isn't immediately available in the viewport.
Note: Do not use lazy loading on images that affect or potentially affect LCP (Largest Contentful Paint).
Preload
Preload images that may affect LCP, i.e. push images up the network 'waterfall' so they are downloaded quicker, and thus have a positive effect on LCP (Largest Contentful Paint).
<head>
<!-- Check optimal head load order for where to place preload links -->
<!-- Preload Content -->
<link
rel="preload"
as="image"
href="important.webp">
</head>
<body>
<!-- Preloaded Image -->
<img
class="c-img"
src="important.webp"
width=300"
height="200"
alt />
</body><head>
<!-- Check optimal head load order for where to place preload links -->
<!-- Preload Responsive Images -->
<link
rel="preload"
as="image"
href="car.webp"
imagesrcset="car_400.webp 400w,
car_800.webp 800w,
car_1600.webp 1600w"
sizes="50vw"
alt />
</head>
<body>
<!-- Preloaded Image -->
<img
class="c-img"
src="car.webp"
srcset="car_400.webp 400w,
car_800.webp 800w,
car_1600.webp 1600w"
sizes="50vw"
alt />
</body>Useful notes and reading:
Notes:
-
Caution
Images that are highly likely to be in-viewport, and in particular LCP images, should not be lazy-loaded.
-
Experiments conducted using Chrome on Android suggest that on 4G, 97.5% of below-the-fold images that are lazy-loaded were fully loaded within 10ms of becoming visible. Even on slow 2G networks, 92.6% of below-the-fold images were fully loaded within 10ms. This means browser-level lazy-loading offers a stable experience regarding the visibility of elements that are scrolled into view.