Besides JPG, web designers also use PNG, SVG, even GIF if you are really old school. Currently, my gallery is still under development, not because of some missing HTML/CSS code or lack of photos but because of an investigation into image compression. As a photographer, the quality of my photos is prime, and I’m always searching for the best image compression without visible quality loss; that’s how I discovered a new kid on the block: WebP.
New is a little bit relative because WebP was first announced back in 2010, and since then, it has been upgraded and improved until its current state.
What is WebP?
WebP (pronounced as “Weppy”) is a modern image format developed by Google. This format was designed to be used specifically for the web. WebP uses both lossy and lossless compression algorithms, which greatly reduces the file size while retaining the quality of the original image. Furthermore, WebP can have transparency and animation.
All common up-to-date Internet browsers support WebP, and if you are still using an old browser, my website provides a fallback to JPG. You can test this by saving the above image of this blog. Did you notice the extension of the image? If it has the *.webp extension, your up-to-date with your browser!
Compression Example
Let’s take an example of a standard-sized JPG photo on my website of 1800×1200 pixels and see how well it will be reduced in file size. A good JPG compression method in Adobe Photoshop CS is typically 75%. I’m using JPEGmini Pro to reduce the size of all my published photos instead. For local storage, this is ok, but the size is still too big for a website.
Why is all this so important?
Because starting from May 2021, Google search will use website speed as a ranking factor. The smaller the images on a website in KiloBytes, the faster they will show on a slow Internet connection. So, if your website loads fast, Google will rank you higher!
How to save images as WebP?
Adobe Photoshop doesn’t have the option to save an image as WebP, but luckily there is a free plug-in from Google called WebPShop to create them. You can download the plug-in here.
Because I’m using WP Rocket to cache and optimize this website, I don’t need that plug-in, and WP Rocket provides an addon called Imagify. From now on, all my JPG images on this website are automatically compressed to the WebP format and showed to you if your Internet browser is compatible.
