You can't create web pages without knowing
how to create web graphics! They just go
hand in hand. But it doesn't have to be
rocket science either. Sometimes all
you want is to place an image on a
page. Well, that part is easy, however,
making sure it is web friendly takes just a
little more consideration.

Types of Images

There are three types of images that can be displayed on the web.

  • JPG - Great for photographs. No animation. No transparency. It will eventually lose detail as it is copied and the copy is copied, etc. because it is a lossy format.
  • GIF - Great for logos, artwork, flat graphics, simple animations. Can have transparency. The areas that are transparent are determined by a single color you choose while editing the image and saving it.
  • PNG - Also great for logos, artwork, graphics, etc. No animation. Can do subtle overall transparency. The amount of transparency is chosen while editing the image and saving it.

Size of Images

I can't emphasis enough that, if the image on the page is to be displayed at 320 x 240, then the original needs to be 320 x 240!! Many people go out and take digital photographs, upload them to their computer and insert them into their web pages, not realizing they are loading an image that is far larger that what is being displayed. The problem with this is, even though it displays only 320 x 240, it is really loading a 1280 x 960 image into memory. Eeek!! That can really slow down the time a page takes to load. So size it down!  Please!!!  If you don't have a graphics software package, there are web sites that will resize it for you at no charge.

What to Use

There are three popular graphics packages that allow you to do pretty much anything. Of course, a learning curve comes with that.

  • Photoshop - The software of the professionals. Also takes a nice bite out of the wallet.
  • Paint Shop Pro - Catching up quickly with Photoshop and still a good price.
  • Gimp - Quite good and free!

If you just want to resize, brighten, etc. simple stuff where you don't need a full-blown graphics package, check these out:

  • Pixer.us - Upload your photo, chose what you want to do (resize, crop, rotate, flip), save it, and download it. I've used this one. Oh so easy! And FREE!
  • Phixr.com - Another free online editor! Can set up an account if you wish.