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.
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!
Related Articles:
- How To Tweak Your WordPress Theme On The Fly
- Testing Zemanta
- My 5 Most Valuable FireFox Add-Ons
- Update Your WordPress Plugins
Bookmark this page now!
you’re dead right about irfanview. i’ve used it for years and it’s amazing that you can reduce most images to a fraction of their size and they’re still more than adequate for the web
and for those who haven’t used it there are loads of other features so you can enhance images, adjust colors and contrast, even add text to images. on top of that there are more plugins to download for even more functions.
between irfanview and my other favorite “photofiltre” which has a basic free version i can do just about anything i need with images and graphics.
I’ve been editing my photos Microsoft Office Picture Manager. Is that optimizing them?
Best,
Lorraine
I’ve always learned that Google interprets hyphens in filenames as spaces. So Green-Sea-Turtle.jpg would read as three words. Underscore is interpreted as an alphanumeric and part of the word, so Green_Sea_Turtle.jpg would read as one word. I guess this is also useful info for optimizing images.
@Peter Right! Powerful software, too much to mention.
@Lorraine I don’t know MOPM, but if it reduces file sizes significantly, then it optimizes.
@rzcars As far as I know, use of hyphen and underscore varies over time. If you want to use underscore, that’s fine.
As long as you don’t use spaces. They result in %20 in the URL.
I tried adding description to some of my pictures on my website and it really did make a difference.
Not to mention the jewel that is IrfanView.
This is a great start. It is very important to include the height and width tags in your img tag so the browser knows only to load it at the specified dimensions otherwise it will take longer to load. You can also think about vector graphics, they can be used at any size/shape and take less space and time to load. Load time is important because users will click out of your site if it takes too long to load.
Regards!
I thought all you had to do is put the text right next to the image and your good to go.. but dam now i know there is so much more
Excellent article. Many people forget to add alt tags to strengthen the search rank. I have an old copy of photoshop that I use for resizing & cropping. Thanks for the info.
I gave it a thumbs up stumble.
Rich Hill
ps: I wrote an article about how to quickly locate free photos by color scheme.
tinyurl.com/3plk9n
I made the experience that the alt tags can take you this famous extra mile. It is simple way to add some extra keys and it is valuable for the user too.
this article was so great. thank you. does anyone know if image optimizer pro suitable for that?
Sometimes My pages take ages to load. I have 3 posts in the front page and I am using images heavily. Although I use photoshop to reduce the resolution to 72 still images eats up lot of bandwidth and reader’s time. I should try using your methods. Mainly the cropping method.
I am Using Adobe Photoshop. It have option named “Save for the web”. Using this option automatically reduce file size. Another minor modification also available.
stechweb
Make Money Online
@Eranda and all others
Thanks for your comments.
If you use Firefox, get the Web Developer Toolbar (http://chrispederick.com/work/web-developer/),
install it and click on Images and View Image Information. It will list all images used on a page and you can see in a jiffy, Eranda, that your background image (Background.jpg) alone is 95Kb and head.png is 52Kb.
Reducing these would speed up loading of your pages.
Using the same Image feature you can also find all broken images, image path, file sizes and a lot more.
I like Irfanview because you can also change the colors of the photos after you optimize them. I have one blog that every single photo is displayed in sepia tone and I use Irfanview for making those consistent changes.
Victor
I dont use any kind of software to reduce my pictures. i just put them as they are. of course I constantly watch their dimensions and make sure they are not too heavy. i dont have time. my site is not that heavy anyway but i am fully aware that having a lighter website could let me get those people who dont have a fast connection. Anyway i think to have got the optimum balance on my blog. On the frontpage I have 8 posts and each of them has a pic. my blog weight is 76 kb. it is not little but anyway people, even with poor internet connection, manage to see it in a couple of seconds
lot of people forget about the image title.
Image ALT is used for alternate on browser that cant display image.
But image Title is used to describe what is the image about..
i know this from google released video..
i forgot the link
I typically use CS3, but at times am lazy and settle for the Windows Picture Manager to crop and slightly modify. Thanks for the tips.
Brian
This is really useful. I’m not especially tech-savvy, but this is just basic info, and I find it very helpful. I’ll get right on downloading Irfan View. Sounds great!
Good article. I enjoyed and learn a lot of things.
Thanks
Rahul
thanks for the information. i will surely reduce my file size and see the difference.
linette.
That’s a very insightful tips and tricks on optimizing images. I personally hate it when images load rather too slow. Thanks for sharing, Case!
Yes agreed that images must be optimized, i used to didn’t care about then, then I started to realize that many visitors that I received come from Google images, after that I never put an image without put a text within
I think that optimizing pictures really do speeds up the loading process of web pages. It really do helps and it is worth of my time consumption.
I was really wonder after using this software.
I use to upload my photos directly with out optimization.It use to consume lot of time for opening the images.
By using this software i can able save my time and performance got improved tramendously.
Keep sharing ……:)
MP
I’ve been doing this on my last blogs for a while and I’m getting more than 25% of my traffic from Google images.
btw why are my comments being deleted? my site is not a sales page? its an affiliate blog
I have been adding many photos to not only my websites but also to social sites. I find that many of them have size requirements. This sounds like a great tool to use for this. Thank you for the valuable information.
Thomas Northrop
When I read this I thought it was going to be about using the alt tag to optimise images for google which I already do, this is great though and is a mistake I have been making for ages. Time to get photoshop out again I think!
Image optimization is an art that not many people master. There are many good image editing tools that allow us to get the best visual result for a certain file size but “under the hood” a lot more optimization can be done.
I always give my images alt tags for the keywords i am optimising for as this helps with the SEO. Also i make my images as small a file size as possible so they upload quickly.
Nice post…
I am from Portugal and in my language there is no too much information about image optimization.
Thank you.
Exactly, valuable information regarding image optimization. I have learn a lot from your post and I’ll apply it on my site also…Thanks for sharing it…
Irfan View is a good free tool for optimizating images.
Depending on the image you want to optimizate, you have to do a bit of experimenting with the image to get that looking quality while trying to reduce file size. Can be redundant sometimes.
Also, it depend on the dimensions of the image and how many you’re going to upload per page matter aswell.
It’s also best to keep the image size below 100 kb if you’re going to upload images with big dimensions.
If going to post lots of thumbnails pics, make sure they’re below 50 kb.
Good article. I have just started my tech blog and will remember your article while adding the pics. BTW I use the pictures on the right side of my blog (Internet Leashed). Is this the right way?
I used to use PS, but Irfan View is better when u need to do a quick and quality image optimization
I have yet to optimize the images on my site. I have been reading how practical and useful optimizing the images are, but haven’t made time to actually do it. Thank you for reminding me to get off of DIGG and REDDIT and start working on my website.
There is very true. Have seen many blogs with huge images resulting in longer loading time. At times, i will simply bounce out after 30 secs waiting time.
Rif Chia
This is very true. I don’t know how many sites I’ve been too and the page contains a ton of images all the original huge size that takes forever to load. This is a huge turn off and actually discourages people from coming back. Now imagine how slow this would load on a dial up? This site does load really fast. Good load time here.
This is one subject I don’t hear alot about. Focusing most of my attention towards SEO I realized how important optimized images truly help your site perform for your visitors as well as the search engines. I personally use Gimp.
Wow this is great post I know how to optimize blogs but not for image thanks for this post It help me optimize images of my blogs.
Thank you for the wonderful post. I will look more attentively at how I post my artworks from now. Thank you. I don’t used the descriptions of my pictures till now, thus your remark should improve my blog. Thank you for the explanation of the meaning of the dimensions. From now I will put them… Thank you for the article once again. While reading it I recognized myself as total newbie and thus the desire to learn appeared. So let me name you my godfather – Thank you.
I have always been able to do resizing and cropping with MS Picture along with MS Paint for copy and paste, but you will lose some image quality. Quick and dirty. Thanks for the tips on Irvan View. Will check it out. No harm having another tool in my bag.
SJ
Nice one there. I never knew about the dimensions thing. I normally leave the dimensions blank and let the browser format it automatically. Its interesting to know that if the dimensions are set, then the space for the image would be set aside while all other parts of the document loads. With regards to the compression, anyone out there who does not have any image editing tool of any sort can just use microsoft paint to compress their images. Just import the image into paint, and immediately save again as jpg. Since paint has a good jpg compression algorithm, the size automatically reduces without you doing anything to the image. The physical size remains thesame but the disk size reduces. amazing!
I do the image resizing bit for my weh hosted images when I remember to. And you’re right, I should always do it. On another note, I would recommend Gimp open source image editing software to edit any image on a budget.
-michael
Hi this is my first reply to your posts Case,
I first of all want to tell you that what you offer here is special.
About optimizing images for better load times, the extension of the image does make a big difference, for images with lots of details use jpg, for solid colour areas it’s better to use bmp, for smaller sized images with less detail you could use png.
Nice to know you Amr. Load times DO depend on file sizes and bmp can be very large at times. My advice is to test them.