Posting Images to your Website

In this lesson, we will learn about posting images to your website using formatting and attributes. This is a very powerful concept and becomes so especially when you combine CSS styling. We will cover CSS concepts in later chapters but we will see graphic formatting and attributes without CSS in this chapter.

In the last tutorial, you got a taste of how images work. Now we'll really dig into it.

Types of Images

HTML can handle two image types: Jpegs and GIFs. These two formats are very different and should be used for different purposes.

GIFs are used when you need a flat type of image, like a cartoon or an icon. GIFs are limited to 256 colors. The color palette is defined in the GIF file itself, so it's not the same 256 colors every time, and each pixel on a GIF image is defined with one fixed color. These files tend to be very small, relatively speaking, but they also aren't of photographic quality.

You may also find animated GIFs. These are GIF images that are slightly different, and are put together so that each individual picture frame displays sequentially fast enough that they seem to be moving. Most animated GIFs you see online have no more than about 16 frames, so they're not complex and, again, the files are not large. If you want to experiment with animated GIFs, download a free program like Easy Gif Animator, or just search online for "free animated gifs". In HTML, animated GIFs are treated just like static GIFs.

The other image type is a jpeg, which has the extension .jpg. A jpeg has more than 1.1 million colors, and they are not defined as with a GIF; instead, the jpeg file uses an ingenious algorhythm to define each pixel with a relative color to the pixels next to it. This does two things: it allows the jpeg file to display photographic-quality images without sacrificing much quality, and it makes a jpeg remarkably bad for displaying sharp lines; they always wind up fuzzy. I have seen animated Jpegs, but they are never very good. If you need an animated image with Jpeg quality, you'll need to investigate using Mpegs, which are video files and treated differently from ordinary image files.

Sizes of Image Files

When you're taking pictures at home, you don't have to worry about how much space on your hard drive that picture is going to take up. Online, it's a different story.

When you have an account with a host, you generally have a limited amount of download bandwidth in your account. This does not refer to downloads like music or actual files; rather, each time a page is accessed by a viewer, every file that displays in it is considered to have downloaded. This means if you have a photo album page with fifty full-size pictures on it, your download size is equal to the total of all the picture sizes plus the size of the HTML file. If each picture is about 1 mb - a reasonable size for a good jpeg - that means a download of your page is equal to 50 mb. It will only take 20 full-load page views to reach one gigabyte of bandwidth.

Obviously, this is a bad idea. So instead of posting entire pictures on an album page, you'll want to post thumbnails. And you want to be sensitive to the size of images on your website. Keep them small for better loads.

Copyright Issues

Lots of people pull pictures off the Internet and run them on their personal or business blogs without the permission of the creator. This is of dubious legality even on personal blogs, and is outright illegal on business blogs. In the worst case, your host can suspend your account. It's more likely that the host will warn you to take down illegal content once the owner of the picture contacts them.

This does not mean you have to create all your own images. Rather, there are dozens of places you can get images that the owners have made freely available. Any image on Wikipedia, for instance, is licensed under a Creative Commons license as a freely-usable image. If you own a copy of Microsoft Office, Microsoft has a very extensive online graphics collection free for you to use.

For more free images, just search Google for "free images". Sites like Stock Exchange, Flickr, and MorgueFile are good places to start. Just read all the fine print; not every picture is free in every case.

New Attributes For Your Images

hspace - used to set up a white space cushion around your picture. You set it for a number of pixels, and nothing is placed horizontally within that distance of your image. For example, hspace="10".

vspace - exactly like hspace, only with vertical space.

align - Used with images that are placed next to text, align gives you the option of having your image appear at the top, middle, or bottom of the text. For example, align="middle".

This lesson on posting images to your website expands on your knowledge of graphic links by touching upon formatting and attributes. Hope you have enjoyed it!