How To Optimize Your Images

It always amazes me how many bloggers insert unoptimized images in their posts. As a result thereof, their home page, which often contains a couple of posts, sometimes in full length, loads slow or not at all.

I get many questions about the latter. Almost always the load time of a home page can be improved right away by optimizing the images.

That requires some extra work though. And extra time. But at least your visitors don’t click away because your page takes way too long to load.

So, if you want to use an image in your posts, optimize it first.

Optimize Images
Photo Credit: Benjamin Rossen

Download the image to your hard disk and then use some image processing software to crop the part of the picture that you want to use and to reduce the file size. Then upload it again, either to your own server or on any host (which, again, can lead to longer load times, so be careful here), and link to it.
This will speed up the load process.

You don’t need expensive software to do this. A great free program that does this job very well is Irfan View. If you don’t have any image processing software yet, download and install it on your PC.

Open your downloaded image in Irfan View. It will show the dimensions and size of the image.

You don’t have to use the full image. You can crop it if you like by just clicking your mouse and hold the button down to select the frame that you want. The selected dimensions are shown at the top of the window. If you’re satisfied, just click Edit and Crop Selection.

Then select Image and Resize/Resample image. Check the Preserve aspect ratio box and set the new size. Filling in the Width automatically sets the Height.

After resizing the image, save it as JPG (File, Save As and select JPG at the bottom) and slide the Save quality in the pop-up window back to 90, 85 or even 80 or 75, depending on the resulting quality (for some images, a quality of 75 or 80 is too low and will look bad). Then click on Save.
That’s all.

Irfan View can do a lot more, so explore the program. One of the most impressive features is that the above described process can also be done in a batch for as many images as you want.

If you use a service like Flickr as your image resource, make absolutely sure to use the Creative Commons section to avoid any problems.
Here are 16 Flickr Search Tools That Are Fun to Use.
You must give proper credit to the work in the manner specified by the author or licensor, mostly by providing a link back.

It’s quite easy to do this at the bottom of the image. Most of my larger images (maximum 460 pixels wide) are centered. I’ll put the name of the resource just below the image with a link. I use the ‘small’ HTML code for that (<small></small>), which I have inserted in the HTML Quicktags toolbar.

For any image that you use, always add the dimensions (width and height) to the img statement, otherwise the browser will wait until the full image has loaded. When a browser recognizes dimensions, it will reserve the necessary space and continue loading. That makes it a lot faster.

And never forget to include the Alt-tag to describe your image. You better make it a good description, as most search engines can index images too. For the same reason, you should use a keyword as the name of the image, like ‘optimize-image.jpg for this post.

Ok, that’s how you optimize your images.
Do you have any other suggestions?
Post them below!

Share this post using these icons:

Related Posts