In this digital age and the times of uber-speed, we tend to despise everything that is slow. This applies to websites too. How many times have you experienced that you leave the websites that take longer to load? There’s a report by Google which stated that around 70% of webpages take more than 10 sec to appear on the screen. If you have a website, you have a short window of 15 sec to entice your visitors. And if it takes longer to load your website elements, you are bound to lose those visitors in the form of potential customers and clients.
Fret not, because the WebP images are here at your service! This image format can compress the images on your website smaller than the JPG without compromising on the quality and thus leading to faster page loads.
This article is all about using WebP images and how they can help you optimize your website loading time.
What is WebP Image?
Introduced in the year 2010, WebP is an image format which provides lossless and lossy image compressions. It uses predictive encoding to compress the images on the internet. WebP is supported and used by the tech giants including Google, Facebook, YouTube and Pinterest among others.
It has been found that the WebP lossless version of an image is 26% smaller than its PNG counterpart and the WebP lossy image is 25-34% smaller than its JPG version. Lossless WebP also has the feature of transparency with a few extra bytes added.
The Challenge:
Despite making the web faster, there are a few drawbacks of using WebP. All the web browsers do not support this format yet. WebP is currently supported in Google Chrome, Firefox, Opera, and Edge and is yet to set forth in Safari and Internet Explorer.
But with the internet giant Google, having its back, those days are not far when WebP will be found everywhere on the internet. Google displays the message “Serve images in the next-gen format” if you have used Google Page Speed Insights and this is how Google is supporting the use of WebP formats.
How to Add WebP Images in Web Application:
If you fall into the category of the innovators, implementing the next-gen images into your website should be your next step towards getting ahead. Now when you head to your WordPress media library to add images in this format, you will notice that the library won’t support this format.
But it does allow you to add WebP images. This can be done by using WebP converter to transform your existing media into WebP format. You can also check if the visitors’ browser allows loading this image format and alternately serve its equivalent JPG or PNG in case it does not support.
You can convert the JPG, PNG or GIF using an online converter and download the images to use for your website. Photoshop does not have inbuilt support for WebP images but you can still export the images in this format by using Photoshop plugin.
How to Provide WebP Images for WordPress Website:
If your WordPress website contains a lot of images, it is not advisable to convert each image using the online converters. Also, not all browsers support the WebP images yet. In this case, you can do the following for your website;
1. Using JavaScript to Check for WebP Image Support:
A JavaScript code can be written and added to your website which will decode a WebP image format. If this runs successfully, that means, you can keep adding WebP images. Alternately, you can make the use of JavaScript library Modernizer to check the support for WebP images.
Adding such a JavaScript code comes with a futuristic benefit. If the browsers which don’t support this format now become compatible in the future, you don’t have to rewrite your existing code to include them.
2. Using “Accept” Header:
In this method, the browser of the visitor will send a header containing the information of the image format that it supports. If the “accept” header reverts with this information, you can send the WebP images to your visitors.
3. Modifying the Hypertext Access File:
The hypertext access file is present in the root directory of your website. It is hidden unless if made available explicitly. It doesn’t have any file extension and unless you don’t know how to use it, don’t even try as it may result in severe consequences for your website.
You can rewrite this file in WordPress to change the URL of the image by adding a webp extension. By doing so, if the visitor’s browser has WebP support, the images will be loaded in WebP format else it will show the JPEG or PNG version of the image when not supported.
4. Making the Best Use of HTML5:
You can use the picture tag available in HTML5 to the best of your advantage. It lets the browser choose from a variety of formats to serve from. Using this tag, you can also serve different sizes for different devices like mobiles, tablets or desktop.
Wrap Up:
Being the one to initiate a new set of trends comes with its own pros and cons. Serving WebP images for your WordPress website is the same in this essence. But this is the right time to take the leap as the use of next-gem images is just about to be the norm soon. Get an edge over your competitors by loading your website faster with great quality images and improving the user experience. Need help in optimizing your website for better performance? Get in touch with us to know how our WordPress web development services can benefit you!
