Putting pictures on your web pages

Date: Wed Nov 14 2007
There are two ways images are used on web sites. Or maybe it's three ways. The first way is for "ambiance", such as background images or images used to create drop-shadow effects around borders. The second are logos and other "branding" elements. The last are cases where a picture is a primary element on a web page.

To HTML and the web browser, it doesn't matter what the purpose for a specific image is. It is included in the web page using the same method.

In WYSIWYG web editor there will be a button in the toolbar for adding images. You click on the button, and then follow the prompts in the wizard that comes up.

The HTML code uses the IMG tag like so:

   <img src="URL">

Which can look something like this:

The image is not contained within the HTML file, but is located somewhere on the Internet. It's the URL which says where the image is located.

The URL can be relative such as: <img src="logo.gif">

A relative URL requires the image file to be located in the same place as the HTML file is located. Using relative URL's lets you copy the files from place to place without having to recode the URL's. For example relative URL's allow you to preview the web site on your local disk before uploading to your server.

Or the image URL can be absolute, referring to any image on any web server.

Modifying images for fun effects

Images don't have to be photographs.

This is a goofy bit of painting using Adobe's Photoshop. The background is done using the "Clouds" filter which generates the vaguely cloud-like background, but that the color can be any color (it isn't restrcted to a blue sky). The splotches of color are painted using various brushes, and you can see some of the effects.

Photoshop and other graphics tools are capable of fabulous results, of course.

For example

Is the same buffalo image, but with a strange tweak. Wait, the buffalo is grey rather than shades of tan, brown and black. What's going on?

Simple, the desaturate filter in Photoshop. The what? And how is it only the buffalo was affected?

First things first, how to limit the effect to the buffalo. Most (all?) image editing applications let you select portions of a picture, and then make effects that only happen to the selected portion. I simply used the "magic wand" in Photoshop to select just the buffalo. From then on, with just the buffalo selected, whatever I did next applied just to it.

The next step, desaturation. Photoshop, and most other image editing applications, have what they call "filters". Each filter does some sort of magic processing on the image (or on the selection). One of those filters is called "desaturate" because it takes all the color out of an image, leaving a grey-scale (a.k.a. "black and white") version. Think of those artistic pictures which are "black and white" (grey-scale) except for a rose that's bright red. It's Photoshop's desaturate filter that let those pictures be made.

Same buffalo (turned gray), same picture, but put in the spin dry cycle. Sort of. This time the selection was made to affect everything but the buffalo. The filter chosen is called "Radial Blur" which blurs the image in a circular (in other words, "radial") manner. Poor guy.

Painting applications like photoshop have a dizzying array of effects you can apply. They all aren't so literally dizzying as this one. They tend to take awhile to learn all the nuances, but once you do they are capable of great feats of creativity.