How to optimize images for the Web?

One of the most important success factors for websites and mobile apps are page load times. Users simply don't like to wait for pages to load. Reducing page load times will improve website usability (especially for mobile users) and:

• reduce bounce rates
• increase conversion rates

There are many ways to improve response times. This includes minifying css and javascript, loading javascript at the bottom of the page, using browser caching, combining small images into CSS sprites, enabling compression etc. But I would like to focus on optimising images, as this is one of the simplest steps you can take to significantly improve your page load times.

In most cases it is possible to reduce the size of an image.

Example:
Let's say we have a website or a blog post with four photos 300 kB each. If we reduce the size of each picture from 300kB to 100 kB, we will save 800kB (0,8 MB) on a single page view. If the page is displayed 1000 times a day, we will save 800MB. This gives us 24 GB savings in a month!

How image size can be reduced?

1. Select the right format for the image. The rule of thumb is to store photos in JPG, but drawings and charts in PNG. For more information about choosing the right format see PNG or JPG format.
2. Photos taken by cameras and smartphones add some extra information, like manufacturer, date and even geolocation data, to picture files. This metadata information is often redundant when a picture is published on a website and it can be removed.
3. Define accurate image dimensions (width and height) to match the required design. If the dimensions of your image are larger than required, browsers will need to scale it every time someone requests your page. Loading and scaling large images increases page load times.
4. Slightly decrease the image quality. Don’t be alarmed as small changes shouldn’t be noticeable. A human eye is not able to detect all of almost 17 million colours, which can be stored in an image file.

Simple Image Optimizer helps you in points 2, 3 and 4. Check it out!