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.

facebook didn't desupport IE6 until 2010! (and even IE7 never truly had full CSS support) — Affe, Oct 07 '21 at 16:22
@Affe That rather depends what you mean by "full" - CSS has always been one of the fastest-changing standards in the web platform, so browsers are constantly "running to catch up", and prioritising which features to actually implement. It's arguably the other way around: only after IE7 did browser makers work together closely enough to define what "full support" might mean. — IMSoP, Oct 07 '21 at 16:35
Ok, "in the transitional era from around 2006-2015 the major browsers disagreed so much on some of the finer points of the CSS spec that doing some of things with CSS that we take for granted today required heavily customizing the site for each browser" :) — Affe, Oct 07 '21 at 17:58
Ahh.. It's nice to come across questions like this, a reminder that there are fresh-to-dev, non cynical people out there who genuinely don't know just how bad things were in the bad old days.. I wonder what aspects of modern web development you'll come to lament/rejoice the passing of in 15 years' time! — Caius Jard, Oct 07 '21 at 18:09
We seem to have different ideas of what ‘old’ means! As far as I'm concerned, old web sites used few or no images, because they took ages to download over dial-up (and often some time for the poor 16-bit machine to decode and display). Less old web sites used many images… — gidds, Oct 08 '21 at 07:46
I was thinking "Because they didn't care much about accessibility" and then realised how many newer ones seem to care equally little - now choosing to hide their content behind JavaScript or private-use character etc. :-( — Toby Speight, Oct 08 '21 at 08:21
BTW, the first webpage ever published is still online. It contains no images. — dan04, Oct 08 '21 at 14:52
@CaiusJard Or what aspects of the web die and get resurrected. So many people talk about animated GIFs or hashtags as if they were recent developments. Heck, even current trends in cloud computing are more or less just a push back to the mainframe/terminal era. — bta, Oct 08 '21 at 23:49
I've often mused on this cycle; back then you had one massive computer in a room somewhere in the university and a load of dumb terminals that sent user input back and forth to it and it did all the calcs, then desktop machines got powerful and ran the apps and did the calcs, then the web was a thing and dumb browsers sent all the data back and forth to the server to do the calcs, then browsers got really powerful and became like an operating system and ran single page applications that did the calcs (flip, flop, flip, flop.. I'm sure we're not done yet!) — Caius Jard, Oct 09 '21 at 04:43

score 63 · Accepted Answer · edited Oct 07 '21 at 06:52

63

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.

edited Oct 07 '21 at 06:52

greenforest

8,786
5
37
55

answered Oct 06 '21 at 18:30

Izquierdo

12,681
3
23
61

Wow! Thank you for such a great answer! Learned some more things today :) – jj15 Oct 06 '21 at 18:42
56

The 'good' old days of "rounded_corner_top_right.gif"... – Duroth Oct 07 '21 at 07:06
41

Don't forget spacer-10px.gif :) – Izquierdo Oct 07 '21 at 13:34
8

I seem to remember that even when CSS was there, it wasn't possible at first to style form elements such as buttons and checkboxes. So those were sometimes replaced with images – Berend Oct 07 '21 at 14:37
22

You'll still see this pattern in emails, since CSS support varies widely between email clients. That variance means that the best way to ensure emails (especially for marketing) look good and consistent is to use an image (or table of images) that can be expected to look the same no matter where you're viewing it. – Jonathon Richardson Oct 07 '21 at 15:59
14

I think the point of "marketing agencies acted as if they were designing print materials" is vastly understated. People didn't really get the internet for a long time, and so they stuck to what they knew how to do. – MechMK1 Oct 07 '21 at 19:24
1

@JonathonRichardson Actually, the opposite is true, to a certain degree. The key really is to embed CSS. You can't rely on remotely loaded images (but those can be attached) or CSS or fonts, because many clients will (properly) not load any remote content without permission. Doing email so that it looks consistently good across clients (from AOL to Thunderbird to Outlook to Gmail etc.) is not an easy task. Web sites are trivial by comparison. – manassehkatz-Moving 2 Codidact Oct 07 '21 at 20:01
1

@MechMK1 Indeed. They saw the point of the Internet as simply another way to get their existing printed material in front of people. Companies that had gone to lots of trouble to produce shiny brochures and fliers that perfectly embodied their corporate image wanted to reuse that effort and replicate them on screen as exactly as possible. (Assuming that everyone used IE with the same screen size and resolution, on a fast connection — and, more importantly, wanted to spend expensive online time downloading an exact, dumb replica…) – gidds Oct 08 '21 at 07:56
@MechMK1 or, rather not "get"ting the internet, it's more that it's a heck of a lot safer (esp. financially) to stick with something that's tried and tested, leaving the innovation to others – user Oct 08 '21 at 09:44
@user Undoubtedly true. Whenever a new tech hits, in the very early days it will emulate its predecessor to some degree. – MechMK1 Oct 08 '21 at 10:16
2

