Why Resize Images?
Resizing images for use on the web makes pages load faster, and it is considerate to the data plans of visitors to your site. For some insight on why this is true, and to learn what makes up a digital photo and what it means when we speak of the “size” of the photo, be sure to read this whole article.
What does “size” mean when referring to printed pictures?
A physical photograph is printed on some kind of paper, and it has a fixed size that can be measured with a ruler. So you can hold a “four-by-six” photo in your hands and that’s twenty-four square inches of photograph. But digital photographs are different. They have no fixed size, no matter some software says. A digital photograph simply does not have inches.
What does “size” mean when referring to digital pictures?
Instead, a digital image is a grid of colored squares called “pixels”, which when viewed, are assembled in the viewer’s brain to become an image. Its ‘size’ is simply a function of how many pixels are in the grid, independent of how it is displayed. This is expressed as width/height, as in “800 by 600 pixels”.
A given digital picture could be displayed on a screen the size of a wristwatch or a billboard – and if the angle of view were the same, the picture would look the same. A small phone in your hand, might have the same angle of view as a digital billboard 200 feet away.
A typical phone picture is about four thousand pixels wide and three thousand pixels high, for a total of twelve million pixels. Each pixel contains one twelve-millionth of the information that makes up the picture. Its file size (the number of bits that must be transmitted to download the photo) depends mostly on the number of pixels.
If a twelve million pixel (or 12mpx) image is ‘re-sized’ down to eight hundred pixels wide and six hundred pixels high, it is now only a 0.48mpx picture. Twenty-four out of twenty-five pixels have simply been thrown out! It downloads about twenty-four times faster now, and yet, with a narrow angle of view , looks about the same. So there’s no reason to use the gigantic original for a small image on a web page.
On a computer screen, the apparent size of a given picture will be a ratio of the display width of the picture size (in pixels) to the screen size (in pixels). For example, a screen 1,900 pixels wide will only display a bit less than half of the width of a phone picture. If it were a picture of Mount Rushmore, you’d only see Jefferson and Roosevelt; Washington and Lincoln would be outside the picture.
So… how can you see a whole picture on your monitor? The video driver on your computer can throw out pixels – which is to say it throws out picture information – to squeeze the picture onto your monitor. Imagine a puzzle with all square pieces, and you simply threw out every other piece to make it smaller. (If you throw out enough pixels, the picture takes on a blocky appearance called ‘pixelization’.)
How to resize images for the web
Almost any photo software can resize photos. Generally you open the photo in the software, click on Image, then ‘Resize’ or ‘Scale’, and enter the new size either as a percentage or a number of pixels. The exact procedure varies but here’s how to resize an image in XnView, a photo management software you can install on your computer.
Managing resized pictures
You can display a ‘big’ image on a small web page. The picture looks smaller, but its file size does not change. It still takes a long time to download the picture, and burns up someone’s data plan.
The solution is to use a copy of the image that is already reduced to the size you want. The savings in download time and data usage can be very dramatic. Suppose you take a four-thousand pixel picture, and resize it before uploading, to five hundred pixels wide. Now the picture will load sixty-four times faster.
But! If you resize your original picture to a smaller size, and then save the change, you lose a lot of detail. What if, later, you wanted to use the picture in a print advertisement, where you need all the detail you can get? It would look blocky and pixelated.
The answer is, whenever you resize a picture, to “Save As” a slightly different file name. Now you have two different-sized copies of the same image. For example, if your picture is of a tree, and you make a 500-pixel version of the tree, the original would be called tree.jpg and the smaller version would be called tree-500.jpg. The two files can sit right next to each other in a folder. You could have as many different-sized versions of the picture as you want, and use them as needed.
It is possible to build a resizing capability into (for example) a WordPress server, and there are plugins for this function. This raises the need for additional bandwidth, storage, and CPU and memory overhead for the web server. Again, it is best to resize the picture to the size you want, before uploading to the site.
Links:
Download XnView Classic for your personal computer
Xnview is powerful image-management software available directly from the developer). XnView is already loaded on computers in the College of Business, but you can install it on your personal computer. Again, it is free for personal and educational use, but if you use it in business you must pay a licensing fee. It is certainly not the only program that can resize images, but it is a powerful program with many advanced image management functions.