What this means is that whenever your readers or customers are waiting for your web page to finish loading, there’s a good chance they are waiting for your image files to finish downloading from your server to their computer. What this means, is that big image files are a big problem. This becomes a huge problem because for every second your users have to wait, you are losing potential customers. So, if you run a website, it’s in your best interest to learn the art and science of Image Web Optimization. Knowledge of image web optimization can cut your users wait time. Image web optimization focuses on reducing the size of the image, without compromising on the quality of the image. If you learn how to do image web optimization correctly, you can reduce the image file size without any noticeable quality loss at all. It will be very difficult for the casual web visitor to perceive any difference in image quality. Web optimized images can be reduced to almost a fifth of the original image file. Below is an image of a before and after effect of image web optimization on an image file.
As you can see from the image above the two images look identical but the image file sizes are not the same. The web optimized image which is 665 Kilobytes (after), is almost a fifth of the original image 4,583 Kilobytes (before). Also notice how the web optimized image has not lost its quality.
The original image is 2,136 Kilobytes and the web optimized image is 623 Kilobytes. The original image has been cut down to almost a third. I know by now you are wondering… What is the trick? How do I do it? HOW TO DO IMAGE WEB OPTIMIZATION We will use the above Google+ default image in our example. Remember that the original Google+ image is 2,136 Kilobytes. To optimize this image, we are going to use Adobe Photoshop Elements as our image editing software since it is the industry’s standard. Step 1: Open the adobe Photoshop software on your computer and then open the image you want to web optimize (In our case the 2,136 Kilobyte Google+ JPEG image file).
Step 2: Click on the file menu then scroll down to “Save for Web…” or the short cut keys combination; (Alt+Shift+Ctrl+S )
Side note :
This opens up the Photoshop Save for Web interface below. From this interface, we can see our original image at the top and the web optimized image we are about to create at the bottom. On the top right corner of our interface, you will notice that we have our image format set to JPEG, which is appropriate for this image. On the image format drop down menu, you can select a different image format. Proper Image format selection is a huge topic in itself. Step 3: Just below the image format selector, move the image quality slider.
By moving the slider all the way to zero quality, the size of the image will become small but the image will not look good. It will look a bit blurry, which is not what we want. By moving the quality slider all the way to 100 the image will look good, but the image file will be very large. This is also not what we want. In image web optimization, our goal is to keep the image size small without making our image quality “suffer”. We have to keep moving the image quality down until we reach to a point where we are comfortable with both the size and the quality of our image. Step 4: Move the image quality slider to a point where image size is reduced without affecting image quality.
In our example above, the quality of our image begins to “suffer” at below 50%. So for example, I can set the image quality at around 65%. At 65%, the image size is small and the quality of the image is not affected. The bottom left corner tells us what the image size will be when we save it. In our example, the final image size is 572.9 Kilobytes. This is about a quarter the size of the original image. Step 5: Save the image. At the bottom of the Photoshop Save for Web interface, you will find a save button. Click on this button to save your web optimized image. From this tutorial, we can appreciate the value of image web optimization. If we assume every image on the web page had similar poor optimization, then we can cut the file load of that web page in half using this technique. I hope from this article you have learnt more on web optimization. I encourage you to apply this technique to your own website, it will make a BIG difference for your website users. Improving web performance and giving a better experience to our users is our job as developers and designers.