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 liability of your website was heavily 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, due 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 nowdays.
This is not to say that highly-compressed JPGs do not 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 not 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.
One area that I think highly-compressed JPGs are especially useful is with resizable imagery on a website. It's possible to deliver a very large image – say, thousands of pixels across – and have it sized automatically on the page using CSS. This technique can even be used to create faux-backgrounds which which resize automatically to cover the entire viewing area of the browser. When techniques like this are used together with em-sized text and dimensions, this can deliver a very consistent end-user experience regardless of screen resolution. Unfortunately I see very few web designers making use of these sort of techniques. Consequently, you see a lot of websites that look very small on high resolution screens and very large on low resolution screens. You also see a lot of websites that do not resize text and page elements correctly. I think this is going to become increasingly unacceptable in the future as user screen resolutions become more and more divergent with the proliferation of mobile devices on one end and large megapixel flat screen displays on the other end.
In conclusion, most users have the bandwidth nowadays for us as web designers to deliver a better web experience. Blurry JPGs are not acceptable anymore, and should never be seen anywhere. Widespread usage of PNGs, large resizable JPGs, and 'ems' in stylesheets are effective ways to achieve more professional and consistent looking results across screen resolutions, and I can only hope that more people will use such techniques in the years to come.