New facts and figures about image format use on websites
JPG, PNG and GIF are the three image formats that websites use for their images. We decided to find out exactly how common each format is, and how large the images of each format tend to be. After analyzing more than 23 million images, we have found some very interesting results.
To be able to perform this analysis properly we needed a large sample base, and fortunately we have one. We have gone through more than half a million saved tests from the Pingdom Full Page Test (it’s a free tool for analyzing content and load times of Web pages). The tested pages together contain the 23+ million images that were the basis of this survey.
We will answer the following questions:
- How common are the different image formats?
- How much do images contribute to page size?
- How large are the images of the different formats?
(When we refer to “images on the Web” in this article, we are refering to the image usage on websites.)
First a few quick observation and conclusions…
Interesting observations
We will dive deeper into the facts further down, but these are some observations that we have picked out from the information gathered in this article.
- GIF images are the most common, making up 54.7% of all images on the Web.
- PNG images are the least common, making up only 14.4% of all images.
- JPG images contribute the most to page size, even though they make up less than one third of the images.
- Average image size per format: JPG: 11.8 KB, PNG: 4.4 KB, GIF: 2.4 KB.
- There are 42.8 images per Web page on average.
- Images contribute to 61.3% of the download size of a Web page on average.
- There is an average of 240 KB of images on each web page.
This was just brief summary. Read on to get to the details.
GIF by far the most common format
Since we have used such a large sample base, the numbers in this survey are very close approximations of the overall use of images on the entire Web.
For the images on the Web, this is how common the various formats are:
- JPG: 30.9%
- PNG: 14.4%
- GIF: 54.7%
Note how GIF holds a larger share than the other two formats combined.
We have to admit that at first we were a bit surprised by the results. We expected PNG images to be more common than this.
However, when thinking about it, GIFs are frequently used for design elements and icons, which result in many (and small) images. The intended transition from GIF to PNG obviously still has some way to go.
Image contribution to page size
This survey found that a Web page will have, on average, 42.8 images. These images will constitute 61.3% of the download size of the Web page. This last number is consistent with a survey about the load size of the top 100 blogs that we did a few weeks ago (which amazingly enough landed on this exact number for images’ contribution to page size).
But even though more than half of the images are GIF images (on average), JPG files contribute much more to the total download size. They are fewer, but significantly larger on average.
This is how much the different formats make up of the size of the images (size in bytes, not dimensions) on a Web page:
- JPG: 65.0%
- PNG: 11.3%
- GIF: 23.7%
GIF image usage on the Web
- Average number of GIF images per Web page: 23.4
- Average size of a GIF image: 2.4 KB
- 89.6% of the GIF images are smaller than 10 KB.
- 93.6% of the GIF images are smaller than 100 KB.
JPG image usage on the Web
- Average number of JPG images per Web page: 13.2
- Average size: 11.8 KB
- 60.7% are smaller than 10 KB.
- 91.1% are smaller than 100 KB.
PNG image usage on the Web
- Average number of PNG images per Web page: 6.2
- Average size of a PNG image: 4.4 KB
- 85.9% of the PNG images are smaller than 10 KB.
- 92.4% of the PNG images are smaller than 100 KB.
Conclusion
It is always interesting to get the actual facts of a situation and being able to look at statistics from a large sample base like this. Though some of the results were expected, there were some surprises in there as well (at least for us!).
We can now say for sure what the overall situation for image use actually looks like on the Web. We hope you found this report interesting.
If you build websites, how do you use images when you build your sites? What do you use the different image formats for? Do you still use GIFs? Do you shun PNGs for some reason? HOW do you use these different formats?
We’re very interested in hearing your perspective(s) on this, so please don’t hesitate to comment.
Did you like this post?
- Share it and vote
- Get our RSS feed
- Leave a comment (19 Comments)
Google’s 
We have exciting news to share. As you may have noticed, we made some changes to the 
Operating systems on supercomputers used to be custom-made affairs, but this has changed. These days, Linux has become a popular choice for supercomputers. But how popular? You may be surprised.
Mozilla 
This week Google launched a new Web community on 
Microsoft has been drumming up its marketing for Internet Explorer 8 lately, with some interesting results. That marketers can be a bit, shall we say… “creative”… when touting a product is well known, but the question is if Microsoft’s marketing team hasn’t taken it a bit too far with their “Get the Facts” campaign, especially when they start comparing IE8 to other web browsers.
Brian
December 8th, 2008 at 10:17 am
“which amazingly enough landed on this exact number for images’ contribution to page size”
Not really that surprising.
http://en.wikipedia.org/wiki/Sample_size
njharman
December 8th, 2008 at 11:55 am
You should break out 0 sized gifs from the results. I bet zero sized gifs are a large proportion of all gifs.
Keith
December 8th, 2008 at 12:06 pm
I’d be curious to see how this breaks down by image size. What would the numbers be if you ignored all images smaller than say 16×16 (including those obsolete but still ubiquitous 1×1 spacer images).
jerry
December 8th, 2008 at 1:49 pm
I second Keith’s suggestion, except you should not ignore small images, just break them out so we can see whether GIFs are really the most popular, or just the most popular for IE hacks, simple widgets, and list-style-images.
Also, do you have any thoughts on your sample bias, given your corpus of “sites that have been run through our tool”?
Urp
December 8th, 2008 at 2:11 pm
What isn’t surprising is that there are plenty of issues due to ie6 with png…the workarounds just aren’t worth it in most cases because they can be avoided with proper image positioning and transparency matting for small images (most notably icons).
Jalaj
December 9th, 2008 at 3:44 am
Analysis on “Google Images” show results as below
JPG - 49.88%
GIF - 39.24%
PNG - 10.88%
The results obtained this way are not as elaborate as yours, though.
(The above results were obtained by searching for filetype:jpg filetype:gif filetype:png respectively from the three filetypes)
Pingdom
December 9th, 2008 at 5:40 am
Thanks everyone for the comments so far.
@ njharman, Keith and jerry: That’s a good point (separating “spacer” GIF images), and it would have been interesting, but unfortunately the data we have doesn’t include the dimensions of the images, only the size in bytes. For this survey, we decided to only use data we already had stored.
To get the dimensions of the images in the test, we would have had to download the 23 million images again, which, as you can imagine, would be a bit too much for a survey of this scope (for one thing, we would have had to re-download 124 GB of image data). I guess we could do a rough approximation based on file size, though, but exact image dimensions would be a bit difficult.
Perhaps this is functionality we can add to the Full Page Test tool in the future, since as you point out, it would be interesting data to have (other statistics regarding image dimensions would also be interesting, I believe). Good suggestions!
Pingdom
December 9th, 2008 at 5:44 am
@Jerry: Regarding: “Also, do you have any thoughts on your sample bias, given your corpus of “sites that have been run through our tool”?”
All kinds of websites are tested with this tool, so it should be a representative sample base (or corpus, as you so eloquently put it
). If there is a bias in any one direction, it’s not one that we can see. Did you have anything specific in mind?
Pingdom
December 9th, 2008 at 6:01 am
@Jalaj,
Interesting approach. We just did the same thing on Google Images and got a slightly different result:
JPG: 49.9%
PNG: 12.0%
GIF: 38.1%
The problem is that we really have no idea how accurate the approximation is that Google presents (regarding how many images are indexed). But it’s interesting nonetheless, and we can imagine that Google does not index tiny GIF images for this. If that’s the case, you could do an approximation (IF using Google Images gives an accurate result) of how many GIF images are “spacer” images.
Ji
December 13th, 2008 at 7:47 am
To the missing dimensions: sufficiently representative sample is surely much smaller than the whole data pack analyzed. So to get the proportion or percentage of the “dummy” gifs there is no need to load all the data again. Statistics.