Web 101: Images on the Web

Now we know that the web is based on text, but images are what make the web a killer app. Imagine if you went to Amazon to buy something and only had a paragraph describing each item. Facebook is built on the idea that you see pictures of your friends. And Pinterest without images wouldn’t even exist. (They all rely on databases too. But that’s another post.)

How does your browser know where to get those images? It’s coded up in the text your browser got when it asked for the page, with a tag that looks something like <img src=”//upload.wikimedia.org/wikipedia/en/9/9d/Commons-logo-31px.png” width=”31″ height=”41″ /> This tag tells your browser that it should put an image at that spot, that it should ask for the file the website has at //upload.wikimedia.org/wikipedia/en/9/9d/Commons-logo-31px.png in order to show that image, and that it should show it pretty small (about 1/2″ by 1/2″ on my monitor). So your browser should show you this:

Modern browsers are pretty smart. They cache (store a temporary copy of) these files so they can use them again without downloading. When you download the next page at Wikipedia and your browser sees the same request for that file, instead of just asking Wikipedia for the file it says “only send this file if you’ve changed it since I last asked for it.” If the file was changed, Wikipedia sends the whole file. If not, Wikipedia sends a very small message saying the file wasn’t changed, and your browser shows the cached version of the picture.

Finally, we’ve come to some information you can use. These pictures get stored somewhere, and that somewhere is on your hard drive. There are a couple of times you might want to get rid of these files — just be aware that the price you will pay is longer times to load web pages and more data usage.

One of the times you might want to get rid of these files is if your hard drive is getting full. Not usually a problem on today’s desktop computers, but some laptops have criminally small hard drives, and just about all smart phones are cramped for space. How you get rid of the cache depends on your browser and whether or not you’re on a smart phone, but it’s a simple process and a quick Google search will give you lots of help.

The other time you might want to get rid of these files is if you don’t want someone else to see what you’ve been looking at, which is called “private browsing”. I’m not a fan of this for hiding things from your spouse or employer, but it’s a good technique if you’re using a public computer at the library or a hotel, for example, and don’t want the next person to know that you watched 27 cat videos in a row. In Chrome, go to the settings in the upper right and choose “incognito mode”; in Firefox go to Tools > Start Private Browsing. In Safari, go to Safari > Private Browsing. Your love of cat videos is now safe.


One thought on “Web 101: Images on the Web

  1. Hosting

    As a rule of thumb, images look great when they fill the width of the column they’re occupying. The ideal width for the main area of the page depends on how whether your page is set up with a sidebar, a vertical navigation menu, both or neither.


Leave a Reply

Your email address will not be published. Required fields are marked *