5 min read Backend

Image compression: why webp is rockstar of image formats

Image compression: why webp is rockstar of image formats

JPEG has been the most widely supported image format for 25 years. Classic JPEG encoders lead to relatively weak compression, while more modern JPEG encoding efforts (like MozJPEG) improve compression but are not quite as optimal as modern formats. JPEG is also a lossy compression format. While decoding speed for JPEGs is excellent, it lacks other desirable features required of images on modern, eye-catching websites. It does not support transparency in images, animation, depth maps, or overlays.

At Careers360, our content management platform allows uploading of several types of images with multiple formats such as SVG, PNG and JPEG as well, but even after validating on image size and dimensions we were getting images that were huge in size or did not looked good on mobile devices

The target for modern image formats is thus to overcome the limitations of JPEG and PNG by offering better compression and flexibility to support the other features discussed earlier. One more challenge is to optimize for Google Lighthouse and Core Web Vitals, With this background, let us look at what WebP have to offer

WebP is often regarded as a "rockstar" among image formats due to its impressive compression efficiency and other advantageous features. Some of the reasons why WebP is highly regarded in the realm of image compression and fit for our usage:

  1. Lossy and Lossless Compression: WebP supports both lossy and lossless compression, allowing users to choose between higher compression ratios with some loss of quality or lossless compression for retaining the original quality without significant file size reduction.
  2. Small File Sizes: WebP images typically have smaller file sizes compared to formats like JPEG and PNG while maintaining comparable quality. This is essential for websites and applications where reducing loading times and bandwidth usage is crucial.
  3. Improved Compression Algorithms: WebP uses advanced compression algorithms, including predictive coding, transform coding, and entropy coding, which contribute to its superior compression performance.
  4. Alpha Channel Support: WebP supports both lossy and lossless compression for images with an alpha channel (transparency), providing a significant advantage over JPEG, which does not support alpha channels, and PNG, which uses lossless compression for transparency (resulting in larger file sizes).
  5. Animation Support: WebP supports animated images (similar to GIFs) with smaller file sizes, making it an attractive option for creating animations for the web.
  6. Wide Browser Support: Most modern web browsers, including Google Chrome, Mozilla Firefox, Microsoft Edge, and Opera, support WebP images natively. This widespread support ensures that WebP images can be displayed on a majority of devices without requiring additional plugins or software.
  7. Open Source: WebP is an open-source format developed by Google, making it accessible to developers and enabling continuous improvements through community contributions.
  8. Quality Settings: WebP allows users to adjust the quality settings during compression, giving them control over the balance between image quality and file size, which is particularly useful for web developers and designers.
  9. Efficient for Thumbnails and Mobile Devices: WebP's small file sizes make it ideal for generating thumbnails and displaying images on mobile devices, where bandwidth and storage limitations are often concerns.

PNG is also a widely used image format, and we found that around 44% of our images were in PNG, Like WebP, it supports transparency, which is an important element for web design and providing a consistent experience to our students.

With these in mind we set out to optimize our pagespeed score as per google recommendations, the transition was done in multiple phases, first step was to convert our existing JPEG and PNG images to WebP, we wrote a simple utility with python which converted our existing images to WebP

To convert JPG and PNG images to WebP format using the Python Imaging Library (Pillow), you can follow these steps:

  1. Install Pillow:If you haven't installed Pillow yet, you can do so using pip in your terminal or command prompt: pip install Pillow
  2. Conversion Code:Here's a sample Python code snippet that demonstrates how to convert JPG and PNG images to WebP format using Pillow:
from PIL import Image
import os

# Function to convert JPG to WebP
def convert_jpg_to_webp(input_path, output_path):
    image = Image.open(input_path)
    image.save(output_path, 'webp')

# Function to convert PNG to WebP
def convert_png_to_webp(input_path, output_path):
    image = Image.open(input_path).convert('RGB')
    image.save(output_path, 'webp')

# Folder containing JPG and PNG images
input_folder = 'input_images/'

# Output folder for WebP images
output_folder = 'output_images/'

# Ensure output folder exists
if not os.path.exists(output_folder):
    os.makedirs(output_folder)

# Convert JPG files to WebP
jpg_files = [f for f in os.listdir(input_folder) if f.endswith('.jpg')]
for jpg_file in jpg_files:
    input_path = os.path.join(input_folder, jpg_file)
    output_path = os.path.join(output_folder, os.path.splitext(jpg_file)[0] + '.webp')
    convert_jpg_to_webp(input_path, output_path)

# Convert PNG files to WebP
png_files = [f for f in os.listdir(input_folder) if f.endswith('.png')]
for png_file in png_files:
    input_path = os.path.join(input_folder, png_file)
    output_path = os.path.join(output_folder, os.path.splitext(png_file)[0] + '.webp')
    convert_png_to_webp(input_path, output_path)

print('Conversion completed.')
  1. Replace 'input_images/' with the path to the folder containing your JPG and PNG images. The WebP images will be saved in the 'output_images/' folder.
  2. This code converts all the JPG and PNG images in the input folder to WebP format and saves them in the output folder. You can modify the input and output paths according to your project's directory structure.
  3. Note: The quality settings for WebP compression can be adjusted by passing additional parameters to the save() function. For example, you can specify the quality level like this: image.save(output_path, 'webp', quality=80), where quality is a value between 0 (lowest quality) and 100 (highest quality). Adjust the quality setting as needed for your use case.

We could optimize our images based on quality we did a lot of tests to compare compression and quality sizes and settled with 30% as reduction in quality would lead to 70% saving in image size

Our Original Image in JPG: (Original Image Size : 60 KB)

URL: https://cache.careers360.mobi/media/article_images/2020/10/6/JEE-Main-Exam-Pattern-2021.jpg

VS WebP optimized image: (Image Size: 15.7 KB)

URL: https://cache.careers360.mobi/media/article_images/2020/10/6/JEE-Main-Exam-Pattern-2021.webp

We can see no noticeable difference in images whereas we got the reduction of 4x in terms of image sizes.

Lower image sizes reduced network bandwidth and allows faster loading on Mobile devices in rural areas

Next we created urls for both the versions and allowed the frontend team to load WebP or JPG on any page based on requirements, along with this we changed our CMS to convert the images automatically on uploads and put on restrictions to not allow uploading of images over certain sizes.

With these changes we finally moved all of our JPG and PNG images to WebP saving 27% on overall storage of images. WebP has gained popularity as a versatile and efficient image format, especially for web-based applications where fast loading times and minimal data usage are critical considerations

Subhajeet Dey

Subhajeet Dey