How to Optimize Images for Web

If you own a website and you are not resizing your image in terms of file size then I have some bad news for you, large images slow down your websites loading times.

There are some scary numbers with regards to slow websites, here are some of the numbers: Data from KISS Metrics - 1 second delay could lead to a 7% reduction in conversion - 47% of customers expect a page to load in 2 seconds or less - 40% of people abandon a website that takes longer than 3 seconds to load

Those are some scary numbers. There are a few ways to improve your page load times.

How to improve page load times:

  • Enable compression for your site
  • Enable browsing cache
  • Minimize requests to the server
  • Reduce the number of plugins
  • Use a CDN for images etc.
  • Optimize images

These are some of the main ways that you can use to improve your site speed. As mentioned above, a 1 second delay can lead to a 7% drop in conversion rate, which is not a small amount.

By implementing some of these tips above you could potentially increase your conversion rate by over 7%!

So what is this blog post about? Well can help you with one of those tasks. Large images can have a big effect on page load times. The bigger the image in terms of file size, the more bandwidth is needed for your users to get that image to their browsers.

By reducing the size of your image you can speed up your site and potentially convert more users.

There are two simple ways of improving site speed by optimizing images. One way is to reduce the number of pixels in the image and the other way is to lower the quality of the image.

Both of these techniques work great and are extremely easy to do with If you wanted to you could even combine both of these techniques and really improve your image load times.

So, how do you use I have got added two tutorials below to help you resize your images with, they are quick and easy and remember, if you wanted to you could combine the two techniques to make your images load even faster!

How to resize my image:

Resizing images is a popular way to reduced the amount of disk space that an image takes up as well as improving page load times on websites.

To resize your image using our online tool all you need to do is open the app in your browser by visiting clicking here.

Once you are on the website you can either drag and drop your images onto the file icon(just above where it says “Drag and Drop”) or you can click on the file icon which will prompt you to select the files you want to resize.

Once you have selected the file that you want to resize the website will scroll to the settings. The settings are split into three columns. Resize, Rotate and Output are the three settings columns.

To resize your image you will set a width or a height. If you just set the width then the height will be automatically calculated based on the aspect ratio of the image and vice versa.

To set the width you need to do this: Image Resizer Online resize using pixels

In the example I used a width of 200 pixels. You need to select the correct size for your use case. If you do not know what size it needs to be just play around with setting until you find what the best setting is and then use that.

How to change the quality of my image

Another popular technique to reducing image file size is to lower the quality of the image or images in question. Before we get into the details of how to do this please note that if you have selected PNG as the output format, the quality setting will not work. To optimize the quality of a PNG file you can use a tool called TinyPNG which is a great tool.

To do this with you can drag and drop your image or select the image as explained above.

The difference comes in with the settings. In this example we will not be using the resize column but instead we will be using the output column.

To reduce the quality, look at the last setting in the output column. It will be titled “Quality”.

Image Resizer Online resize using percentage

In this example I set it to 60. This is a good general setting. It will generally keep a lot of the quality of the image while at the same reducing the file size quite dramatically.


Both of these techniques are great. My personal favourite way of reducing image file size is to use both of these techniques to get the image to a point where it would load quickly.

But if you want to take your image loading to speed to another level you might want to try out ImageOptim. This will reduce the file size even more!