In our previous blog on optimizing images for the web, we walked you through choosing the right image file format for your website. In our final blog on optimizing images for the web, we will explain how you can properly reduce your image resolution for a high quality photo.
Image Resolution
Image resolution refers to the quality of the image in terms of sharpness, definition, and detail (Digital Photo Secrets). In terms of pixels, the more you have in an image (the greater the dpi), the higher the resolution.
Reducing Resolution by Half
When it comes to images, a high resolution means a good quality photo. However, a photo with a high resolution can often be too heavy for your website, slowing load-time. Thus, you must reduce the size and resolution of the image.
For example, you may upload a photo from your camera that is 3000x2500 pixels and 150 dpi. You need to get it to your website where it only allows 300x300 pixels and 72 dpi.
Your first step is to reduce your dpi (resolution) by no more than half. The reason you should reduce by no more than half is fairly simple. Say you have a blue pixel and a red pixel sitting right next to each other. If you reduce your image by more than half, you are telling your photo program to decide which pixel is more important. Your photo program will just pick and this creates that “noise” you see in some images.
Once you have reduced the resolution, you will need to reduce the size as well to meet your 300x300 requirements. You should follow the same rule here of reducing by no more than half to get the photo where you want it. Of course, you will want to maintain the aspect ratio so that your photo doesn’t become distorted. Therefore, getting a rectangular image to a square image will require some cropping in addition to resizing.
If you need assistance with choosing or optimizing images for your website, contact Informatics.
