standard logo    Personal Education

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.

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):

clipart: adjustable lamp
bmp 209.7KiB
clipart: adjustable lamp
svg 21.7KiB
clipart: adjustable lamp
png 17.9KiB
clipart: adjustable lamp
jpg 13.8KiB
clipart: adjustable lamp
webp 7.7KiB
clipart: adjustable lamp
gif 5.1KiB


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.

clipart: adjustable lamp clipart: adjustable lamp clipart: adjustable lamp

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.

birdsfoot trefoil jpeg
JPEG image - original 6.6MiB file size
100% Crop
JPEG image - Cropped at 100% view - 634 KiB
avif image - full size was 5.6MiB file size
converted from JPEG using "Converter" software. Gitlab, licensed GPL3
crop avif
Cropped AVIF - 669 KiB

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.

Image Tutorial at
Converter a Flatpak install for image conversion.
Article about Converter program