Module Four: Working with Graphics

Module Four: Working with Graphics

The use of images on the web, I have found, can be a complex process. It consists of more than just sticking an <img> tag inside of HTML. There are several aspects involved; one must first consider what type of format the image will be saved as (.jpg, .gif, .png ?), and, once that is accomplished, issues of file size, resolution, placement, and more must be addressed.

At the most basic level, each image is composed of pixels; tiny fragments that combine together to create the complete picture that you see. There is not a definite size that correlates with this definition, however. The size of a pixel is determined by each user’s resolution setting on their computer, and also the size of the monitor itself. As a general rule, pixels are around 0.5 mm, which can most closely be related to the size of a grain of sand. When discussing pixels, the issue of resolution comes to light. Resolution describes the quality of the image, and is described in ppi (pixels per inch) or dpi (dots per inch). As a rule, the higher either of these numbers is, the better quality the image will be. For use on web pages, it is generally better to express resolution in terms of ppi. Dpi is a unit whose most common use is for that of images that are going to be printed, and provides directions for the printer in terms of the quality of the image.

Format is also an aspect to be considered when placing images online. Three file formats are widely used on the web: JPEG, GIF, and PNG. Although there are many other formats available to computers, these three are supported by most browsers. Images with names including .TIF and .BMP are often high quality, but not optimal for web use due to limited support. This could be due to the fact that these types are not compressed, meaning that they often produce much larger file sizes that increase load time. Often, users attempt to change the file size by altering the dimensions of the image in HTML (by specifying the width and height attributes in the tags), thinking that making the image smaller will also make the size smaller. This, unfortunately, is not true. The file size remains the same if this technique is used, thus not altering load time. If a smaller file size is desired, it would be best to first use a file format that compresses images, and, second, use an image editor to resize the image and re-save it.

In my experience with graphics, the placement of images on a page has created the most frustration. Using the “float” property or specifying an absolute position often is not enough to produce the effect that I want. The biggest problem involves text from paragraphs bumping into images embedded in other paragraphs, creating a messy look on the page. Though I have a fair amount of experience in the area, this is still a cause of frustration for me, and it can be seen in Module 4 that I have yet to master the techniques. Clearly, this should be my next step in learning to work with images.