5 ways reduce image size to speed up website


Introduction

When traveling, most people take picture using the smart phone. The pictures’ dimensions are 3600 x 2400 pixels or higher. The file size is more than MB, or even GB. When you upload the images to the website, it will slow down the page loading because the image size is too big. You have to reduce image size for quick page load and improve SEO.

The truth is to display the images on computer or device screen, you don’t need this high resolutions. The image with 800 x 600 pixels will be good enough and not scarify the qualify. The file size should be around 200~500 KB. If you compress the file, the file size can be reduced down to 2 digits of KB. That will be ideal for web images.

There are two steps to reach this goal.  First is to reduce the dimensions from original to 800 x 600 pixels or below. The second is compress the image. Here I’m going to show you 5 ways to reduce image size.

1. Reduce image size by Paint

The easiest way is to use the free software on your computer. If you use windows, you can use Paint. If you use Mac, Paintbrush is good alternative choice. They all provides the capability of Resize.

After you open Paint, drag you image inside Paint and Click Resize at the top left menu. The small pop up opens. With the radio button “Percentage” is selected, enter 50 for both Horizontal and Vertical, then click OK. At the bottom status bar, you can see the original dimensions have been reduced in half. You can repeat this one more time to make the image even smaller.

resize in paint

Next, select File- > save as -> JPEG picture, and save to your hard drive. Now the file size is only 1/10 of the original image.

2. Reduce image size by Photoshop

If you installed Adobe Photoshop on your computer, you can use it. Drag the image to the Photoshop. From top menu, select Image -> Image size. In the dimensions section, change the width to 800. The height will be changed automatically if you keep the ratio.  

resize in photoshop

Select File -> Save as, save as type is JPEG. Then save to your hard drive. The new jpeg file will be saved on hard drive, the size is around 500KB.

3. Reduce image size by online tools

If you don’t like to use Paint or Photoshop, you can use free online tools. When you search “online resize image tools”, there are many options. I found resizeimage.net is easy to use.

resize with tool

First click “Upload an image” button, and select the file from your hard drive. After the images is loaded,  go to section “4. Resize your image”. With Keep Aspect Ratio checked, enter  800. Then click “Resize image” button at the bottom. You will see the New Image and its size displayed. Click the “Download image” link, you will get resized image in your download folder. Copy and rename the new image.

resize with tool

4. Compress file with Squoosh.app

The resized images have the file size around 200KB ~ 500 KB. you can use the above methods to reduce the dimension further, if the image will be used as a thumbnail in your website.

But if this image is used as a feature image, you should not reduce the dimension. Otherwise the image will look in poor quality in website.

Instead you can still reduce image file size by compress the file. Google suggests you use next-gen formats, such as JPEG 2000, JPEG XR or WebP. I tried these format, they have this or that problems.

google insights next-gen formats

After trying a few software, I found Google’s Squoosh.app is most easy and effective to compress the image files. You can open it by going to https://squoosh.app/ in your browser. Drag the image inside. Leave it with default setting, which is “MozJPEG” compress and Quality 75%, the file size has been reduced down to 100KB.

Now you can drag the blue line in the middle. The left area is uncompressed, the right side is compressed. You can play with different Compress format and quality percentage, and compare the qualify of image between left and right areas. Your goal is to find the good balance between the (acceptable) quality and (low) image size.

compress image with squoosh

After you are happy with the result, click the blue download button at the low right corner to get the new file.

5. Compress file with WordPress plugin

If you build website with WordPress, you can use WordPress plugins to compress file. I’m using plugin Smush. The free version works fine. When you load new image, it compresses the file for you automatically.

compress image with wordpress smush

Conclusion

In this post, I introduces 5 ways to reduce image size to speed up your website. They are

  1. Reduce image sizse by Paint (Paintbrush)
  2. Reduce image sizse by Photoshop
  3. Reduce image size by online tools
  4. Compress file by Squoosh.app
  5. Compress file by WordPress plugin

Using the above methods, you can adjust the images in you website, and tune for each page. Eventually your whole website loading will be faster. The overall performance and SEO of your website will improve. This will help to make your site rank higher in Google search.

Please check out this post on how I moved web hosting for better performance and SEO.

Comments are closed