Nowadays it is utmost important for a website. Just think yourself, if a website takes too much time to open, would you like to see it again? I don't think no one would. But this does not mean that just compress the image and put it. You need to know the proper image optimization for a website. So let's start.

Image Compressing

This is the first step for image optimization. You have to compress in such a way that the quality is not damaged and compressed to the lowest level. If you are using Photoshop, then use export > save for web, and set the value of quality from 60 to 65, which is the best value for website images. Apart from this, I sometimes take help of online tools for compression. Just have a look at these websites:

Actual resolution based image size

Often people make large images and resize them in CSS or HTML. It's not a good idea. A large image consumes a lot of unwanted bytes, which will make your website slow down. Try to use the actual view resolution of images which you want to display in websites. Don't resize it in at least full-screen view.

Correct extension of images

If your image requires minimal colors then you can use the .gif extension. It is mostly used for looping backgrounds and single color icons. For transparent images, you can use the .png extension. And for the regular images, the .jpg extension is there. Don't use HDR or Full HD or very sharp edge images. This will produce extremely large files. If you don't have a replacement, resize the image to actual view resolution and apply slight blur effect.

Proper Alternate Text

The alt tag is for SEO Optimization. Alternate text can standout your website in search engines. Write the proper Alt tag relating to the display image. The search engines will discover your image or webpage by reading the alt text. So don't leave it empty and be careful while writing the text.

CSS Image Sprites

This one is core optimization. You need to give 1-2 hours to learn. Search "CSS image sprites" in Google or YouTube. What will it do, turn all the HTTP requests of images into one. So that, your website will come faster. You can use Photoshop plugin or use online tools to make sprites. Check some of them below:

I suggest you to make three sprites. One is for all .gif images, one is for all .png images and one is for all .jpg images. This will save a lot of unwanted bytes.