How To Optimize Images To Speed Up Your Site
ADVERTISEMENTSA regular reader of this blog, Shivaranjan, asked me earlier today on how to optimize images to speed up his site. I decided to write a post on it as I feel there are many people who do not know on how to reduce their image size and as a result slow down their site.
Images are one of the reasons behind a slow loading site and hence is necessary to optimize them before you place them on your site or blog. Photoshop includes a feature called ‘Save for Web’ which you can use to reduce the image size.
If you do not have Photoshop, you can use other image editing softwares that have a similar feature to the ’save for web’ that Photoshop provides or you can also use an online image optimizer.
To access the ‘Save for Web’ feature in Photoshop, hit Alt+Shift+Ctrl+S after opening an image. Now select the image format that you wish to use.
For JPG format you should set the quality of the image as 50 for optimal results and make the image progressive so that your visitors will have something to look at when the image is loading.
For GIF format reduce the maximum number of colors to reduce the image size and make the image interlaced so that your visitors will have something to look at when the image is loading.
Also use the height and width tags when you place images on your site, otherwise the browser will have to determine the size of the image and then load the image and then the rest of the page which means the content will not load until all the images load. Your visitors land on your site to read the content, so making them wait for the images to load first will just annoy them and they may leave.
When you set the height and width tags, the browser will automatically know the size of the image and will be able to hold a place for the image and load the rest of the page at the same time. So while the images are loading, your visitors get to read the content.
Example of image code with height and width tags included
Image Formats you can use
JPEG (Joint Photographic Experts Group): Support millions of colors. You can use this format for photographs and screenshots that you take.
GIF (Graphics Interchange Format): Supports a maximum of 256 colors. You can use this format for logos and buttons and when you need transparent and animated images.
PNG (Portable Network Graphics): Supports 24-bit colors and better transparency than the GIF format. The GIF format may still be the better option as not all browsers display PNG images well.
Hope you found this tutorial useful. If you have any similar questions or anything related to blogging and money making online, email me the question and if I answer it here you will get a free link to your site on the post 
Search JohnTP.com or view a random post
Related Articles
Find out what I am doing currently by .
Posted on June 18th, 2007 | Category: Tutorials |
Benedict Herold
June 19, 2007 at 1:42 am
I would not be interested in paying for Photoshop just for image optimization. I would choose to use IrfanView or Picnik, if I’m on the go.
Gili
June 19, 2007 at 2:22 am
Nice tricks. Thanks for sharing.
egon
June 19, 2007 at 3:26 am
If you don’t feel like opening up Photoshop every time you want to upload a picture, run it through this:
http://tools.dynamicdrive.com/imageoptimizer/
It’s quick and easy; I use it all the time.
Smarty Blog
June 19, 2007 at 3:39 am
I’m using Paint Shop Pro and for Jpeg images you can achieve the same effect if you select an appropriate Jpeg compression. The bigger the number, the bigger the file
Alex Panait
June 19, 2007 at 3:44 am
I am using now Photoshop but until know I used ACDSee
Shivaranjan
June 19, 2007 at 6:04 am
Thanks for the tutorial John. That should really save me some bandwidth in future. I will use this to optimize my images from now on.
kay
June 19, 2007 at 6:12 am
I am using Paint Shop Pro. There is a button provided to save the image for web. Simple and easy.
Wallace
June 19, 2007 at 8:03 am
nice tutorial,for normal post,i prefer to use JPEG format as small size and high quality.
Madhur Kapoor
June 19, 2007 at 10:08 am
Nice post John , i prefer Jpg format .
Lovedeep Wadhwa
June 19, 2007 at 11:45 am
Very useful post
Also read this post on my blog to know more about when to use which format.
Nirmal
June 19, 2007 at 12:34 pm
I use Microsoft Office viewer or Irfan view to reduce image size. If the image need further modification, then I go for Photoshop.
Thanks for the article. Nice one.
shashank
June 19, 2007 at 2:48 pm
thanks for that little but useful photoshop knowledge …i really need that info ..good post.
kay
June 19, 2007 at 8:15 pm
For online purpose, it’s better to use JPEG.
For offline purpose, I will always choose PNG.
listikal
June 19, 2007 at 8:21 pm
I’ll have to dig into it more, but I know that there’s a Wordpress Plugin that optimizes images automatically after you upload them.
Grace
June 19, 2007 at 8:45 pm
Do you know what it’s called? Or at least part of the name? I’m interested in that.
CristianR
June 19, 2007 at 10:05 pm
Nice tip , thanks for sharing John ! Although i have to add that your tip comes in handy only for websites with a big number of visitors , and a high bandwidth usage . Thanks for sharing , anyway !
awsaun
June 20, 2007 at 12:48 am
Yes John, usually i takes this way… and host an image at another site, i’ve used free image host that have developed by my friend.
Jamdo
June 20, 2007 at 5:46 am
For those using Fireworks, the process is almost exactly the same - using the export wizard is the easiest way.
kay
June 20, 2007 at 5:53 am
If we hotlinking the image from another website, will it take longer time to load it?
egon
June 20, 2007 at 6:07 am
kay: Not always, but it’s not a good idea. You should never rely on someone else’s servers to provide the content for your site; always use your own. Their server goes down or is slow, and your page suffers.
horisly
June 20, 2007 at 10:13 am
yes, i always save the pics to web format using ps.
shashank
June 20, 2007 at 11:01 am
The best way is use free photosharing sites like flicker and photbucket to upload your images and then hotlink them ..i use images this way and rarely upload images in blogger.
AmeyJah
June 20, 2007 at 3:44 pm
i too agree that just buying photoshop for image optimization will not do. I think there are many free software which you did not mention. as linux user i use gimp or while using windows i use irfanview.
optimization: you have pointed out correctly. but i always try to reduce the size of the image using html codes but now i just resize these images using powerful WYGIWYS editors like live writer.
egon
June 20, 2007 at 5:42 pm
:
What if flickr changes their URL convention? What if photobucket decides your picture has been up long enough or has used too much bandwidth? I’ve seen it happen many times.
Abdul
June 20, 2007 at 7:30 pm
I use allyoucanupload.com and snipshot.com to resize images.
Pallab
June 20, 2007 at 11:23 pm
I use IrfanView for this. Its light weight and its fast. I dont need to wait 30 seconds just for the program to start or wait 5 minutes just for the images to be uploaded to the website.
Also, IrfanView can compress thousands of images at a go with the click of a button.
Shashank
June 20, 2007 at 11:49 pm
never thought about that …but i don’t think photobucket will change then url convention …i have seen many people using images this way…
Internet Tv
June 21, 2007 at 7:56 pm
didnt know you could decrease the quality.. thanks john.
Cybersurge.org
June 23, 2007 at 1:26 pm
http://tools.dynamicdrive.com/imageoptimizer/
Wow that is a cool tool, I’ll have to start using it, I hate using photoshop, it is just too bloated for what I need
Don
June 24, 2007 at 4:58 pm
IrfanView here also. No need to open a new program when all I have to do is right click one or all of the photo’s in a file. It’s just too easy and fast this way.
Don
Internet Tv
June 25, 2007 at 1:02 am
wow. i didnt know you could decrease the quality
Ronald
June 26, 2007 at 1:34 pm
Oh John, your page navigation is very cool! that used a pluggins?
Ronald
June 28, 2007 at 12:29 am
Thanks John to reply my e-mail… it’s done
Shashank
July 2, 2007 at 9:48 pm
there is one service piknic i think which lets you do all editing online has anyone tried it…
Gili
July 3, 2007 at 5:46 pm
Same here. I use IrfanView. But still this post is very valuable for Photoshop beginners.
Webmaster Money
July 5, 2007 at 4:05 pm
I am using ACDsee to make pictures smaller. But I forgot about progressive part.
Chris
July 5, 2007 at 4:38 pm
Paint.NET is an excellent free open source equivalent to PhotoShop, but I agree that IrfanView is the best for simple cropping & compression jobs.
MoneyNing
July 6, 2007 at 3:54 am
I’m so surprised that people don’t know how to do this. I guess it helps to be a computer major!
Andrew Kontra
July 7, 2007 at 10:48 am
Same here. Would love to know a recommended tools to do this along with tools that keep the quality of images.
Kolin
July 8, 2007 at 12:44 am
Adobe ImageReady and save for web does a great job, never found a better tool!
Larry
July 8, 2007 at 2:44 am
I use IrfanView to crop images for my blog.
Ram
July 8, 2007 at 8:03 pm
Good and useful post. Is there anyway to optimize MyBlogLog Widget to speed up our site? It is the worst thing and slows down my site a lot.
Russell Wagner
July 10, 2007 at 9:09 am
Nice tips and tricks! Thanks alot for sharing.
horisly
July 10, 2007 at 4:27 pm
what’s the matter to John?
green
July 10, 2007 at 4:44 pm
John you stopped blogging, is something happened?
HiFi Guy
July 10, 2007 at 10:52 pm
You can also use ‘Gif Optimizer’ and ‘PNGOUTWin’ for a better optimization after photoshop
subhash
July 20, 2007 at 6:48 pm
lot of people are saying that they wont be able to pay for photoshop…But photshop is worth for what u r investing..u can use it for many other purposes also …
Balinese
July 27, 2007 at 6:06 am
Nice tricks!
SEO Blog
August 1, 2007 at 5:35 pm
I use Fireworks and it seems it do a great job for me. I’ve learnt it for my blog, although I’m not a great designer. I’ve also used IrfanView but it is not a professional graphics editor like Fireworks or Photoshop.
perde
August 7, 2007 at 7:30 pm
I like to use Paint Shop Pro for this kind of works. There are three reason behind this, one being personal. First, I think PSP-encoded JPEG’s pictures seem a bit better. Second, it’s loading & operating very fast. Third I’ve been using PSP for simple pic manipulations for almost a decade now that it’s like a habit for me.
kitap
August 12, 2007 at 5:30 am
it will be very usefull for my slow websites. thanks.
Webmaster Money
August 15, 2007 at 2:26 pm
Can you modify images in bulk lets say I need 100 images to be optimized. Now I use AcdSee for this.
horisly
August 15, 2007 at 6:55 pm
change the top commentors?
Tupac
August 15, 2007 at 10:29 pm
I always optimize my images using Fireworks, to around 80% quality. It’s amazing how much the size of the image differs, and yet the quality is hardly unnoitcable to the human eye.
Critical Consciousness
August 23, 2007 at 2:09 pm
Helpful hint! I had a really hard time with optimizing large images for awhile myself.
kitap özetleri
January 10, 2008 at 7:53 pm
thanks good artice
Shams
March 17, 2008 at 11:40 pm
Nice article. Thanks.
takı
March 30, 2008 at 9:00 pm
good article, thanks a lot