Home > NatickFOSS Demos > Web Images

Comparing Web Image Formats

There are a large number of image formats. Not all of them are suitable for use on web pages.

Web page designers use several file formats for their web pages.

• BMP is not popular any more and has relatively large file sizes.
• GIF effectively replaced BMP and is still common, but is showing its age, being generally replaced by PNG
• PNG offers better "lossless" compression than GIF, but isn't generally preferred for photo-quality images.
• WebP (relatively new) is even better at lossless compression than PNG.
• JPG (JPEG) is the most commonly used photo format, but it has "lossy" compression.
• AVIF is a relatively new photo-quality format, and it works with current versions of Firefox, Chrome, Safari and Opera.
• JPEG XL is a new, efficient format, but it has not generally been implemented by modern browsers.

While bandwidth has increased significantly, minimizing web download time is still important. Good web page design minimizes the time it takes to deliver a page to your browser. Images are not the only issue, but keeping their size small is good.

Non-Photo Images

Some images for banners, icons and clipart are not intended to be photo quality.

I made the following lamp image using Inkscape and exported it for web page use as a PNG graphic. Then I converted it to several other formats to compare the file sizes.

Compare the different versions (which I've ordered largest file to smallest):

 

Visually, except for the gif version, I think all of the images are acceptable.

Jpeg isn't designed for this kind of image, suffering a bit less than the gif to my eyes.

The WebP image is the winner for file size AND quality.

However, SVG files have the potential to be resized larger with no loss of quality. Compare the SVG, WEBP and GIF images when resized larger.

Photo Images

Most photo images on web pages are stored as jpeg files. It has been the "standard" photo format for years. Avif and Jpeg XL are newer formats. Time will tell which of the formats become the new standard for photos.

Current Firefox and Chrome/chromium browsers can view the AVIF format. KDE's image viewer, Gwenview, handles avif images well. Your favorite image viewer may or may not be able to do so. Bob Primak reports that the XnView MP image viewer can also handle avif format. I have not tried it.

I used a photo of the wildflower, birdsfoot trefoil, taken with my cellphone at the camera's original 5312x2988 pixel resolution. The cellphone stores images as jpeg.

Using the GUI program Converter, I duplicated the image to avif format using the default setting of 92% quality. The original jpg file was 6.6MiB, and the converted avif was 5.6MiB, approximately a 15% size reduction. I could not see a difference in either image when viewed at full size.

Important: Full-size photo images are not appropriate as part of a web page. Photo should always be made as small as possible before putting them into a web page. Sharing full-size images is better done behind the scenes.

Converter is primarily a graphical front end for the command line tool, ImageMagick.

The images shown below are NOT the originals. They have been made smaller to save transfer time over the Internet to you.

I'm withholding judgment about the benefits of AVIF for all circumstances, but thought the format was worth mentioning at our NatickFOSS meeting.

Update: Screenshot comparison.

Resources:
Image Tutorial at web.dev
Converter a Flatpak install for image conversion.
Article about Converter program