From jpg to webp

2021-05-05
2 min read

Why do we use webp?

I’m currently taking a PHP course at Udemy, where I learned about the webp extension.

It seems to be an extension created by Google that can compress images with reversible compression and alpha (transparency).

Free image samples from the Internet

  • Try to convert a free image from the net to webp
  • The following is a sample image I’ll be using. These are images that I used in my blog in the past, and may use in the future.
  • (The images shown below are webp converted images)

  • daffodils daffodils
  • kissingSpring kissingSpring
  • orangeFlower orangeFlower
  • springFlower springFlower
  • threeCuteChicks threeCuteChicks

Trial results

Example: A 324KB jpg is now compressed to 110KB, 30% of its original size.

home image namejpg sizewebp sizecompression ratio
daffodils324 KB110 KB30%
kissingSpring874 KB537 KB61%
orangeFlower421 KB73.7 KB18%
I’m not sure what to do with it.
threeCuteChicks333 KB124 KB37%

Measurements by LightHouse on the old blog:

light-house2021-05-05

Conclusion

  • Except for one image that slightly increased in size, the result was a significant compression.
  • The old blog, which had a performance score of about 70, went up to 97.
  • Image loading also became about 1.5 times faster.

Webp is a little difficult to use when saving images, so I need to make some adjustments in that area, but considering the speed of loading, I think Webp is a great option.