How to visualize WebP images?

How to take advantage of WebP format images?

There are a lot of image formats. You may have come across JPEG, PNG, TIFF... The truth is that which format is more appropriate will depend on the purpose. For instance, when we want to print a picture in high quality, we may be asked to take it to the printer in TIFF. When we talk about websites and the online world in general, there are a lot of myths. It’s really common to think that JPEG is the only readable and compressed format. It’s nothing like that! When it comes to websites, you face the need for optimized images. That’s a fact. And how do I compress an image? One simple way is converting it to WebP format. It’s now getting stronger and stronger as a leader, let’s learn more about it and how to visualize it!

If you don't know exactly why it's so important to have a Fast Website, read this first, it will take no more than 5'.

What’s WebP format?

WebP is quite a new image format. It was developed by Google in 2009 and launched in 2010. It’s a raster format and includes an alpha channel for transparency - just as PNG-. But what’s even more remarkable: it supports both lossless and lossy compression. What does this mean?

After you convert your files into .webp files, you will probably see something like this on your finder. If you need a step by step to convert your files into WebP, take a look at this article!

It means that you can choose either to keep the quality or lose a bit. When you decide to go for lossy compression, it functions the same way other compressed formats do: by predicting codes. On the other hand, lossless compression lets you keep the sharpness and full high quality because it reconstructs new pixels that are exactly the same as in the original image. The best part is that WebP accomplishes a reduction of file size by almost 40%. Amazing, right? Continue reading, and we are going to explain how to do it ;)

Why use it?

The main reason to start using it is that WebP is a format that gets it all. You can have transparency, such as PNG, animation, such as GIF, and great color depth, such as JPEG. But… providing smaller files than these other three! On average, you can save yourself from an extra 25-40% size! Also, you can convert any image format into WebP.

Image optimization useful tips

So we’re talking about optimization, so it’s good you take three techniques into account:

1- Size properly. It’s essential to be careful about this. A certain content area on a website has a certain dimension. It would be a waste of bandwidth to fill it with a bigger image. You can always check the dimensions requirements in your server when designing.

2- Use next-gen image formats! Just as we mentioned before, technology changes really fast and with it, better formats are developed. WebP not only is designed by Google -which directly contributes to your SEO- but also has a specific purpose to be efficient in websites.

3- Compress images. It may sound obvious but there is some confusion regarding compression and dimensions. When we talk about compression, we refer to the file size as in how much it ‘occupies’.

How to compress an image using WebP

There’s not just a way to do it. Just as it happens with other formats, there are online tools that can help you with that. You can grab your JPEGs, PNGs, and convert them into WebP.

For example, you can use: Resizeimages, this one allows you to choose to convert your images into WebP.

But you can also choose to convert it in the code itself. It will take more time but it’s perfectly possible. Depending on your server, you will have to use a different piece of code. You can learn more about it here.

How to visualize it

Now that we’ve learned how to compress an image using WebP, we’re ready to take the next step: how to previsualize and visualize our WebPs files. Despite the spreading of this format, there are still some browsers and programs which don’t read WebP. For some people, this may sound like a clear disadvantage but it can be solved.

You have your image converted into WebP, now how can you visualize it? The simplest way is to drag and drop it into a browser compatible with it. Chrome, Firefox, Opera, Microsoft Edge. Only Safari and Internet Explorer still have some trouble reading them. If you want more technical documentation about how it works, check this out!

But you can also open it in Adobe Photoshop, Gimp, Image Magick, and IrfanView.

You can find in this list the programs which open smoothly WebP images:

Mac

Google Chrome / Mozilla Firefox

Adobe Photoshop with WebP File Format plug-in  / Google Picasa

Pixelmator / XnView

ImageMagick / Opera / WebP Codec

Windows

File Viewer Plus/ Microsoft Edge

Google Chrome / Mozilla Firefox

Adobe Photoshop with WebP File Format plug-in / Google Picasa

Opera / XnView

ImageMagick / WebP Codec

You are now prepared to take advantage of all of the benefits WebP can bring into your website!

To sum up, WebP is really versatile and accomplishes the same as PNG, JPEG and GIF combined. The most important bright side is the impact on your website performance: by optimizing your images, you make sure your speed site is at its highest.

It’s true that since there are still some browsers which are not WebP compatible - and we need to make sure that images get delivered -  we may need to maintain two sets of images and this could be complicated if the website is full of them. Nevertheless, the boost on your site’s speed is much more remarkable than this little effort. Especially, since nowadays mobile users are more than 70% and fast image delivery impacts heavily on mobile performance. Now that format is taken care of, you can make your content grow!