Tuesday, May 19, 2009

10 Techniques to Optimize Images for Website

Here is the list of few techniques which can be used to optimize the image file size for the websites. This will not only help in loading the web page and image faster, but it is also a good practice for SEO.
  1. Crop images contextually to show only the most relevant parts of the image. This will help in faster download and higher impact.
  2. Resize the images to actual pixel size as required. And always use width and height attributes for the images apart from the ALT tag.
  3. Try to use .png images where ever possible instead of .tiff, .gif or .jpeg. .png extension images are efficient and can be easily downloaded with much costing you the bandwidth.
  4. Embed images into the web pages with data URLs. This will reduce http requests. This is a good technique if you do not have to change the image more frequently.
  5. If you are using .jpeg image then try to blur the background. This will not only optimize the image but, gives a clean and simplified image appearance when the no-critical details are blurred.
  6. Use CSS borders or backgrounds instead of embedding borders in images. Use a tightly cropped image combined with a coded background color. Ensure you do not leave blank background boarders.
  7. Overlay text using CSS or by using a transparent .png or .gif instead of embedding text in the image. This will help in fewer http requests.
  8. Minimize noise to maximize graphic and video compression.
  9. Minimize dithering and bit depth for .gif and .png.
  10. Reduce or eliminate drop shadows. Drop shadows make images appealing, but also increase the file size. Try adjusting the different layers of images in Photoshop to reduce the width and depth of drop shadows to make the image more compressible.

Do let me know if I have missed anything.


Tim Hawkins said...

11) use a content distribution network, such as akamai, CDNetworks, amazon Cloudfront or limelight.


12) use a separate domain for images etc, you can install a copy of lighthtpd to handle serving static resources. these lightweight web servers are optimized for serving static objects.

13) Use multiple virtual hosts for serving images, most browsers will only download two objects at the same time from each host, if you create multiple domains such as img1.mydomain.com, img2.mydomain,com .... you can increase the number of images that are being downloaded at the same time.

14) If you have a lot of small repeated images such as icons etc, consider using css sprites, this technique can dramatical improve load time for large numbers of small images.

Moin said...

Hi nice posting.. I appreciate your work.

Aashish Malve said...

Thanks Tim and Moin.

Andrew Long said...

Hm, good ideas to reduce bandwidth use.