In this article, i’ll show you a couple of techniques to compress web images for free by upto 94%. If you haven’t tried out WebP images for your website or portfolio, this tutorial will give you an insight on how much bandwidth you’ll save on your server if you use WebP images for your website, since they’re smaller in size compared to JPEGs and PNGs.

For any website project, you need to first retouch your images by editing and resizing them to suit your needs. For example, you can not use a 4000px picture because it would be too big. So here I’ll show you different ways to optimize your web images without losing the image quality. 

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Compress Web Images for Free by upto 94%

1. Start by Getting Image Sizes Right

There are two resizing tools we are going to look at, one is Photoshop (desktop version) and Photopea which you can access via a web page.

Using 3 different images I’m going to show you how to resize your images, then later you can learn to optimize/compress them even further.

Image 1 is 1.5MBs and 4000 pixels wide

Image 2 is 1.8MBs and  4000 pixels wide

Image 3 is 3MBs 4000 pixels wide

I’d like to resize them to 1200 pixels wide each.

Resizing Images using Photopea

Photopea works like Photoshop. You can access it via photopea.com and just follow these steps to resize:

Go to the Image File and open it, this will take you to another window where you can locate your image and select it to open it.

Click on Image and select Image Size

In the small window that opens, enter the dimensions you want for the image (in this case Width 1200 px), make sure the chain icon beside the height option is linked, in order for you to the image resize proportionally.

When you’re done click OK.

After this go to File, then to Export as, and from the options, you can choose any format you want. Here let’s use PNG. The reason for exporting as PNG is to preserve image transparency but can also be used for none transparent images.

When you’re done exporting, save.

When I go over to downloads (you can go to where you chose to save your downloads) and check in the image’s data, it’s still big, there was only a small reduction in the file size.

Resizing Images using Photoshop

In your Photoshop, Go to the image you want to resize, right-click and open with Photoshop.

When it opens up go to Image and choose Image Size then in the window that opens up enter the dimensions; 1200 pixels then say Okay.

The next step is to go to File and choose to Save for web, choose the JPEG option then set the quality 100%, then save.

When I go to my folder and check, the image file size is now way smaller compared to what photopea would get us

2. Converting JPEGs to WebP Images 

Next, we have to optimize a WebP image. However, all the images here are JPEGs.

To get a WebP file you can convert it using Photoshop or Photopea.

1. To convert using Photopea go to photopea.com and go to File, choose to open, locate your image and open it up

When it opens up go to File and Export as, go to More then choose WebP format.

2. To convert using Photoshop (CS6 in my case) just open your image with Photoshop, resize your image first then save it as a WebP file.

However, WebP format is not available in Photoshop CS6. So to be able to save to WebP you have to add a plugin that does that.

You can download the photoshop plugin here.

After downloading, unzip your file and copy it to your photoshop Applications folder; paste the plugin in the Plugins folder of your Photoshop. 

If you’re using Windows, find the Plugins folder in Local Disk C>Program Files>Adobe>Adobe Photoshop CS6>Plug-ins.

Back to Photoshop, now you can simply save as and choose to save in WebP file format. When you click save, you get a popup to choose the quality you want, set to 75 and save.

Now you have a WebP file in your folder.

The WebP image has been reduced the image file size significantly.

3. Compress Web Images for Free using Online Tools

To further optimize or compress your images for web usage, there are a couple of tools you can make use of for example:

1. Tiny PNG, you can simply drag your image to tinypng.com and have it optimized.
2. Image Optimizer works the same as tiny png.
3. Image Boost, this one also converts images to WebP by upto 30-60% without losing the image quality.

For this demo, I’m going to use Image Optimizer and Image Boost

In image optimizer; choose the Lossy compression type because it maintains image quality. Click the button to select images, go to your folder and select all the images you want to optimize.

In imgboost; select both PNG Lossy and WebP options, then go select the images you want to optimize. 

Image Optimizer has finished compressing, the WebP file was not optimized/compressed because it does not require any further compression. Download the optimised files.

Note: With imgboost you don’t have to upload your WebP files, only JPEG and PNGs. So first go back and save the image you had originally saved as WebP in Photoshop, to PNG, then upload it on image boost to be optimized. Then download the files.

So, when you look at both folders with images from both image optimizer and imgboost and compare the files, you’ll realize that the images optimized to WebP format are way lighter and in high quality.

The final optimized images turned out as follows:

Image 1 which was 4000 pixels wide and 1.5MBs is now 1200 pixels wide and 114KBs jpg and 76KBs in WebP

Image 2 was 4000 pixels wide and 1.8MBs and now is 1200 pixels wide and 346KBs in png and 115MBs in WebP

Image 3 was 4000 pixels wide and 3MBs and is now 1200 pixels wide and 177KBs in WebP

Also worth noting is that image optimizer seems to do a better job at compressing the files.

If you’re wondering whether WebP is compatible with your browser; yes it is. It is supported by Firefox, Edge, Opera, Chrome, OperaMini and partially on Safari (14:31). It is supported by major browsers and it is also from Google.

4. Using WebP Images on a Website

Now that you’ve completed the optimization of the images, it’s now time to try them out on a website! 

Go to your Elementor, then to the Media Library, then click the Add New button and select your WebP files and save them in the media library.

To try these images out go to your pages in Elementor, choose a page for your demo.

Go to Widgets, choose the Gallery widget and drag it to the section.

Also Read: 15 Fun Elementor Features You Don’t Know Exist

Go to your Media Library and select those WebP images, insert them into the gallery, 

Under Content; choose 3 columns, under Image Size choose Full

Under Layout make Content Width Full

Under Advanced under Padding of 50 on Top and Bottom.

These images can even be viewed in Media Lightbox.

In Conclusion

Now you how to compress web images for free but also know which image file sizes to expect and format to use. From JPEGs to PNGs to WebP files. You could give WebP files a try and test on your website. The WebP format is lighter and retains image quality meaning, less server resource usage and faster page loads.

For any comments or questions let me know in the comment box below. Please subscribe to my newsletter and my youtube channel for more tips and tutorials.