Why should I optimise images you might ask?

Well, it improves the load time of your website, this is because there is less for the browser to download. This is more exaggerated for mobile devices where the user is accessing your website via mobile data and therefore has a slower (normally) internet connection than someone on Wi-Fi, so in this case less is more!

We have all gone to a website where they have a large image and you can see lines being drawn across your browser as it loads and renders the image and it is one of the most annoying issues whilst waiting for a page to load.

What can we do about this then?

You can use different image types, this is because some are smaller than others (e.g. a .jpg file is smaller than a .png file of the same image).

This is due to the quality of the image and whether the format is loss-less or not.

The image that I used I got from:

http://www.wallpaper-studio.com/desktop/Landscape/Green%20Park%20Corner.png

Its dimensions are 2559 x 1437 & it is a .png

To optimize images there are a few options.

If the image is a .png then one of the easiest ways is to do the following:

1. Get some image manipulation software (I personally use paint.NET http://www.getpaint.net/, whilst this isn't the most advanced software on the market it performs all of the functions that I need & more!)
2. Open up the image (File > Open > Navigate to image > Click Image > Click Open)
3. Save the image as .jpg (File > Save As > Choose file name > Set type as JPEG > Save)
   1. This will then open a window which will prompt you to choose the quality.
   2. I normally select 95, this is because it is a good balance between the file size and the quality. (You can choose a higher or lower percentage depending on your circumstances. This can include the size of the image and where you are going to use it)
   3. At the top of this windows you will see the file size. This updates dynamically as you move the slider.
4. Compare the difference in file size
   1. Before as .png (original): 6.10MB
   2. After as jpg (100% quality): 2.89MB
   3. After as jpg (95% quality): 1.40MB
   4. After as jpg (90% quality): 1.03MB

As you can see this is already a massive saving.

But what if the image was still too large for where it is going to be used (in dimensions e.g. width by height)? In my case (I needed an image that was 400px by 225px).

If so then using paint.NET you can resize an image very easily, to do this do the following:

1. Open up the image (File > Open > Navigate to image > Click Image > Click Open)
2. Click the Image option from the header, then resize.
3. You can then choose whether you want to resize the image by a percentage or by absolute size. (The majority of the time you will want to use absolute size, so that you can get a specific size)
4. Ensure that maintain aspect ratio is selected, otherwise when you resize your image can get distorted.
5. Choose your desired Width OR Height
   1. You will notice that when you change one of these then the other will change.
6. It will then notify you of the new size at the top of the window
7. Click OK
8. Compare the difference in file size
   1. Resized and saved as .png: 221KB
   2. Resized and saved as jpg (100% quality): 86KB

But what kind of saving can I make if I use both of these simple techniques you ask, well if I resize the image and lower its quality then the results are:
Original .png: 6247.6KB (6.1MB)
Smaller jpg (saved as 90% quality): 31.2KB

This is a massive saving of 6216.4KB (198%) which will greatly improve the load time of my page.

I hope that this blog post was useful, if you have any comments regarding how to optimize your images then let us know!