Image Resolution, Image Size, and File Format
Have you noticed images that verrry slooowwly display on a website? We’ve all seen it. What that happens, that is a prime example of an image that is not, what I call, web-ready or, in more technical terms, it is not optimized. In this post, we’ll talk about what makes an image web-ready. Next week, I’ll show you the steps in Photoshop how to make an image web-ready.
There are three main concepts that make an image web-ready: Resolution, Image size and File Format. Let’s take a look at these in detail.
Resolution
Resolution is the amount of detail you can see in an image. Technically, resolution defines the number of dots per inch. The more dots you have per inch, the more detail you will see in an image. This is very relevant when you are printing an image. Printers can often handle 300 to 1200 dots per inch (DPI). However, monitors don’t have that range. In fact, they don’t really have any range. Their resolution is 72 dpi. Period. (Mac monitors are 96 dpi.) If you display a 4×6 image on a computer monitor that is 300 dpi, it shows up 4 times larger (300 is approximately 4×72.) That’s why when you’ve printed an image that was really big on your screen, it suddenly shows up much smaller on a printer. The printer can handle the 300 dpi, whereas the monitor just spreads the dots out, making the image 4x larger.
So, what’s this have to do with making images web-ready? A lot! When it comes to web pages, you want your images on your web pages to download fast. If you’re downloading an image with a resolution larger than 72dpi you are wasting precious download time. Set your images to 72dpi resolution before you add them to a web page. Next week, I’ll show you how to do this.
Image Size
The other big factor in making your images web-ready is to make them the same size you want them on your web page, before you add them to the web page. You can use a large image and make it smaller after it’s on our page, but again, going back to maximizing download speed time, that would be a waste of precious download time. Use an image editor to change the size of your image to match the size on your web page, then add it to your web page. Next week, I’ll show you how to set your image size within an image editing program.
File Format
Another concept to be aware of is the file format. The two main types are .gif and .jpg. Another one that is used more and more is .png. For best results (visually and file size), follow the guidelines below:
| # of colors | type of image/graphic | transparency | file size | |
| .gif | 256 | line art, logo, special text | yes | good |
| .jpg | millions | photo | no | good |
| .png | millions | photo | yes | large |
The main difference between these file formats is # of colors it can handle and whether or not it handles transparency. Have you noticed how your logo always has a white box around it? That’s because, if it’s a .jpg, it can’t do transparency. (It may also be that it ‘came’ with a white box. This can be removed and then saved as a .gif to retain the transparency.) Tune back next week to see how to do these steps and save the image in the best file format.