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.