Unsuitable Image Formats for Websites
As I mentioned in our How Fast Is … USPS.com video and blog post yesterday, I discovered a few TIFF files on the US Postal Service’s website. I thought a follow up post about images suitable for use on the web was in order. According to the awesome HTTP Archive, the most common image formats on the web are PNG, GIF, and JPEG:
Together these images can handle the most common image use cases on the web:
- GIF – simple animations
- PNG- Figures, diagrams, screen shots, basic images
- JPEG – Photographs
These formals are so common and entrenched that the processors and SoCs used in mobile devices are hardware optimized for things like JPEG decoding or the checksums used from PNG’s DEFLATE compression scheme. And frankly, until there is a format which accomplishes these common use cases better than an existing image type, this will not change. This “what we have works fine” mentality is a big reason APNG and other GIF animation replacements have failed to take off. They are not significantly better at solving the simple animation use case, so they do not get adopted.
Unsuitable Image Formats
If these are the most common and suitable formats to solve various image use cases on the web, then what about other image formats? What make up that “1% other” on the chart from the HTTP Archive? By and large, these other image formats have one of the following characteristics that make them unsuitable for use on the web:
- They are not natively supported by most browsers.
- They do not compress graphical data, do not compress graphics data by default, or compresses graphics data uses inefficient or obsolete methods.
- They contains additional information not relevant for display on a monitor.
Characteristic 1 without a doubt kills off almost any image formats you have heard of. Characteristics 2 and 3 make those image formats that are compatible wasteful. So, while there are dozens of image file formats that are unsuitable for the web, the types of unsuitable image formats you do find on the web tend be compatible (or were compatible at some point in the past), but are wasteful and bloated in size. We will focus on 3 types of image format that meet this criteria.
The TIFF images I found on USPS.com are a good example of this. At one time, browsers did support them. But today TIFF images cannot be natively rendered by modern web browsers and require a plug-in to be visual. TIFF images are not compressed by default. TIFF images are also widely used in the publishing industry so they often use alternative color spaces like CMYK and contain printing information such spacing, lay out, and density. All of this makes TIFF images unsuitable for use on the web.
BMP images are another example of an unsuitable image format for use on the web. BMP images do not compress graphical data. While a primitive form of RLE compression is defined in the specification, this is not widely supported and rarely used. Even if it was, RLE achieves poor compression ratios compared to a more modern scheme such as DEFLATE. Images that, when saved as a BMP images will be hundreds of kilobytes are only tens of kilobytes when saved as a PNG or JPEG. With such huge sizes, BMP is definitely not a suitable image format for the web.
Besides TIFF and BMP, a final image format encountered on the Internet which is not unsuitable is XBM. Ironically, XBM was the very first image format used on the web and support started with the Mosaic web browser. Subsequent web browsers supported XBM to be compatible with early websites. Sadly, XBM is, to put it nicely, a horribly horribly horribly designed image format. If you can imagine all the badness of the DOM’s
document.cookie “interface” somehow packaged into a image format, you’d get XBM.
Each XBM file is, quite literally, valid C source code, defining a byte array and the bytes values to populate it. In addition to not being natively compressed, this approach creates a large number of security holes as the format essentially says:
Hey web browser, I’m totally untrusted content from some random 3rd party you found on the Internet, but I’d like you to allocate an array in memory that is X bytes big, and then give me a pointer to it. Now I’m going to shove some number of bytes (who knows how many!) directly into memory starting at that address.
Security vulnerabilities like buffer overflows, heap overflows, and uninitialized memory leakage cropped up everywhere! It was so bad, that to fight the flood of issues Microsoft removed support for the image format back in XP Service Pack 2. Even in late-2008, before I stopped doing security research, I quite by accident discovered an information leakage vulnerability in Firefox using XBM images. XBM is exceedingly rare today, though Zoompf has encountered several websites with them through our free scans and from customers using our WPO product.
Why Do Unsuitable Image Formats Get Used?
If these formats are a poor fit for web usage, why do they get used on websites? There are a few reasons:
- Legacy. Once upon a time, that image format worked. The site is old, and nobody fixed it. This is common with XBM and BMP.
- Mistake. People just make mistakes. Sometimes they didn’t know they shouldn’t use one of the image types. Usually someone didn’t intend to use an unsuitable image format. 9 times out of 10, when Zoompf detects a BMP image, it has a file extension of .jpg or .png. The creator intended to save the image as a JPEG, but the actual image format that was used was BMP.
- Actually meant to use it. If you want to provide a downloadable version of your logo that is high resolution and suitable for printing, you probably do want to publish it as TIFF. If you have a collection of wallpaper images to use as a desktop background, you probably want to offer them as BMP. Having a TIFF or a BMP on your website isn’t a bad thing as long as it is downloadable. The performance problem starts when you use these image formats inside of an
<img src>or a CSS
background:style, because there are faster, better, and more efficient image formats you should be using.
You should only be using PNG, JPEG, and PNG images on production websites. All other image formats are either not supported by browsers, or are not optimized and efficient for use as images on a website. Remember, just because a filename has a
.gif extension does not mean its a PNG, JPEG, or PNG image! Review the images used by your website and 3rd party content to ensure you are using the proper image formats.
Want to see what performance problems your website has? Unsuitable Web Image (TIFF), Unsuitable Web Image (BMP), and Unsuitable Web Image (XBM) are just 3 of the nearly 400 performance issues Zoompf detects when testing your web applications. You can get a free performance scan of you website now and take a look at our Zoompf WPO product at Zoompf.com today!