Even after table support was widely available, we didn't yet have "web-safe fonts" or the ability to embed a font file in a web page. Thus, if someone wanted their web page headings to have a fancy typeface, images were the only reliable and portable option available. Those who cared about accessibility added an alt tag, but many didn't. – Heinzi Oct 08 '21 at 11:23
1

they didn't even support tables Tables were the earliest method of page layout. I was using them extensively in the web site I worked on in the early 90's. – Barmar Oct 08 '21 at 15:08
1

I started doing static websites around 94, and got a couple of clients from the Thomas Register, which was a B2B yellow pages kind of directory. The guy that I would do work for owned a small advertising company which did printed brochures. He would always wanted certain elements to be "above the fold", and in the web, to him that meant without scrolling down. Took him a long time to grasp the fact that people have different resolutions, and for one guy something which was above the fold required scrolling for another guy. I just learned to make it above the fold for HIM and he was happy. – LarryBud Oct 08 '21 at 15:15
2

Reminds me of the blink tag – rtaft Oct 08 '21 at 17:06
...and, of course, the tag – Mike Devenney Oct 08 '21 at 19:51
Who doesn't like a good blinking, scrolling message? – Izquierdo Oct 08 '21 at 20:07
So long as that blinking, scrolling message is in either comic sans or jester. – Ty Hayes Oct 08 '21 at 22:36
"Websites were usually designed by slicing a mockup into different pieces and hyperlinking the pieces to different places" <-- this was only if you were doing bad things. Good sites were just using the standard HTML elements semantically and not trying to control what it looked like. – R.. GitHub STOP HELPING ICE Oct 09 '21 at 16:14

score 9 · Answer 2 · answered Oct 07 '21 at 17:06

9

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.

answered Oct 07 '21 at 17:06

manassehkatz-Moving 2 Codidact

2,033
8
15

1

ah, but OP doesn't mention icons at all. and icons (even svg icons) are still images regardless... – user Oct 08 '21 at 09:45
1

OP does say "UI elements", "buttons", "menus" - to me those are the kinds of things that Font Awesome and now SVG Icons have replaced. The difference with SVG Icons (or similar) and the old "everything is a clickable image" method is that the SVG code is (a) embedded code rather than a separate file (a separate file, even if the total size is the same as embedded, requires an extra round-trip to a server) and (b) scalable (as are fonts, but not ordinary jpg/png/gif images). – manassehkatz-Moving 2 Codidact Oct 08 '21 at 12:14
1

@user don’t awesome (as the name implies) very much blurs the definition between image and text. Plus Highcharts (for example) use SVG elements to display the interactive charts. But I probably wouldn’t call the chart an “image”! – Tim Oct 08 '21 at 13:28
@manassehkatz-Moving2Codidact not too sure about svgs replacing buttons and menus though... and while "ui elements" obviously includes images, i'd argue that the vast majority (borders & layout elements) are in fact not images – user Oct 08 '21 at 16:58
@Tim sure but that is... completely beside the point of the question. and while technically they're images, i'm half sure it's more from convenience more than anything - two potential upsides being consistent sizing and the ability to have them in css content: properties, rather than, well, "lmao let's use fonts instead of images because why not" - note that even SE itself used spritesheets until (i believe) very recently – user Oct 08 '21 at 17:00
I think it's pretty obvious that by "images" the OP meant images as HTML elements, placed on the page with an tag. – barbecue Oct 09 '21 at 16:50

score 6 · Answer 3 · answered Oct 08 '21 at 09:51

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.

and for some reason, at a time when rounded corners and gradients were hard to make without hacky top-left-corner.gif solutions, they were all the rage in user interface designs. And by the time CSS was capable of doing it easily, we were making completely flat rectangular interfaces. — user46053, Oct 08 '21 at 16:27
@user46053 Completely flat rectangular interfaces that are actually harder to use than the interfaces they replaced because they lose "depth", contrast, etc. — manassehkatz-Moving 2 Codidact, Oct 08 '21 at 17:18
@user46053 It's less paradoxical then it seems at first glance - it was a technological show-off to a large extent. When it became easy to make things like gradients and rounded corners, it was no longer "cutting edge design", and people started looking for other ways to look distinct. The return to high-contrast edges and little frill was refreshing - though of course, you always found plenty of designers who just didn't get how it's supposed to be done and we got back to things like "I have no idea which of these is a button/link". Ultimately, it's about finding a language. — Luaan, Oct 10 '21 at 11:38

score 5 · Answer 4 · answered Oct 09 '21 at 03:54

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.

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

4 Answers4