WebP vs JPG: Which Format is Killing Your Site’s Load Speed and Space

Less than 6 minutes read time – Latest update below

I’m always looking for ways to improve, and recently, I focused on optimizing my website’s limited storage while presenting larger, high-quality photos to my audience. During this search, I discovered an alternative image format: WebP.

WebP and JPG (JPEG) are both widely used image formats, but they differ significantly in compression, quality, and use cases. To test this, I created a header image combining two photos side by side. The left half is a JPG compressed to 70% in HD, while the right half is a WebP at 70%.

The results surprised me: the WebP image outperformed the JPG. It preserved finer details, displayed fewer color shifts, and avoided the noise-like artifacts that were noticeable in the JPG. This experiment clearly demonstrated WebP’s advantages, especially in retaining quality with smaller file sizes.

WebP:

  • Compression: WebP offers both lossless and lossy compression. Its compression efficiency is higher than JPG, meaning it can achieve smaller file sizes while maintaining similar or better image quality.
  • Image Quality: WebP typically provides better image quality at smaller file sizes compared to JPG, especially for images with transparency (lossless WebP) or when dealing with complex color gradients.
  • Transparency (Alpha Channel): WebP supports transparency (alpha channel) in lossless compression, which JPG does not.
  • Animation: WebP supports animated images, similar to GIFs but with better compression.
  • Browser Support: WebP is supported by most modern browsers (Chrome, Firefox, Edge, Opera), but not all (e.g., older versions of Safari).
  • Use Cases: WebP is commonly used for web images, particularly when optimizing for speed and bandwidth efficiency.

My Experience:

I was familiar with WebP but didn’t expect its quality to surpass JPG. Curious, I gave it a try. The result? With basic compression, WebP produced much smaller files with better output and less color shifts and noise. In fact, the images looked noticeably superior compared to my 70% JPG outputs in smaller pixel formats such as HD (1920×1080) or smaller.

For my website, I tested an image saved at full resolution (5232 × 3904). The JPEG version ended up with a file size of 1.4 MB, while the same image saved as WebP using default settings was only 616 KB—a huge difference! Surprisingly, the WebP file not only reduced storage significantly but also looked slightly better than the JPEG. An unexpected win for both quality and efficiency!

The Downsides:

RawTherapee doesn’t support WebP output, so I need to convert each photo manually. I typically use gThumb or GIMP for this.

  • gThumb: Doesn’t export Exif data, so you might lose important metadata.
  • GIMP: Does support Exif export, but you need to enable it manually during the save process.

If you use other software, make sure to check if Exif export is supported, especially if preserving metadata is important to you.

JPG (JPEG):

  • Compression: JPG uses lossy compression, which reduces file size by discarding some image data. This can result in a loss of image quality, especially at higher compression levels.
  • Image Quality: JPG is typically used for photographs and images where subtle color gradients are important. The quality decreases as compression increases, but it’s still widely accepted because of its balance between quality and file size.
  • Transparency: JPG does not support transparency.
  • Animation: JPG does not support animation.
  • Browser Support: JPG is universally supported by all browsers and devices.
  • Use Cases: JPG is widely used for photographs, web images, and in situations where file size is important but transparency or animation is not needed.

My Experience:

JPG has always been my preferred format for both web and prints. The quality was decent, but for web uploads, I had to resize images to around HD resolution (1920 x 1080 or slightly larger) and set compression to 70% to keep file sizes manageable for my gallery and website. While this was also fine for printing, it restricted print sizes to postcard dimensions.

Summary:

  • WebP is generally better for reducing file sizes without sacrificing image quality, especially for websites, where fast loading times are important. It also supports transparency and animation.
  • JPG is more universally supported and may be a better choice when working with older systems or applications that don’t support WebP.

Examples:

I started with a converted RAW to TIF at full resolution 5232 x 2943 with 92.4MB

Then I converted the TIF to JPG in gThumb at 70% best quality : 5232 x 2943 with 1.5MB

Followed by a TIF to Webp in gThumb, best settings 70% : 5232 x 2943 with 737,3KB – which is already a big improvement !

Then I did the same in GIMP – TIF to JPG with best settings : 5232 x 2943 with 1,9MB

And finally, TIF to Webp in GIMP with best settings : 5232 x 2943 with 752,6KB – The output from GIMP was slightly larger than gThumb’s, but the quality – even the color – was noticeably better, on-screen. After uploading to WordPress, the GIMP output—converted from TIF to WebP—stood out as the best. The storage savings are more than double, and the quality is high enough for large-format printing, something I can’t say for the JPG.

Conclusion:

If you’re optimizing images for your gallery, WebP might be worth considering for its efficiency, though JPG is still a reliable and widely compatible format.

Still I would recommend experimenting with WebP. Not only does it save web space, but it also makes your website load faster. Plus, you can showcase your photos in larger pixel formats, even at full resolution!

For me, the biggest advantage is the reduced storage space required on my computer. Even more importantly, the photos are of much higher quality, allowing for large-format printing—regularly at A3 size and even larger through a photo lab.

Deep Dive Podcast :

Update 06-01-2025:

Thanks to a tip from one of our readers, I discovered that Darktable does support exporting to WebP—a big advantage, especially since Darktable is open-source software. I quickly checked the “Portable Darktable 5.0.0” version on my PC, and sure enough, the feature is there. Fantastic! Big thanks to Berny!

Harrie pointed out that Adobe Lightroom 6.14 does not offer WebP export. However, I read online that Adobe Photoshop supports it through plugins. On one hand, I was surprised Adobe doesn’t natively support such an important file format. On the other hand, this is typical of large, slow-moving companies—it might eventually arrive, but only if it proves profitable.

Darktable Portable 5.0.0 – Left side – Format Options – File Format : Webp and options for saving.

I don’t have any Sponsoring Companies, Patreon support, or Follower Donations.

I don’t drink Coffee, well, I do … but not the financial form you sometimes find on other websites, like ‘buy me a coffee’ 😊

However, what I truly need to keep going is Motivation, and the best part is, it won’t cost you a thing. You can offer it for free – just hit the Like button and Subscribe !



Discover more from Open Source Photography

Subscribe to get the latest posts sent to your email.

Type your email…

9 thoughts on “WebP vs JPG: Which Format is Killing Your Site’s Load Speed and Space

Add yours

    1. Bedankt Harrie ! Ja helaas, dan vindt je iets dat beter zou kunnen zijn, en dan wordt het bijna niet ondersteund – gelukkig kan elk systeem, Windows, MacOS of Linux er mee weg,en ook de meeste internet browsers, maar zelf omzetten is een groot probleem. Maar, ik onderzoek het verder, er moet een simpele manier zijn 🙂 Groetjes !

      Like

Leave a reply to harrienijland Cancel reply

Website Powered by WordPress.com.

Up ↑

Discover more from Open Source Photography

Subscribe now to keep reading and get access to the full archive.

Type your email…

Continue reading