Why did old websites make use of so many images as UI elements?

Question

I've wondered this for a little while:

Why did old websites make use of so many images as UI elements? If you use the Wayback Machine to go back to some of the most popular websites in the past, you'll see that a lot of the UI elements were mostly images: buttons, headers, navigation menus, certain headings with custom fonts, etc.

Was it just easier to use images as UI elements back then instead of making them in CSS? Was CSS not as advanced or something back then? I'm a beginner developer hoping to do Full-stack development, so I'm not that knowledgeable with the history of web design, and couldn't really find anything online to help answer my weird question.

Answer 1

Was CSS not as advanced or something back then?

This is the reason. When websites first became available, there was no CSS, and they didn't even support tables! Websites were usually designed by slicing a mockup into different pieces and hyperlinking the pieces to different places (or using one big image and an imagemap.) Remember, this was at a time when people used dial-up modems, and images took a long time to load! Sometimes one-bit placeholder images showed up while the full-color version came over the modem.

Incidentally - a lot of old websites look like image-heavy print materials/brochures, because they were developed by marketing agencies, and printed materials were the prevailing mental model for marketing information back then.

Then, tables were introduced (as well as frames), and gave designers and developers the flexibility to add non-image items to different areas of a webpage. The world needed standards, though, and different groups like the World Wide Web Consortium made official recommendations that brought us the model that breaks styling attributes (CSS) away from hypertext. (I'm old enough to remember <font> tags, and using bgcolor attributes in table cells to color the left nav of a page.)

So, the short answer is: there was a time before CSS, and then it took a few years to convince web professionals to fully adopt CSS, and that's why old websites are so heavily image-based.

Answer 2

Specifically for UI elements - arrows, buttons, etc. - there is another factor. Font Awesome (2012), SVG (as late as 2011, depending on browser) icons (which appear to be what StackExchange currently uses) and other ways of generating high-quality icons without using image files simply did not exist. I found a fairly good explanation of the evolution here.

Answer 3

As others have said, early versions of HTML and CSS were much more limited that what you are used today.

Consider, just taking into account Internet Explorer, which was predominant or at least a major player at the time (remember that Chrome only appeared in 2008, and only reached the 10% threshold in 2010):

• border-radius used for rounded corners were introduced in IE9 (released 2011).

• gradients were introduced in IE10 (2012)

• SVG support was introduced in IE9.

So just to make a button with rounded corners, you needed to use an image!

Also remember that at the time, upgrades were a lot slower than they are now. When a new version of IE was released, you could still have waaaaay earlier versions representing a significant share of the traffic for many years: IE8 alone was still at over 10% in April 2013 (not counting earlier versions).

And that's not even taking into account the fact that, even when they all supported a feature, each browser had its own quirks (they still do, but not so much on the more basic HTML/CSS features). It was sometimes easier to drop an image which would work anywhere that to try to adjust CSSS to make it work in all browsers.

At the time, there was also less the issue of high-resolution displays (Retina and the like). Having an UI elements as an image didn't raise issue with pixelated text or buttons, one CSS pixel was nearly always one actual screen pixel.

Using images for UI elements was so ubiquitous that some techniques were developed especially for that (to reduce loading time), like sprites (having all the elements on a single image, and "cutting" pieces of that image using CSS for individual UI elements.

Note that nowadays, we still face similar issues with e-mail. HTML/CSS support in e-mail clients is often a lot more limited, and you often need to use creative alternative techniques to get a decent result. However in that case images are no longer a viable choice, as many e-mail readers block external image loading for privacy reasons, and embedded images raise other issues.

Answer 4

In addition to the other excellent answers here, don't forget that the early years of the Internet were plagued with great browser wars. Standards like HTML and CSS existed, but "standard" didn't mean what it means now. Browsers back then were products sold in a store, like any other piece of software. They differentiated themselves by the proprietary features that they supported or by the unique way they handled standard web elements. Companies like Microsoft participated in web standards committees not to ensure the interoperability of the web, but to steer competitors away from anything resembling their proprietary features. Many of these companies were notorious for getting features included in standards and then never supporting them. Also, many aspects of these early standards were unfortunately written in ways that could be interpreted multiple ways. That meant that in the rare instance that different browsers were trying to act consistently, there was still plenty of room for incompatibility.

On top of this, software at that time was generally bought in a store, not distributed electronically. Software updates were rare, you just had to buy the next year's release. Running software that was 4-5 years old was relatively normal. That meant the target audience for a website could be running any one of 3-4 different browsers, and each of those browsers could have 5-6 different versions in use. All of these browser/version combinations had meaningful differences that you had to adjust for. Making it worse was the corporate world's reliance on Internet Explorer. Many of Microsoft's big clients would complain loudly any time they broke existing intranet sites, even if those sites used horrendously out of date technology. Internet Explorer was therefore perpetually shackled to many of the limitations and mistakes of its earliest releases, and new technologies took a very long time to be supported.

A rule of thumb at the time was that if you spent X hours building a website, it would take you at least 5X hours to fix the compatibility issues with all the various browsers (half of that time being just for Internet Explorer). In order to stay sane, web developers would try to stick to a limited subset of web technologies that were widely supported and stable. Images provided an easy way to avoid many of these problems. Image file formats were well-established, widely-supported standards, so they looked the same practically everywhere. You didn't have to worry about Mac and PC users having completely different fonts installed, or about different OSes using different height/width ratios for native button widgets. You could prototype the UI in photoshop, chop it up into rectangles, and write HTML to assemble those rectangles in the right order.

I don't ever remember developers thinking that any of this was a good design choice, though. It was done more out of necessity. Eventually, the market for browsers as a sellable product fell apart. Free software took its place, and developers started to have more of a say about how the web works than corporate interests did. The focus shifted more towards interoperability and developer sanity, and thus the modern ecosystem is in a much better place.