Materials Collection

Images

Images always spice up your website when you have groups of text and tables. In the following section, you'll read about the different kinds of file formats for images, how to put images on your pages, and quite possibly everything you need to know about images.

• Depending on the kind of image you want, you'll need to know the few kinds of file formats available for images. Each one has different features, suitable for certain kinds of images, whether it has a lot of color, or a few.

• Graphic Interchange Format (GIF)
GIF is a file format that uses a lossless compression. They are limited to 256 colors so they result in a specific numeric pattern. Colors are often replaced by a color close to it, for example, neon blue with sky blue. GIFs are suggested for line-drawn images, which are graphics that have few lines. They are also suggested for images with few, flat colors. These are graphics that have few colors, no light sources or gradations in one color. Here's an example of what you would save as a GIF.

• Joint Photographic Experts Group (JPEG/JPG)
JPEG is a file format that uses a lossy compression. They allow high quality compression while still having millions of colors. JPEGs are suggested for images with a lot of colors, graphics with gradient fills, and graphics with light sources. They are also suggested for greyscale images with subtle gradations and photographs that have a lot of gradation, like sunsets, skies, and oceans. Here's an example of what you would save as a JPEG.

• Portable Network Graphics (PNG)
PNG is a file format that uses a lossless compression as well. They have features such as indexed color, greyscale, and true-color image support. PNGs have from 1 to 16 bit depth per pixel. PNGS also have true color via 8-16 bits per sample, allowing for 24-48 bits per pixel. PNGS have an alpha channel for transparency. They have better interlacing which results in a faster display of the image. PNGs outperforms GIFs in the ability to store images with an alpha channel. This enables antialiasing-getting rid of jagged edges around fonts and images, and allow the creation of transparent images. Here is an example of what you would save as a PNG.

• Now that you know more about the types of images, optimizing those images come next. When left without optimizing, your images are pretty big, which increases the loading time of your site. Optimizing images allow faster download times while keeping the highest quality able to be produced. There are a range of optimization tools, from shareware to expensive. Adobe Systems makes graphic design products for professionals. Macromedia makes powerful Web production software. Corel makes products such as CorelDraw and PhotoPaint that have a range of tools towards graphics design. Jasc makes a very popular program called Paint Shop Pro that is low cost but still has powerful imaging properties. Ulead offers some compression and design products for Windows users. The GNU Image Manipulation Program (GIMP) is a popular source for graphic design and image manipulation.

• Now that we got all the preliminary stuff over with, let's get on to the fun part. Adding images to your web pages. You were introduced to the img element back in the linking tutorial, but this will help you understand it better. The image element (img) is an empty element therefore it does not require a closing tag. To put an image on your site just include the src attribute and the filename of the image. Here's an example below:

• You noticed how the filename doesn't have the http and the www part, right? Well, to link images that are not on your site, try this example. I do not suggest putting images on your site that are hosted upon other people's site because that racks up their bandwidth especially those who don't have unlimited bandwidth. If you really need to use a certain image from someone else's site, save it to your own server and upload it to your site's file manager. That way the src is way shorter and you're only racking up your own bandwidth and not someone else's. That doesn't sound quite nice, but hey, it's true.

• At some point you may decide to make a table layout with images, you might want those handy little yellow tags to pop up with the image's name just so that your site visitors know what the pictures are before they load, or if they fail to load at all. This requires the use of the alt attribute. See the example below:

Hello!

• Other attributes of the image element include:

width='x'
height='x'
border='x'
align='x'
alt='description of image'
hspace='x'
vspace='x'

• You can change the width and the height of an image by specifying what their new sizes will be but make sure they are proportional or else they will look disproportional and that will draw away from the total page design. Height and width can be specified in pixels. If you do not specify the height and the width, the entire image will show up. Here's an example of the above picture resized by the height and width attributes.

• As you can see, the smaller the picture gets, or the bigger the picture gets, the worser clarity you get. See how these images have borders around them, particularly the PNG image? Well, if you decide that you don't like that border around it, you can put border=0 to get rid of it. You can also specify the border color if you do decide to have a border by putting bordercolor='000000' or whatever color you choose you use. Here's the PNG image again without the border.

• If you do not specify where to put your image, the browser will automatically read it to put it in its default area, usually in the top left corner. You can set the alignment to left, right, center, or justify for horizontal alignment. For vertical alignment, use the values top, middle, and bottom. The vertical horizontal alignment only aligns text to the image.

• Let's say you want to put text next to the image but you wanted to keep a little space around the image so the text wouldn't look cluttered against the image. You'll need to use the vspace and the hspace attributes. Look at the first example of text and an image without space and look at the second example with the space added and figure out which one you like better.

<img src='gif.gif' border='0' align='right'>I am a gif, please do not use lots of colors on me, or I will not look very good. I can only have a maximum of 256 colors which is why if you need to use 16 million colors, save it as a JPEG. I can only do so much being a GIF. I'm only good for text or line art such things. If you have few colors, that works too.

I am a gif, please do not use lots of colors on me, or I will not look very good. I can only have a maximum of 256 colors which is why if you need to use 16 million colors, save it as a JPEG. I can only do so much being a GIF. I'm only good for text or line art such things. If you have few colors, that works too.

<img src='gif.gif' border='0' align='right' hspace='40' vspace='10'>I am a gif, please do not use lots of colors on me, or I will not look very good. I can only have a maximum of 256 colors which is why if you need to use 16 million colors, save it as a JPEG. I can only do so much being a GIF. I'm only good for text or line art such things. If you have few colors, that works too.

• As you recall from the linking tutorial, to link an image, all you have to do is incorporate the anchor element with the image element. I will make another example in case you didn't read the linking tutorial or you have forgotten the code.

• This ends the tutorial over images. Please take this information with you as you go on to the multimedia section.

Back