Images |
||||||||||||||||||||||
|
It is beyond the scope of this section to explain the ins and outs of any specific graphics software; it will be up to you to hone your skill in Photoshop or Paint Shop Pro or whatever software you like to use or want to learn. Instead, this section is meant to offer some general guidelines for image creation and their use on the web. ••• size does matter There was a time when the recommended file size for web pages, including the images used within, was no larger than 30K. This limited size took into account the slow, slow, slow speeds of dial-up modems (do you remember dial-up modems?). Loading a page with lots of large graphics across a dial-up connection could take what seemed like forever! With the advent and proliferation of cable modems and DSL (digital subscriber lines), this restriction on file size is not as stringent. It’s still a good idea, however, to keep your web images as small as possible (we’re talking file size here, not necessarily dimension). Today’s versions of image-creation software often have built-in tools to reduce file size and optimize those images for the web. Try to limit the number of images on your page, too. And no matter what you do, don’t resize images in your HTML document. It is possible to force the browser to display an image measuring 400 x 400 pixels at 100 x 100 pixels simply by entering those smaller numbers in the width and height values associated with it. You may think that by doing this you’re creating a smaller file, but you’re not! You still have the same gigantic file, just squished into a smaller box in your document. If a smaller image is required, reduce the image in your graphics software and then reload it into your page.
••• simpler is better Your web images should be clean and not “fussy.” Limit the number of colors used in a particular image and try to stay away from too many drop shadows and fancy filters. Just because your graphics software lets you apply to your image a Gaussian blur, a neon glow, accented edges, and a mosaic tile doesn’t mean you should use ALL of them at the same time! ••• .gif vs. .jpg As a general rule, flat-color graphics (logos, buttons, icons, and the like) should be saved as .gif files. Photographs should be saved as .jpg files.
As with most rules, this one, too, can be broken. The graphic at the top of this page was created in Photoshop and saved as a .jpg file. If I had created the image without the drop shadows and other text effects, I could have saved it as a considerably smaller .gif file (a small version of the title graphic as a .gif file appears below). I was willing to take a chance with the larger file size, however, because I liked how the .jpg file looked.
You will notice that the image above has a dark green background at the top and a white background at the bottom. I created the image this way to ensure that it would blend into the background of my web page. Again, I can’t begin to explain how to do this in your particular software; just suffice it to say that you should consider the background on which your image will sit. If you know your image will appear against a purple background in your HTML file, make the background of your image purple also. Remember the web-safe color palette!
••• adding images to your HTML document The basic code for including images in your web page looks like this:
If you place all your images in an /images/ folder, the code would look like this: If you want an image also to be a link, the code looks like this:
••• stealing images If you clicked on the link above to go to Good-Tutorials.com, you noticed that I “stole” the logo from their site. For the purposes of this website, I can’t imagine that they would mind that I did that because I’m sending users to their site, increasing their traffic and their bottom line. It’s perfectly easy to abscond with images from the web (right click on the image, save picture as), but it’s not a good idea to do this willy-nilly. People have spent time and money creating their images, and most of these images are copyrighted. Some people (and especially big corporations) can get pretty ticked off if you steal from them! As an alternative to the web version of the five-finger discount, look for the gobs and gobs of free clip art available on the web. Go to a search engine (such as google.com) and look for “free clip art.” (On a recent search, I found 82 pages of links!) | ||||||||||||||||||||||
| ||||||||||||||||||||||
| ||||||||||||||||||||||
| ||||||||||||||||||||||
» images |