13 replies

<picture> tag and resolving images in my hero section

I'm trying to increase the performance of my site, so I've got 3 different jpg hero image sizes, and 3 different webp sizes:

<picture>
  <source 
    type="image/webp"
    srcset="${serversSmallWebp} 640w, ${serversMediumWebp} 1280w, ${serversLargeWebp} 1920w"
    sizes="(min-width: ${screens.lg}) 50vw"
  >
  <source 
    type="image/jpg"
    srcset="${serversSmall} 640w, ${serversMedium} 1280w, ${serversLarge} 1920w"
    sizes="(min-width: ${screens.lg}) 50vw"
  >
  <img src=${serversSmall} alt="A close up of server racks"
    class="hero__image absolute right-0 top-0 opacity-[0.6] h-full object-cover lg:h-full grayscale" 
  >
</picture>

<picture>
  <source 
    type="image/webp"
    srcset="${serversSmallWebp} 640w, ${serversMediumWebp} 1280w, ${serversLargeWebp} 1920w"
    sizes="(min-width: ${screens.lg}) 50vw"
  >
  <source 
    type="image/jpg"
    srcset="${serversSmall} 640w, ${serversMedium} 1280w, ${serversLarge} 1920w"
    sizes="(min-width: ${screens.lg}) 50vw"
  >
  <img src=${serversSmall} alt="A close up of server racks"
    class="hero__image absolute right-0 top-0 opacity-[0.6] h-full object-cover lg:h-full grayscale" 
  >
</picture>

If I'm importing those 6 images at the top of my module (I'm using webpack) does that have an impact on browser performance? I know that it should only serve the image that matches the supported source type, but I just wanted to make sure I wasn't unwittingly making a mistake, as I'm pretty new to using the picture element

KP-C

Kevin Powell - Community•3y ago•

13 replies

JWode

<picture> tag and resolving images in my hero section

I'm trying to increase the performance of my site, so I've got 3 different jpg hero image sizes, and 3 different webp sizes:

<picture>
  <source 
    type="image/webp"
    srcset="${serversSmallWebp} 640w, ${serversMediumWebp} 1280w, ${serversLargeWebp} 1920w"
    sizes="(min-width: ${screens.lg}) 50vw"
  >
  <source 
    type="image/jpg"
    srcset="${serversSmall} 640w, ${serversMedium} 1280w, ${serversLarge} 1920w"
    sizes="(min-width: ${screens.lg}) 50vw"
  >
  <img src=${serversSmall} alt="A close up of server racks"
    class="hero__image absolute right-0 top-0 opacity-[0.6] h-full object-cover lg:h-full grayscale" 
  >
</picture>

<picture>
  <source 
    type="image/webp"
    srcset="${serversSmallWebp} 640w, ${serversMediumWebp} 1280w, ${serversLargeWebp} 1920w"
    sizes="(min-width: ${screens.lg}) 50vw"
  >
  <source 
    type="image/jpg"
    srcset="${serversSmall} 640w, ${serversMedium} 1280w, ${serversLarge} 1920w"
    sizes="(min-width: ${screens.lg}) 50vw"
  >
  <img src=${serversSmall} alt="A close up of server racks"
    class="hero__image absolute right-0 top-0 opacity-[0.6] h-full object-cover lg:h-full grayscale" 
  >
</picture>

<picture> tag and resolving images in my hero section

Similar Threads

<picture> tag and resolving images in my hero section

Similar Threads

Similar Threads

Similar Threads