This is second in a series of posts about digital images. The topic of this post is about resolution and file size
In the last post of this series talked about the different types of image formats that you can use on the web. In this post, I’ll explain the concept of image resolution and file size and what it means for your images.
Simply put, image resolution refers to the amount detail a digital image has. There are several very technical ways to measure resolution, but the way that’s most useful for you to remember is known as “pixel resolution”.
All digital images are made of little squares called “pixels”. You can see individual pixels by zooming in close to an image like this one below…
Here’s what the image looks like at normal view:
Each pixel helps makes up the whole image. Resolution is measured by how many pixels there are in an inch of the image. So if there are 100 pixels in every inch, that image has a resolution of 100 pixels per inch or 100 ppi. (You may also see the abbreviation for resolution as dpi or dots per inch…no matter the abbreviation…for our purposes it’s pretty much the same principle) The sharpness or the detail of an image depends on its resolution. The more pixels you have in an image, the sharper and more detailed your image will be. So an image at 300 ppi will be much sharper and more detailed than an image at 72 ppi because when you’re lowering your resolution, you’re essentially getting rid of pixels. The less pixels you have, less detailed your images are.
So! This means that the higher the resolution the better for your website, right? Not so fast! When it comes web images higher resolution is not always better. Why? This has to do with “file size”. File size is basically how big in kilobytes, megabytes, or gigabytes an image file is. Don’t mistake image size (which are the actual size dimensions in height and width of an image) with file size. They are two different things. The file size of your image is affected by a number of things, the file format (JPG, GIF, or PNG) the dimensions of your image (the bigger the dimension of an image, the larger the file size), and the resolution. Those images with higher resolution are as a rule larger than the same image, in the same file format as those with lower resolution.
Okay, so what difference does that make? Actually, quite a bit as far as your website is concerned. This has to do with how information is transmitted on the web.
Imagine that the Internet is a series of pipes from one your website to your computer and your image file is like water traveling through those pipes. In order to see your image on your computer screen, it has to travel those series of pipes from your website to your computer.
How fast water travels through a pipe is mostly dependent on two things: 1) the size of the pipe, and 2) the amount of water traveling those pipes. If you have a big pipe, that water zips right through because the water has more room to travel. If you have a small pipe, the water takes a lot longer to travel through because there’s not as much room in the pipe. That’s kind of how it works on the Internet too. This is a concept called bandwidth, which is the amount of data that can travel along a connection. Dial-up connections are like small pipes, data comes through slower because it can’t handle a lot of data at once. The bigger pipe is like your cable modem or DSL line. It’s faster because it can handle a lot more data at once than a dial-up connection can. So how fast a person can load up your image on their computer depends on their “pipe” or on what Internet connection they’re using.
But wait! There’s another part of the equation isn’t there? That part is the amount of water going through the pipe. Image that the amount of water traveling through the pipes represents how big your image file is. An image with a large file size has a lot more water that has to get through those pipes than an image with a smaller file size. That means if your image has a high resolution, it will have a higher file size…which means that it’s going to take a lot longer for that image to load up on your website.
Plus, you must take in account more than just one image. How fast a web page loads up depend on all of the elements on the page…that is the file size all of the graphics on that page and the file size of the HTML page itself.
Now, you can’t control the size of the “pipe”. Rather, you can’t control whether your visitors use dial-up or high speed Internet to surf your website. But you can control the “water” or the file size of your images. One of the ways of doing so is by picking the right resolution for your images. The optimal resolution for the Internet is 72 ppi. Anything lower can decrease the quality of your image. Anything higher won’t increase the quality of what you see, but will increase the file size. So stick to 72 ppi.
By the way, if you are planning on using some of your images for print purposes, say you want to create print catalog or brochure, or you want to have some digital images on hand for PR purposes, you’ll need to have two versions of that image. A resolution of 72 ppi is great for the web and terrible for print because at 72 ppi you eliminate a great amount of detail and results in a fuzzy printed image. This also explains why web graphics looks so lousy when you print them out. At minimum, your images should be about 300 ppi for print…at minimum. If your images are going to be used in a glossy magazine or for high quality prints, they’ll need to be at an even higher resolution than 300 ppi.
You should also remember that you always size your images down, not up. Don’t attempt to take an 72 ppi image and change the resolution to 300 ppi. Once you save an image at a lower resolution…all of that detail you got at a higher resolution is gone forever. Raising the resolution won’t bring the detail back and it will just result in a fuzzy image. The same thing goes for changing the size dimensions of your image. Don’t take a 100 by 200 pixel image or a 2 inch by 3 inch image and convert it to a 500 by 600 pixel image. Again, the detail is gone once you save the image at the smaller size.
Remember…always down…never up.
Next week: Changing the resolution isn’t the only way you can control the file size of your image. Next time we’ll dive into the wild and woolly world of compression.
