Preload images with srcset #148

vralle · 2025-01-29T11:54:39Z

vralle
Jan 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!

webdiscus · 2025-01-29T15:24:56Z

webdiscus
Jan 29, 2025
Maintainer

Hello @vralle,

thank you for the workaround to preload image with attributes such as srcset and sizes.
I think, we can improve the preloader to automatically take the attributes:

<img ... srcset=".." sizes=".."> => <link rel="preload" as="image" imagesrcset=".." imagesizes="..">

1 reply

webdiscus Jan 29, 2025
Maintainer

Here is the issue: #149

vralle · 2025-01-30T09:29:33Z

vralle
Jan 30, 2025
Author

Since v4.17.0 the plugin pick up srcset and sizes attributes for image preload.
@webdiscus, thank you!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Preload images with srcset #148

{{title}}

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{title}}

Select a reply

Preload images with srcset #148

vralle Jan 29, 2025

Replies: 2 comments · 1 reply

webdiscus Jan 29, 2025 Maintainer

webdiscus Jan 29, 2025 Maintainer

vralle Jan 30, 2025 Author

vralle
Jan 29, 2025

Replies: 2 comments 1 reply

webdiscus
Jan 29, 2025
Maintainer

webdiscus Jan 29, 2025
Maintainer

vralle
Jan 30, 2025
Author