Images are displayed in a web page using an <img> tag. Attributes added to the tag tell the web browser where to find the image, and how wide and tall it should be displayed. One of the worst things to do is to use the width and height of an IMG tag to force the image to a new size.

Resizing using smaller Width and Height

The image above is actually 630 x 420 pixels, but using the IMG tag Width attribute I made the browser resize the image to 250 pixels wide.

The IMG tag used to display the image above looks like this:
<img src=… width=250>

Using this method forces the browser to reduce the size of the image before it is displayed. This will give you very different results with each browser. In this image the diagonal lines created by the top and bottom of the cabinetry have some serious jagged artifacts. The rungs on the stools suffer too. The image has also lost some sharpness. Compare it to the original image here: Remodeled Kitchen. By leaving off the Height attribute the browser will size the image proportionally.

That is not really the worst thing you can do. This is.

Resizing using larger Width

The image above uses a width of 800 and a height of 250 to stretch the image far wider than it should be, resulting in distorted proportions. Relying on the browser to size an image is not the best option.

The IMG tag used to display the image above looks like this:
<img src=… width=800 height=250>

This time the width and height were specified exactly, resulting in the browser stretching the image beyond it’s original proportions.

Resizing and processing an image for a specific use on the web is going to give much better results.

Processing Images For The Web (Part 1) - Introduction
Processing Images For The Web (Part 3) - Proper Resizing
Processing Images For The Web (Part 4) - Sharpening (not just for knives)

Digital Photography photoshop, sharpening, web

It’s funny how seemingly random events can suddenly be tied together.

I was having our carpets cleaned a couple of days ago. Not big deal, it had been a year. With two kids, two adults, two cats and a dog, the carpets needed cleaning. I hired Monarch Cleaning. I met them in a BNI group and they do a great job. The cleaner showed up and started working.

I knew one of our cats would not like the cleaner and his machine doing it’s job. So when he came too close to her hide out she ran downstairs. I saw her tear through our family room, and then I lost track of her. After a few minutes I decided I had better find out where she went.

She does like to get up on top of our kitchen cabinets, after jumping on our counter and then our refrigerator. This time she wasn’t on the cabinets. She decided that the space between the refrigerator and the cabinets was a better place to hide.

Being 5′ 10″ I am not able to see the top of the refrigerator without standing on tippy-toes. When I did this I saw the cat hiding from the carpet cleaner. What I also saw was 4 years of dust accumulation.

After the carpet cleaner completed his job, very nicely thank you, the cat came down from her hiding place and I got busy cleaning the refrigerator. Since there was not a lot of room above the refrigerator to get in and clean I had to pull it out. No problem, it’s on wheels. Hmmm…should they be making a crunching sound when I pull it out?

Turns out there was more than just dust accumulation. Apparently kids getting their own water from the door, along with the unavoidable dropped food can cause an accumulation of “stuff” just under the base of the refrigerator, just out of sight.

Thankfully I was already in a cleaning mood so the mop came out too. I guess I should write a thank you note to the carpet cleaners, otherwise I don’t know how long that would have gone unnoticed.

Miscellaneous

While the web isn’t a new concept, I find that there are still quite a few sites that don’t handle images very well. There are several problems that you need to be aware of.

First Some Background

When dealing with images for the web they are defined by their width and height in pixels. A pixel is a single point of color in an image. Line up pixels side-by-side and you get the width of an image. Top-to-bottom and you get the height of an image. Each digital camera has it’s own resolution (width and height in pixels) based on the image sensor in the camera. My current camera, the Canon 5D, produces images that are 4368 pixels wide x 2912 pixels tall (or when multiplied together 12.7 Million pixels).

With images for the web all we need to know is the width and height of the image and what width and height we want it to show on our web page.

Remodeled Kitchen - 400 pixels wide x 267 pixels high

DPI, or dots per inch, is another aspect of images that is often mentioned. However, it is only relevant when you print an image. DPI refers to how many pixels, or dots, get printed in one inch of paper. DPI is usually around 300 for most printers. To keep things simple a Canon 5D image printed at 300 DPI would print at 14.56″ wide (4368 pixels / 300 DPI) x 9.71″ tall (2912 pixels / 300 DPI).

That is a pretty large print, and is way too large for the web. The image above is ten times smaller than what came out of the camera. That is a lot of image data that is now gone. Making sure the image looks good after that much data loss, and that it is displayed properly will be discussed next.

Processing Images For The Web (Part 2) - The IMG Is Everything
Processing Images For The Web (Part 3) - Proper Resizing
Processing Images For The Web (Part 4) - Sharpening (not just for knives)

Digital Photography photoshop, sharpening, web