3 CRUCIAL tips for optimizing FAST websites with WEBP 2020
In This Article
I will discuss important benefits and drawbacks of using WEBP for your website and best practices on how to make the most of WEBP to optimize your website speed and increase your PageSpeed / GTMetrix scores. I have found the drawbacks from using WEBP myself, thus I will share with you specific examples on how to avoid them in your website.
What is WEBP
WEBP is a compact image format developed by Google for Google Chrome browsers. Its unique compression system allows it to display images at about two-thirds of the original size. This sounds great, but there are some important drawbacks!
Why It’s Important to Consider Browser Compatibility
Consider the table below, which is accurate as of September 15, 2020.
Since WEBP is developed by Google, other web browsers such as Firefox, Safari, and IE have to implement new logic to be able to display the WEBP images. While Firefox has already done so, Safari and IE have not, thus they are incompatible.
You can see the image below for what this looks like. I’ve highlighted what’s wrong with a red border. It results in a missing image error and it looks HIDEOUS! You obviously don’t want that for your users, or you’ll see your bounce rates skyrocket, so keep reading if you want to find out how to handle this.
Here’s how the end result looks when you have used image optimization correctly.
The 3 CRUCIAL tips for optimizing your website
1. Understand Your Visitors
You need to ask your self this important question: Are my visitors using Google Chrome and other WEBP compatible browsers?
You can know this by looking at your traffic analytics. If you don’t have it set up yet, I would recommend using Google Analytics. In Google Analytics, this can be seen via: Audience > Technology > Browser & OS.
If you know, for example, that 35% of your website visitors are using Safari (which was the case for our website), that means a significant portion of your traffic is seeing faulty images! In that case, the following tip is even more important to you.
2. Best Alternatives for Optimized Images for Lightning Fast websites For this I am using Shopify
2.1. Using the <object> tag (HTML only)
If you can custom-edit your website, you can change <img> tags to be wrapped in an <object> tag, which acts as a fallback image that is the most compatible in all browsers. If not, you will want to consider tip 2.2!
The usage of the <object> tag is as follows:
<object data="YOUR_FALLBACK_IMG_URL" type="image/png">
<img src="YOUR_WEBP_IMG_URL">
</object>2.2. JPEG vs PNG
JPEG and PNG are the two most common standards when it comes to image format. There are benefits and drawbacks to each one of them. You can see the table below for a summary.
JPEG, being the de facto standard of image formats for a long time, compresses images fairly well, thus reducing the final file size, but it is generally lossy depending on the settings you choose. What this means is that you may get artifacting on your images, where the color gets distorted if you look at them closely.
It also does not allow transparency, so if you need an image with transparent background, you should consider either of the other two.
PNG has two common forms, 32-bit and 8-bit color. 8-bit color PNG files have lower resolution when it comes to colors, so if you have a smooth gradient for example, it will not look very good in 8-bit format as it will appear to have different distinct sections. However, there are other images which look fairly similar to their 32-bit version, which is great if you use the 8-bit version to increase the speed of loading your website.
JPEG and PNG are well supported by pretty much all browsers.
There are other file formats such as TIFF, RAW, which have high quality but tend to be really large and mainly used for photo editing. Thus, they are not recommended file formats for use on your website.
3. Upload or Serve Scaled Images
One more important tip for optimizing your website speed is to have your server send out only a large enough image for the user’s needs, rather than sending a large image and having the client-side resize it. There are two ways to do this:
3.1. Server scaling before sending out
If you can modify your server, you can make it serve out scaled images based on the client’s window size rather than the full image. You can typically do this with plugins as well. Otherwise, the other option is to:
3.2. Upload the image as a manually scaled image
By testing your website on your own browser, you can inspect the images and find out the largest size they are resized to. Once you get this, you can manually scale the images then upload that to your website. This way, there’s no way for the server to send some unnecessarily large photos, which cost a lot of time for the end-user.
Conclusion
Using the 3 tips above, you can optimize your website’s images and make them cross compatible across different web browsers. These are crucial to get the best conversion rates through a foundation of high speed and high quality experience across the board for users.
