Optimize images for websites

→ Are you a new visitor? Please visit the page guidance for new visitors ←

Why optimize images for websites?

I see a lot people using high quality images within their own website design, which is ok, looks nice and all that, but they do not know that using the images in a high quality image format will take a lot of time to download for each user visit. It may also slow down your websites if not careful. I’ve seen images with 500Kb used for background, pattern like images really, that after compression were about 50-60 Kb. Well seriously, that’s a lot for just one image, right? I mean its 0.5 MB to download each time compared to 50kb which is nothing really. In this article I’m going to talk about how you can do to optimize images using online tools available almost to anyone right now.

Image compression

I’m going to start with image compression as this is the most important one to optimize images. Normally jpeg or png images can be compressed up to a certain level by removing their meta data and other things you do not need from the image. Do keep in mind though, png format images do have a higher quality image view, but tend to use more space at the same time, while using a jpg format you have approximately the same quality using less space. So try using jpg images as much as possible, wherever possible. Another important attribute about jpg images is that these can be compressed in a progressive way, so that when these are downloaded, these are in a progressive mode downloaded, like how gif images are.

I’m going to enlist a few tools that I’m using or have used in the past for image optimization and compression.

  • Smush.it – http://www.smushit.com/ysmush.it/

This service has been offered by Yahoo as a way to help developers with their project. We bloggers also have the option to use their service directly within our wordpress admin section using a plugin:

http://wordpress.org/plugins/wp-smushit/

  • TinyPng – http://tinypng.org/

Optimizing png images is the trickiest part, these are a bit different, luckily there are a few services currently for these images. They claim to optimize the images with more than 70% rate. This is really good as long as quality is alright, and it does appear to do its job!

  • PunyPng – http://www.punypng.com/

Service is similar to TinyPng, its good, but you need a subscription to fully make use of the service, else you get about 20% compression rate or so.

  • Dynamicdrive image optimizer – http://tools.dynamicdrive.com/imageoptimizer/

I’ve been using this for years or at least before I knew about smush.it, I recommend it to all users.

  • ImageOptimizer – http://www.imageoptimizer.net

Another old one I’ve been using for one of my websites, I recommend this one also to all of you.

Ok, that’s all for image optimization tools. Almost all of them are doing progressive jpg image compression, so you should be safe using either of them.

Using sprites for your websites images

You have a lot of images that you are using in different locations, like buttons, arrows, different icons and so on. Instead of linking to the specific image each time and downloading the image again and again, the best way to avoid this is to combine all these images in one single image and then using css to set specific background-position to show that exact image icon from the sprite. Sounds hard, right? Don’t worry, there is one tool that would ease up this for you, it is called SpriteMe.

http://spriteme.org/

Visit the page here and drag the SpriteMe link from the installation section into your browser toolbar. Next you just need to visit one of your websites and hit the button on your toolbar and it will load there all images. You can then group the images and form the sprites you need and you will also have the exact CSS stylesheet generated.

Using a CDN for your static resources

I’ve said this before that using a CDN to serve your resources is great, not also they add caching to your images, but you also have a certain amount of compression added to your images. This will speed things up as the browser will not be limited to downloading the resources only from your your hosting service, but from different location.

Implementing cache using .htaccess for images

You can use the following .htaccess rewrite rules for caching your images:

More information can be found in this article: Speed website by adding browser cache

That’s it for now, if I get more tips, you guys will be first to know, so don’t forget to subscribe!

Request an article ←