WebP is a highly efficient image format developed by Google in 2010. This format is designed to significantly reduce the size of images on the web without compromising on quality.
WebP images typically have a smaller file size compared to other popular formats like JPEG and PNG. This makes them ideal for websites or apps where fast loading times are essential. One of the ways WebP achieves smaller file sizes is through its use of lossless or lossy compression algorithms.
A lossless compression algorithm maintains the original image quality while reducing the file size, while a lossy algorithm removes some of the image data to reduce file size further. WebP supports both of these algorithms. Additionally, WebP images can also support transparency and animation, making them a versatile alternative to other formats like GIFs.
Most modern browsers, including Google Chrome, Firefox, and Microsoft Edge, support WebP format. However, some older browsers may not be able to display WebP images without some additional coding or conversion.
Computan developers faced the issue where the older version of Safari browser did not support WebP images. Before knowing this, the developers conveniently uploaded WebP images to the client's HubSpot website. Still, not a single image showed up properly in the older version of Safari when they tested the website.
If they chose the other image formats to upload on the HuBSpot, the website would lose a bit of page speed, which the client obviously did not like. So, the solution of a Fallback image was proposed and approved.
Ahtasham Ul Haq, HubSpot Frontend Developer, Computan worked on the project and proposed a decent solution to maintain the website speed and load images correctly on the old version of Safari browser. "So for it to work properly, we uploaded two images; one is WebP type, and the other is PNG or JPG (which use as a fallback). The Fallback images only load on Safari's old version. We set the condition that checks that if WebP doesn't load or causes the issue, the website will display the Fallback image.
"The main source in the image tag is WebP type, and another source is PNG or JPG as a fallback." says Ahtasham.
Here's a screenshot to show how to set it up at the Frontend of a HubSpot website.
"Overall, WebP offers significant benefits regarding image quality and file size. That's why we wanted to keep that format for every image on the website." Ahtasham Ul Haq, HubSpot Frontend Developer, Computan
