When I got my first internet connection, it took me a full minute to open a website. Mind you, this was a text-based website, and my internet connection was so painfully slow (2-4kbps) that even sites like Yahoo! would take time to open. The world was full of text-based browsers and websites. Since then, the world has come a long way with the advent of broadband connections and fiber optic networks for the home, blazing-fast home PCs and WebP graphics on websites that open in a flash.

I now have a 1GBPS connection at home and download or stream 4k movies without batting an eyelid. However, as connections have become faster, they have also reduced our tolerance for website loading speeds. Additionally, SEO engines such as Google now penalize websites that take more than 4 seconds to load, making website optimization the top priority on every webmaster’s checklist.

The importance of improving website load times

Although image, video and other optimizations were already in place since the mid-2000s, images and graphics are still the most significant contributors to website load times. In 2010, Google introduced the WebP format that promises up to 35% reduction in image sizes compared to JPEG files and PNG.

Why are images and graphics so crucial in calculating website load times?

As web pages become increasingly visual and attractive, 60% of their content is just images and graphics. This makes images the most important item on your website speed optimization checklist. So, optimize those images before you boost server configs.

What is WebP?

WebP is an image format developed for the web by Google. This format offers better compression rates and faster loading times for websites. WebP is vital for websites today because it supports both lossy and lossless compression.

Although WebP is similar to JPEG and PNG, it offers up to a 35% reduction in image size, leading to a website that loads faster than before, boosting SEO rates by a wide margin.

How is WebP different from other image types and formats?

WebP uses predictive coding to reduce the size of an image. This means that instead of storing data for each pixel the image is made of, WebP predicts the values in neighbouring pixel blocks and encodes the difference. As there is less information than in other image types, the image size is smaller.

In addition to this, WebP also supports transparency—making it great for images, logos and icons.

What are other popular image formats for the web?

The most common image types for the web include JPG, PNG and GIF. These have their own pros and cons, which include:

• JPG or JPEG: Good for highly detailed images, especially photos. Image size is large, and compression is pretty lossy, leading to image degradation.
• PNG: Great for logos or interface screenshots, which do not require focus on clarity, as is the case with photographs. They support transparency and lossless compression.
• GIF: Great for low-quality animations but bad for static images

What is the difference between Lossy and lossless image compression?

Image compression is the usage of algorithms and software that reduce the size of an image. The compression types can either be lossy or lossless.

• Lossy compression: This is the most popular type of web-specific image compression. These images lose some quality, but as they do not have to be printed or displayed at high magnification, you cannot discern the loss of quality. Popular lossy compression formats include JPEG and WebP.
• Lossless compression: Preserves image quality while reducing file size, however, compression won’t be as high as lossy. Popular lossless compression formats include PNG, TIFF and WebP.

Just like JPEG, PNG, GIF and others, WebP also supports both lossy and lossless compression.
Image compression is a highly technical topic. If you wish, you can read Google’s study about image compression here. This study will provide all the technical details about the WebP image format and its compression types and ratios.

Do all browsers support WebP?

Most popular browsers today natively support the WebP format. The latest versions of Chrome, Firefox, Edge, Opera and Safari support the WebP format. Note that older browsers such as Safari 13 and Internet Explorer will not support the WebP format. However, as these browsers are already deprecated or are reaching end-of-support, most people have already moved to their newer or latest versions. According to Caniuse, WebP commands a 96% browser market penetration rate as of today. However, don’t worry. If you have a mobile phone or a regularly updated computer, WebP will work just fine.

Does WordPress support WebP?

Absolutely! After a recent WordPress update (version 5.8), you can upload your WebP images directly to the WordPress Media Library and insert them into content just like any other image type.

However, those using older browsers will not be able to see these images. To overcome this problem, use an image optimization plugin such as Smush, Optimole or Imagify. These plugins can create a “fallback image” for each image they convert to WebP. This ensures that all users, including those on older browsers, can view your website without any problems.

How do I know if my hosting provider supports WebP?

Most hosting providers today, such as Pack Web Hosting, support the WebP format. If your host does not support the WebP format or do not know whether your host supports it, check the Site Health tool in your WordPress Dashboard. In the site health tool, under the Info tab, you will see a field that tells you if the Imagick library is available. This library is required to display WebP images.

How can I convert my existing images to WebP?

With a content delivery network such as Cloudflare, you can automatically convert images to WebP using the plugin. However, this requires a premium subscription to Cloudflare. Additionally, you can use plugins such as Imagify and others to convert your images to WebP.

Does WebP impact SEO?

Page speed is a major factor in Google’s Page Rank algorithm. This means that every image you optimize will contribute to a faster website and higher rankings. However, this is not just about SEO. Studies have shown that you will lose over 50% of your website traffic if your website takes more than 3 seconds to load, and for every extra second, you lose an additional 10%.

Does WebP work well with animations?

Well, yes and no—depending on the application.

• Animated WebP is more CPU-intensive compared to animated GIFs. Lossless GIF images use up to 1.5x less processing power than WebP.
• Animated GIFs are larger than WebPs. Lossy WebP’s are up to 64% smaller than GIFs.
• WebP supports 24-bit RGB colour with an 8-bit alpha channel, making their quality inherently better than GIFs. Gifs only support 8-bit colour and 1-bit alpha.

Click here to read more about Animated WebPs.

Final Thoughts

WebP is quickly becoming the standard for high-quality, highly optimized images for the web. As Google continues to make web page loading speeds a critical factor for SEO, you must revisit all aspects of your website while optimizing it for speed, including images and hosting infrastructure. At Pack Web Hosting, we stay in sync with the times and provide world-class hosting solutions to our clients so that they can take advantage of the latest technologies available on the internet today. Our premium VPS and dedicated server hosting plans offer industry-leading configurations and support options so you can host your WordPress websites and corporate websites with confidence.