Improving Web Performance with a Next-Gen Image Format (WebP)

A while ago, to improve the performance of the WiniLogis main page, I checked its Core Web Vitals scores with Google Lighthouse. One of the main issues it pointed out was that the PNG and JPG images on the page should be replaced with next-gen image formats.

While going through various blogs and resources to fix this, I learned about HTML's <picture> tag and applied it.

With the <picture> tag, browsers that do not support WebP can show the original PNG or JPG image, while browsers that support WebP can load the WebP image through the <source> element.

This let me improve page performance and serve optimized images across different browser environments.

Below is an example of the code I applied to the image slider on the WiniLogis main page.

1
2
3
4
5
6
7
8
9
10
11
12{Array.from({ length: 34 }).map((_, index) => {
    return (
       <picture key={index} className="swiper-slide">
          <source srcSet={`이미지 경로/${index + 1}.webp`} />
          <img
             src={`이미지 경로/${index + 1}.png`}
             alt="AboutWiniLogisImg"
             loading="lazy"
          />
        </picture>
     );
 })}

If you check the element in DevTools, it may look as if the image is still in PNG format and has not changed.

But if you check the Network tab, you can see that all the slide images are loaded as WebP.