Preload images with srcset and sizes attributes #149
Description
Discussed in #148
Originally posted by vralle January 29, 2025
Hi!
The plugin is powerful and has one undocumented feature. Preload images with srcset.
We can generate img tag with image-minimizer-webpack-plugin using generator.
Example:
<img class="w-100" src="@src/img/IMG_0894-2-1.png?as=webp-xl" width="1320" height="660"
srcset="
@src/img/IMG_0894-2-1.png?as=webp-xs 540w,
@src/img/IMG_0894-2-1.png?as=webp-sm 720w,
@src/img/IMG_0894-2-1.png?as=webp-md 960w,
@src/img/IMG_0894-2-1.png?as=webp-lg 1140w,
@src/img/IMG_0894-2-1.png?as=webp-xl 1320w"
sizes="
(max-width:576px) 100vw,
(max-width:768px) 540px,
(max-width: 992px) 720px,
(max-width: 1200px) 960px,
(max-width: 1400px) 1140px,
1320px"
decoding="async" fetchpriority="high" alt="">The plugin preload configuration.
The example uses a single image file as a source, so here we have to use the output image names that are preconfigured in the image generator.
preload: [
{
test: /img_0894/i,
attributes: {
as: "image",
imagesizes: "(max-width:576px) 100vw,(max-width:768px) 540px,(max-width: 992px) 720px,(max-width: 1200px) 960px,(max-width: 1400px) 1140px,1320px",
imagesrcset:
"img_0894-2-1-xs.webp 540w,img_0894-2-1-sm.webp 720w,img_0894-2-1-md.webp 960w,img_0894-2-1-lg.webp 1140w,img_0894-2-1-xl.webp 1320w",
},
filter: ({ outputFile }) => /img_0894-2-1-xl\.webp/.test(outputFile),
},
],Output:
<head>
<link rel="preload" href="img_0894-2-1-xl.webp" as="image" type="image/webp" imagesizes="(max-width:576px) 100vw,(max-width:768px) 540px,(max-width: 992px) 720px,(max-width: 1200px) 960px,(max-width: 1400px) 1140px,1320px" imagesrcset="img_0894-2-1-xs.webp 540w,img_0894-2-1-sm.webp 720w,img_0894-2-1-md.webp 960w,img_0894-2-1-lg.webp 1140w,img_0894-2-1-xl.webp 1320w">
</head>
<body>
<img class="img-fluid w-100 rounded-5" src="img_0894-2-1-xl.webp" width="1320" height="660" alt="" decoding="async" sizes="(max-width:576px) 100vw,(max-width:768px) 540px,(max-width: 992px) 720px,(max-width: 1200px) 960px,(max-width: 1400px) 1140px,1320px" fetchpriority="high" srcset="img_0894-2-1-xs.webp 540w,img_0894-2-1-sm.webp 720w,img_0894-2-1-md.webp 960w,img_0894-2-1-lg.webp 1140w,img_0894-2-1-xl.webp 1320w">
</body>All tags are valid and preload works perfect for srcset.
@webdiscus, thank you!