Having developed my first web pages back when I was in college, over 10 years ago, it’s interesting to see how web design and development trends have evolved since that time. A lot of these trends, such as the advent of CSS, have been driven by practical needs of site maintainability and accessibility. Others have been driven by the desire for more dynamic forms of web publishing in the increasingly community-oriented internet. Still others have been driven by simple changes in aesthetic tastes which affect any design industry – whether it be designing clothes, cars, or websites. One commonly overlooked trend, though, which I will focus on in today’s article, is the increase in things like bandwidth and screen resolution since the days of old. In some ways, these advances have also transformed the web, yet in many ways modern design remains obstinately stuck in the past.
Years ago, the viability of your website was largely based on how fast it would download over a modem. Almost all users were on dial-up, so webpage load times were often measured in seconds or tens of seconds. It was imperative that graphics and image filesizes on websites be kept to a minimum to avoid losing visitors to the back button. Consequently, GIFs and highly-compressed JPGs were the image standards of choice, owing to their compact file sizes.
GIFs, of course, have the main drawback of only being able to display 256 colors at a time. JPEGs, while having full 24-bit color, suffer from ugly artifacting at high compression ratios, which is usually most noticeable on images with distinct edges and colors. Hence GIFs became more or less the de-facto standard for things with distinct edges and colors, like company logos, whereas JPEGs were used primarily for photos, gradients, and the like.
The alternative to GIFs and JPGs, of course, is PNG files. PNG is a lossless image format introduced roundabout 1997, but unlike GIF, PNG images support 24-bit color as well as 8-bit indexed color. PNGs also provide very good compression ratios – in fact an image saved as an 8-bit PNG will almost always be smaller than the same image saved as a GIF.
In spite of these advantages, though, PNGs remain relatively underutilized in modern web design. I still see many websites using blurry and artifact-ridden JPGs for logos, backgrounds, and such. While this may have been an acceptable tradeoff 10 years ago, it’s hardly justifiable anymore, seeing as how less than 10% of the populace uses dialup nowadays.
This isn’t to say that highly-compressed JPGs don’t have their place in web design – I think they do and will for some time to come. Photographs, for example, are one area where PNGs can’t compete with JPGs. It’s possible to create a highly-compressed JPG of a photograph, that, for the average viewer, will look just as good as the lossless PNG equivalent – this is due to the fact that the compression artifacts are largely lost in the overall nuances of the photograph.