Web Performance Calendar

The speed geek's favorite time of year
2022 Edition
ABOUT THE AUTHOR
Robert Boedigheimer

Robert Boedigheimer (@boedie) works for Schwan's Home Service providing business solutions with web technologies. He is a Microsoft MVP, a Progress Ninja (Fiddler), an ASPInsider, a Pluralsight author, and a 3rd degree black belt in Tae Kwon Do. Robert regularly speaks at national and international events.

According to httparchive.org images represent about 43% of the page weight for the median desktop and mobile page. There are many things to consider with images such as using the proper type, serving the appropriate image for the device and situation (srcset or <picture>), and lossless or lossy optimizations. A good lossless optimization (one that reduces file size without reducing image quality) is the removal of image metadata which stores things like camera settings, latitude/longitude, and more. The metadata is not used for the visual display, so removing it safely reduces the image file size which improves site performance.

Types of Metadata

  • EXIF (Exchangeable Image File Format) – metadata added automatically when camera saves the image (camera make/model, focal length, etc.)
  • IPTC (International Press Telecommunications Council) – manually added to the image (description, keywords, etc.)
  • XMP (Extensible Metadata Platform) – added by some image editing tools

Viewing Metadata

  • OS techniques – Windows, right click on the image to select Properties and view Details tab
    Windows property details dialog
  • Online tools such as www.exifdata.com/ show an extensive list of metadata
    ExifData metadata snapshot
  • My personal favorite is the Image Bloat extension available for Fiddler Classic. Once downloaded select Rules tab and select “Show Image Bloat”
    Enable extension in Fiddler Classic
    Visit web sites and navigate with the extension enabled and it will use bricks to indicate the portion of the image size used by the metadata
    Shows the portion of unneeded image size due to metadata

Removing Metadata

Warning: Only remove metadata if these are your own photos or have permission as it may contain legally required copyright or licensing information!

  • OS techniques – Windows, return to details tab and click on “Remove Properties and Personal Information” then choose to delete select values or save copy without metadata.
  • jpegtran – CLI to re-encode JPEGs and remove metadata, download at jpegtran. The command shown specifies to copy none of the metadata from flag.jpg to flag-nmd.jpg
    Command for jpegtran

Conclusion

Image metadata can be useful in certain offline situations but slows web site image downloads due to the increased file size. Since the metadata is not use for the visual display of the image it can be removed with many different tools. Fiddler’s Image Bloat extension provides an easy way to look through a website for images that still have metadata and the % of image size storing it. In the above example that was 15% metadata, we reduced the file size with jpegtran from 46.9K to 31.2K!