Home / Articles / Website Creation / How to Reduce Image Size for Your Websites (Without Losing Quality)

How to Reduce Image Size for Your Websites (Without Losing Quality)

how to reduce image size

Reducing website image size is essential to ensure your visitors get an optimal experience. Being so “heavy” means images also cause more extended page load times, which Google hates. Leaving unoptimized images can result in Search Engine Results Page (SERP) ranking consequences.

Website owners often have a love-hate relationship with pictures. We love them for the rich experience they can provide our users. Yet images often cause a disproportionate amount of resource overhead. To avoid this, we can work to reduce image sizes in various ways;

  1. Manually resizing images
  2. Using picture compression
  3. Converting images to other formats
  4. Using a WordPress plugin

How to Shrink an Image File Size

Remember that shrinking an image size means cutting down on the file size, not just decreasing pixel dimensions. 

1. Using an Image Editor

MS paint

The most straightforward way of reducing image size is to use a tool like Microsoft Paint (or GIMP if you’re on Linux). I downloaded a relatively large file in the image above, originally 3724 x 2400 pixels in dimension. It took up 1.2MB, which is significant for web use.

Opening that in Microsoft Paint, I resized it to 1024 pixel width with a proportional downscale in height. That resulted in a photo of 1024 x 659 pixels at only 273kb size. As you can see, the photo file size reduction saved over five times the original file size.

2. Using Image Compression

Image compression

Image compression can help further reduce image sizes. Each picture contains components like color quality, pixel density, and more. The better the quality, the more data the photo has, and hence it occupies a larger size.

We don’t always need the best quality images for web use, especially in this age of mobile devices. Because of that, you can compress images with an online tool like Optimizilla. This tool allows you to control image quality to reduce image size.

By setting an image quality of 70, I reduced the scaled-down image from 274kb to less than 80kb. Remember, this is compared to the original image size of over 1.2MB.

3. Converting Images to Other Formats

Online Convert

Images come in various types, which affect their quality and file size. For example, the same picture in JPG could be considerably smaller than the same in BMP format. Today, many websites are moving towards next-generation image formats like WebP.

Again, by using an online tool like Online Convert, I can quickly swap the original wolf picture from JPG to WebP format. This change resulted in more size savings, with the WebP file now only 28.7kb. 

4. Use a WordPress Plugin

Smush

If you need to process multiple images and run a WordPress website, there’s an even better option. Image optimization plugins can do all the above even without your intervention. Examples of reputable image optimization plugins include EWWW Optimizer, Image Smush, and Imagify.

The advantage of using these plugins is that they can work independently, and you won’t need to worry once you have things set up. However, using plugins adds to overall resource consumption on your website, so choose your plugins wisely.

Final Thought on Reducing Image File Sizes

The various methods shown aren’t mutually exclusive. You can choose to use one, two, or all three, and the results will generally only improve. The main objective is to reduce file sizes as much as possible without sacrificing too much image quality.

Remember that the lighter your website is, the more advantageous it is to your readers and you. They get a smoother loading experience while you pay less for storage and bandwidth. It’s a win-win situation.

Read More

Photo of author

Article by Jason Chow

Keep Reading