Image resolution is a pretty in-depth topic. In order to answer some common questions I receive about web images, I’m only going to cover the very basic aspects of it. If you’re also interested in more in-depth material, please let me know in the comments below.
What is image resolution?
Image resolution, in the most basic terms, is the detail and quality of the image. It directly affects the size of the image. Higher resolution = higher quality and more detail. Lower resolution = lower quality and less detail.
On a website, you want an image to be as small of a file size as possible while maintaining it’s quality. This is so the image looks nice but also loads as fast as possible.
How do I make a proper image for my website?
Here are some quick guidelines to follow:
- Resolution: Take photos at a higher resolution (240 pixels per inch or higher) because you can lower the resolution on your computer, if needed.
- Resizing: Crop photos to the exact height and width they need to display at on the website before uploading them to the website. Otherwise, your browser will do the work of resizing them and make your page load slower.
- File types: In general, use .jpg/.jpeg for photos and .png for graphics. For .png files, save them as Interlaced. For .jpg files, save them as Progressive. This affects the way the image loads inline with the page load speed. I’ll get into that in a separate blog post.
- Copyright: Make sure you have the copyright to the photos. You generally do if you take them or if it says so in your contract with your photographer.
- Optimization: Run the images through an image optimizer or compression tool to reduce the size of the file.
To shrink the size of images while maintaining the image quality, I’d recommend using image optimization/compression tools.
Which tool you use depends on if you use Mac or Windows and if you prefer to download and install a piece of software or just use an online tool. Here are some tools to try out:
- Smush.it from Yahoo! Developer Network (online tool)
- ImageOptim for Mac (download)
- Shrink O’Matic (requires Adobe AIR)
- CompressNow (online tool)
- FILEMinimizer Pictures for Windows (download)
Here’s a screenshot example of the above image before and after I ran it through the image compression software.
You can’t tell the difference in the quality of the photo unless you zoom in really, really close. At this height and width, you can’t even see the seam where the optimized and non-optimized images meet. Hint: it’s directly in the middle.
However, the left image was 8.1MB and the resized, optimized image is much smaller at 359kb. (For reference: 1mb = 1,000kb.)
Can I also use my web image in printing?
I wouldn’t. Printing requires a much higher image resolution or your printed images will look grainy and/or blurry. After they’re run through an image optimization tool, they wouldn’t be fit for printing.
You should always keep a copy of the original, high resolution images so you can print them, if needed.
What else would you like to learn about? Let me know in the comments below!