I’ve seen many sites with bad images. I mean really bad images! Generally, I’m not referring to professional sites such as those of large Fortune 500 businesses. Rather, I’m referring to smaller sites, mom-and-pop organizations, non-profits, and public entities such as school districts. Yes, especially school districts. Before I get into details as to why they are bad, let me first define the difference between two fundamental types of images, raster versus vector images.

Raster images are the cause for most of the worst offenders. After considerable thought, I believe I can identify the underlying reason why the graphics on these sites make the sites look bad. To begin, we have to understand how raster images differ from vector images. Raster images consist of individual dots, pixels, of color. If you are using a digital camera, or more likely today, your phone to take pictures, the resulting image is a raster image, one based on individual pixels. The number of pixels in camera images varies from the early days of 640 x 480 pixels or even less to today’s phones that take photos with 4000 x 3000 pixels or even more. The number of pixels will also vary if the images have been cropped to remove unimportant parts of the picture. To view the actual size of your images from within your file browser, you can include the ‘Dimensions’ attribute as one of the columns displayed as shown here.

When it comes to displaying these images on a computer screen, the result depends on the zoom level along with the resolution of your monitor. For now, let’s assume that you have not changed the zoom level on your display. Further, let’s assume you have a monitor that displays 1920 x 1080 pixels. Now if you attempt to display an image such as the first one in the above example that requires 2449 by 2203 pixels you will find that the image extends beyond the edges of the monitor. At 100% zoom, the image cannot fit on your screen with one pixel of the image assigned to one pixel of your monitor’s display. Therefore, you have two choices, crop (trim) parts of the image that are not important or reduce the image size by using a zoom factor of less than 100%. Today, you must resize most digital camera and phone images on the screen on your web page.

Resizing an image is easy. Most software that lets you edit images has a resize option. With an image selected, you can select a Resize function that displays a dialog similar to one of the following.

or 

Most graphics software lets you resize either by percentage or by pixels. If you know exactly the size you want, resizing the image to the exact pixels you need makes the most sense. In any case, the dialog shows you the image size, horizontal and vertical. The dialog shown above on the left displays a checkbox with the text: Maintain aspect ratio. Selecting this option lets you can change either the horizontal or vertical dimensions of the image and the other dimension is automatically adjusted to keep the aspect ratio (ratio between the width and height of the image) the same. In the dialog shown above on the right, the same functionality is achieved by clicking the lock icon which then shows lines connecting the lock with both the Width and Height options to indicate that it will keep the two dimensions in the same ratio.

What happens if you do not maintain the aspect ratio between the horizontal and vertical sizes of the original image? Then you will ‘stretch’ which flattens the image or ‘compress’ which narrows the image compared to the original. For some images which have no obvious natural aspect ratio, this distortion may not be noticeable such as an image of a landscape. However, if the image is of something that the viewer knows the relative height and width or aspect, such as that of a person, the distorted image can be quite unflattering.

Some web design programs support this same capability when adding an uploaded image to a page. These operate in much the same way as the dialogs shown above.

Unless you have the perfect image size to begin with, you generally will either need to expand or shrink the image. What happens when you do either of these two things?

If you start with a small image and expand it, thus adding more pixels, the software cannot create data where there is no data. Suppose you double the size of an image. Where you had a single pixel, you now have a 2×2 square of four pixels. When this happens, what color do you think the pixels will have? Typically, it is the color of the original pixel. This creates a block texture in the image known as pixelation which gets worse the more you expand the original image.

On the other hand, if you shrink an image to half the size of the original image, the program takes a 2×2 square of pixels, each having its own color, and reduces them to a single pixel with some average color. This process works better than expanding an image and thus reducing images is less noticeable to viewers of the image on a web page. However, this occurs at the expense of fine detail which is irrevocably lost. This is most noticeable when there is text on the image or if the user tries to zoom in on the page to ‘see’ details of the image that no longer exists.

I spent a lot of time discussing raster images because they are the norm for most websites and for images taken by digital cameras and phones. But remember I said that there was a second type of image. That is a vector image. The primary difference between a raster image and a vector image is that unlike a raster image which consists of individual dots, a vector image uses line segments and fill areas and a lot of mathematics (which we will not go into here) to ‘build’ the image and color it. As a result, the software can easily scale vector images with no loss of detail because it is just a matter of mathematics to increase the line segments and fill areas. That perhaps is an oversimplification, but the takeaway is that a vector image can typically be resized with no loss of detail. Some graphics programs allow the user to design images as vector graphics. This type of image can be especially useful for things like corporate logos which can then be used in different sizes for different places on the website without having to create a new logo file for each location.

Assuming that most images you use on your website will be raster images, you may want to consider resizing them before you upload them to your web server. Sure, the website, or more specifically, the viewer’s browser, can resize the image for the viewer when the page is displayed. However, this requires the transfer and use of an image that may be substantially larger than the size needed for the page. Remember that the more data that a page requires before it can be built on the viewer’s browser, the slower the page can be rendered. I have seen pages that have over a dozen images that take over a minute to render because each of the images was saved from a 12-megapixel camera and then resized to display as essentially thumbnail images. By resizing the images prior to uploading them to the web server’s file system, you can reduce the amount of time needed to transfer the image file across the internet as well as the time it takes the browser to render it for display on the page. Thus, my general rules when resizing images are:

1. 1. Crop the image to only show the portion that is important.
   2. Resize the image to approximately the size needed on the web page before uploading it
   3. Upload the cropped and resized image to the web server before placing it on the web page using your site-building tool.

That’s all for this time. Hope you learned a little about how to efficiently use images on your web pages.