How to optimize photos for your site

The Blue Planet Eath, Photo taken by Apollo 17 crew

Photo of the earth showing Africa, Arabian Peninsula, etc

Look at the photo here. It is the famous photograph of the Earth named “The Blue Marble” taken on December 7, 1972 by the crew of Apollo 17 spacecraft en-route to the Moon at a distance of about 29,000 kilometers (18,000 statute miles) from the earth showing Africa, Antarctica, Madagascar, the Arabian Peninsula, etc. (This photo is in the public domain because it was created by NASA, and you can download it and use it for yourself).

The photo you see here is optimized for a post like this. It is just 20.2 KB, measuring 250 x 250 pixels. The original photo from which it is optimized is of the resolution‎ of 3,000 x 3,002 pixels (file size: 6.21 MB, MIME type: image/jpeg). As you perhaps know, such large size photos can fill up your server storage very fast and you may need to upgrade your hosting account.

If you are having very small storage for your hosting account, the problem will be more acute if your site or blog calls for frequent use of photos. This is just one aspect of using photos for sites and blogs.

The biggest problem, in my opinion, is increased page load time because of photos and images, though other factors can also increase it. Some blog hosting applications automatically reduce the pixels and file size to suit your page. Some others do not. So, you have to check up from the application that you are using. But whatever the application that you are using, it may just reduce the pixels to suit your page, and not the size (in KB, MB, etc.).

Now click HERE to see the original photo of 6.21 MB, a huge photo of very large dimension. Note the time it takes to load on your browser. There is yet another version of the same photo of 18.32 MB. And there are even other photos that are of even 100 MB. Such heavy photos and images can even crash your browser.

Another question regarding photos and images for optimum use with blogs and static websites is about the types of photos/ images such as jpg, png, gif, etc. The best is to use jpg or png images, as gif or old fashioned bmp images are of huge file sizes, even if their measurement in pixels may suit your page layout. So, before uploading convert them to jpg or png images.

A word of caution: DO NOT CONVERT animated gif images. To create the animation images several frames of the image taken in motion or created otherwise are used. If you convert them, the file size will be reduced, but only one frame will show up and it will lose its animation effect.

A faster loading page will keep your visitors and customers happy about visiting your site. If your page is very slow, the visitor may not be patient enough to wait till your page is loaded. In that case, the visitor will hit the back button and it will increase your bounce rate which is bad from the point of view of Search Engine Optimization (SEO). This is especially so if you have several photos on the same page.

So, it is wise to reduce the page load time because of images. The best way to do the photo optimization is to use Photoshop tools. In Photoshop open the image and click on the “image” tab and then click on “image size”. A dialog box will open in which you can type in either the desired width or height of the optimized photo you want. Then click OK and go to the File Menu. In File Menu, click on “Save for web” option. A dialog box will open in which you can save for Low/ Medium/ High/ Maximum resolutions. Choose the Medium or Low resolution only, and save as image only (do not go for the HTML option, as it saves as an HTML file).

If you do not have Adobe Photoshop installed in your computer, you can download Picasa, a free photo editing software from Google http://picasa.google.com and use, though it works differently, and not a replacement for Adobe Photoshop.