As a front-end developer, I’m always looking for new ways to reduce the size of a web page. The biggest factor that I take into account when looking at minimizing site speed is image optimization. There will always be both a need and want for high quality images on a site and determining which file type to use can be taxing. There are many factors that need to be taken into account when deciding which image format to use but the most important one for me is creating a small file size without sacrificing quality.
Intrigued by this notion of image quality, I did some research and discovered an image format I’d never used before: WebP. In my continued search, I read through documentation provided on Google’s Developers Site. I was amazed at what I read there; WebP lossless is 26% smaller than PNG images and WebP lossy is 25-34% smaller than JPEG images. This all seemed too good to be true and the more I researched, the more drawbacks I found. The biggest issue I discovered is one that almost every front-end developer experiences; support.
I decided to conduct further research on whether there existed any solutions to the support problem. Fortunately, an article in Smashing Magazine gave me just the answer I was looking for. The suggestion within this post pointed to a polyfill that I’ve used in the past, Picturefill. This polyfill would allow me to use for the WebP file and then setup a backup if the browser doesn’t support the initial source file.
Now, actually creating a WebP image file requires more than just your typical image editing software. Google currently mentions several sources:
The main benefit I foresee for a front-end dev trying WebP is the opportunity to try something new to push a site in a better direction. Learning to use a different file format and experimenting with it can only help to broaden our collective knowledge of what’s truly happening between different image types and compression.
Have you experimented with WebP in any of your projects? If so, share in the comments. We love seeing what you’re working on!
Front-End Friday is an ongoing series about our favorite tools, tricks, lessons, and best practices. Want to share your own favorite front-end development lesson? Chat with us on Twitter!