How to Reduce Image Size on Your Website

Youssuf Abramo

Introduction

Images are one of the main reasons your page might load slowly. That’s why there are certain tips you should follow to reduce image size as much as possible.

Keep in mind, this article isn’t about performance optimization in general. Just so you know—these tips are not the only methods out there, but they’re suggested ones. You might even find better options depending on your needs.

Factors that determine image size

Basically, there are a few factors that affect the overall size of an image, whether on the web or elsewhere:

Image dimensions
Image quality
Image format
Number of colors in the image

Ways to reduce image size

We’ll use a few different methods to adjust the above factors—so we can shrink image size without making the quality noticeably worse.

In this article, I’ll share 3 super easy methods. Make sure to read all of them, because in each one I’ll mention tips that aren’t repeated in the others:

Editing the image with Photoshop
Editing the image using an online tool
Using plugins

1 – First method: Edit the image with Photoshop
Whether you designed the image yourself or just downloaded it from Google, open it in Photoshop and save it specifically for web, not just a regular “Save As.”
To do that, press Ctrl+Alt+Shift+S on your keyboard, or go to File > Save for Web.

A big window will pop up. From there, choose the image format jpg/jpeg, since this is one of the formats that takes up the least space.

But what if you have an icon or a transparent image? In that case, give it a background that matches your site’s background—so you can avoid using PNG, because PNG files take up a lot more space.

Then, set the exact image dimensions to match the div or box where you’ll use the image, so you’re not saving extra unnecessary pixels.

Finally, adjust the quality setting. Start lowering it gradually until you notice the image quality gets visibly worse—then go back to the last setting where it still looked fine. Hit Save and you’re done!

2 – Second method: Edit the image with an online tool
Take your image and go to any online site that lets you resize or change image formats. Set the dimensions to match your div, choose jpeg/jpg as the format, and then head to www.compressor.io.

Upload your image there, let it compress, and then download it. That’s it—it’s super easy, and honestly, this is the method I personally use.

The cool part? It can reduce file size by up to 50% (sometimes even more). It also has a tool that lets you compare the old image with the new one, and usually there’s no visible difference at all. You might not even be able to tell them apart!

3 – Third method: Use plugins
Finally, there’s the plugin method. The advantage here is that the plugin does everything automatically for you—no hassle. Just install the plugin, run “optimize” or “resize,” and that’s it.

From then on, any new images you upload will also be optimized with just one click.

Here are some of the most popular plugins for this:
(list continues…)