|
Getting your Trinity Audio player ready...
|
Images are one of the heaviest elements on a website and almost always one of the slowest items to load. Luckily, we have lots of options when it comes to image types – but which one is best for the web? And, on top of that, what variation of individual image types will leave you with good loading times? I’m going to go through some of the most popular and common image types and we’ll see which one will give you the best speed and quality. For all of these tests I’ll be using a banner (slider) image from a mockup since that’s generally the biggest image we use on websites these days. These will all be saved in Photoshop (CS3) and saved using Save for Web and Devices where possible. The original PSD file is 1.44MB. The first part of this is simply going to involve the images themselves – go through them and take a really close look at the pixelation that occurs on some of the examples. The skies are the easiest places to pick out a loss in quality. After that, we’ll go through the file sizes themselves.
JPEG
Jpeg (or jpg) is one of the most common image types on the Internet. While it’s not as flexible as a PNG (no transparent backgrounds) it degrades more gracefully as you get into older browsers. JPEG are thought to have the biggest middle ground in image quality – the don’t use the preferred lossless compression method, but they also have relatively reasonable file sizes compared to some of the other image types.
100% 
75% 
50% 
25% 
PNG (with and without layers included)
PNGs are the second most common image type used on the Internet and are valued for being very flexible with transparencies and usage. They also save relatively high quality and crisply.
Layered 
Non-layered 
GIF
GIFs are almost always used as low-quality snippets of movies or animations that loop through. They can also be used as images, although it’s a terrible, terrible idea. As you can see below, the quality of GIFs are significantly worse than the quality of a similar PNG, JPEG, or TIF. (Dithering is a method of smoothing out the pixelation and difference in color hues)
Dithered 
Non-dithered 
TIF (using ZIP compression)
TIFs save a lot of information about the photo and use lossless compression which doesn’t leave the same artifacts that JPGs will that can affect the photo’s quality. However, the file sizes are enormous. In this case, the layered file size was 4X the Photoshop file size, and the PSD file was quite large as it is. The bigger problem than the file sizes is browser support – only Safari supports using TIFs as images.
Sizes
Now that you’ve seen the image quality compared side-by-side, let’s take a look at the relative image sizes and see if the trade off is worth it.
JPEG 100% – 437.7 kb
JPEG 75% – 199.6kb
JPEG 50% – 106kb
JPEG 25% – 63kb
PNG layered – 844.7 kb
PNG non-layered – 745.8 kb
GIF dithered – 252.5 kb
GIF non-dithered – 225 kb
TIF layered – 6.8 MB
TIF non-layered – 2.1 MB
Conclusion
To make it easier, let’s throw out GIFs and TIF due to their respective quality and size issues. When you boil it down to the PNGs and JPEGs it gets a little harder. The JPEG at 25% clearly has quality issues and the 50% is approaching the same issues with little relative savings. Perhaps the most interesting observation here is the logarithmic curve by which the quality relates to the file size. You can keep going lower and lower in quality, but with relatively little gain in file size at each incremental step. The PNGs have excellent quality and the flexibility is necessary in some cases, but the file sizes are clearly too large. We use PNGs thoroughly throughout the site due to the more dynamic backgrounds and the way that our foreground elements work with the backgrounds, but it results in loading times that are slightly less than desirable. In the end – JPEG 75% wins for me. It retains a quality that is indiscernable from the original in most cases while shaving almost 50% of the file size off of a 100% JPEG and 75% off a layered PNG. The Internet is about trade-offs in many cases and this one appears to be a rather win-win case for everyone. Also, check out Miles’ article on an upcoming image format from Google that shaves load times: ARE JPEG’S A THING OF THE PAST?