This post was most recently updated on March 4th, 2020
Popular image optimisation plugins will reduce your image size by about 10-20% for free. To reduce them further, you get to pay for the privilege. A plugin for shrinking image file size really is the easy option. But reducing a 2mb image by 10 or even 20% is still 1,600-1,800 kB. Still far too big!
Please read: This information is provided for educational purposes only and is not intended to treat, diagnose or prevent any disease. We encourage you to make your own health care decisions in partnership with a qualified health care professional.
This post contains affiliate links, this means at no extra cost to you, we make a commission from sales. Please read our Disclosure Statement
Eventually, I worked out how to easily and safely bulk resize images on WordPress without a plugin, for free!
** Disclaimer – What follows are the instructions that worked perfectly for me on my blog. I take no responsibility for how it goes for you or your website. Undertake this at your own risk and PLEASE backup your site. Download all the files and store them somewhere safe BEFORE you start messing with them!
What is the optimum image size for the web?
There are two ways to measure images – pixel dimensions and file size (kind of like width/height and weight).
A full-width image is usually 700-900 px (pixels) wide. This is a distance measurement. A 700px wide image can be 2 gigabytes (GB) or 30 kilobytes (kB) in file size. This is the weight, or the amount of space it takes up on your server or computer.
A wide or tall image will need to be more kB than a tiny image to look crisp. But there is a balance to be had. Too small a file size and your image will look pixelated and grainy, too large and it will take forever to load.
Generally, a full-width image at 700px wide can be squished down to 80-100 kB in file size before most people will notice any difference.
Some would argue that unless people are to download your images and print them off, that nothing on your site should be more than 200kB.
I have resized all of my images to 100kB on my blog and I cannot believe how much faster my pages load.
Also by doing this I have reduced my website’s total folder size from 1.5GB to 475 MB. So it is now less than 1/3 of what it was before, that is a 70% image size reduction – for free!
How did I optimize my WordPress images for FREE without a plugin?
I resized my images by using a couple of snazzy open source, free programs. You can also watermark each of your images as you go, without adding any work to the process.
I have no affiliation with these companies, I have just used them for years and really appreciate their free-ness and the amount of support and tutorials that there are for them. #SecretlyANerd
Useful tools for optimising your images:
IRFANVIEW
Irfanview is the miracle worker.
- Download the program on the website (I use Windows 10 and got the 32bit option) and install it.
- Under “FossHub – download IrfanView Plugins” on this page, download the appropriate “all plugins” option for the type of Irfanview that you have (32bit for 32bit, 64 for 64) and install them.
FILEZILLA
FileZilla is a FTP client, it allows you to download, upload, delete and move files on your website’s server. Alternatively, you can use any client that you already have installed.
To get FileZilla: click here and download + install “FileZilla Client”
INKSCAPE
You can use Inkscape to add a watermark to your images. It will let you create an opaque .png version of your logo. It is a fabulous, free, fully functioning vector graphics program.
You can save partially see-through images as Bitmaps (.png files). If you already have an image that you would like to use as a watermark, Irfanview has an option to make it translucent.
Before getting started with optimising
SET UP FILEZILLA
To set up FileZilla, you need your FTP log-on details. If you don’t have them, your host should be able to give them to you.
They look like this:
Host: yourwebsite.com Username: yourwebsite Password: xxxxx Portal: 21
Open FileZilla and enter these details in the pane at the top:
Then click “Quickconnect”. This will log you into the back end of your website.
On the left, you’ll find the files and folders on your computer; on the right are the files and folders on your server.
Better safe than sorry: backup your website.
Download a copy of your website on to your computer. If you stuff anything up, you will have a backup copy to replace it with.
Find the file on the lower right-handside that says “yourwebsite.com”, right click on it and select download. Another option is to drag and drop it from the lower right panel into the lower left panel – preferably somewhere obvious like your desktop.
This will take a while to completely download.
Another option is to use the plugin Updraft Plus.
While your website is downloading, you can set up Irfanview.
How to set up Irfanview for batch processing images
- Create a new folder
Create a new folder on your desktop called something that you will remember like “processed images”. - Open Irfanview
Click on File>Batch Conversion/ Rename…
It will bring up a box that will look like this:
At the top left, select the option “Batch Conversion”.
3. Choose your settings
Under “Output format” select JPEG from the dropdown box. You can choose other options, but Jpegs are the smallest file type and most widely used. PNGs can be huge, don’t pick PNG unless your images require a transparent background.
** Note: If your website is full of PNGs you can process them through Irfanview and turn them into smaller Jpegs. However you will have to manually upload and replace them through the front end of WordPress using their media uploader.
Click “options”, it brings up this:
Select “Set File Size”. I set mine to 50kB: this is the size of the file that it will put out. Leave everything else as default.
Next step down tick the box for “Use Advanced Options” then click on “Advanced” and you will find this:
I resized mine to 700px wide as this is as wide as my full screen post width on my blog.
I selected “Don’t resize smaller images” down the bottom on the left hand column.
In the middle column I checked “Add watermark image” and then opened the “Settings” button. This brings up something like this:
- Add a watermark (optional)
You can select your logo image here to use as a watermark. I set the transparency to 20% which makes it 80% solid. I also offset it by 10 and 10 px to keep the logo off of the edge of the image.
In the right hand column, select“Keep Original Date/Time”.
Select your output file location & type
Back on this screen:
“Output Directory for results files”. Select the Processed_images folder you created on the desktop. This is where your processed files are sent when you process them.
In the “Files of Type” drop-down (under the small file-viewing window on the right), select Jpeg.
You can go through this process again with it selected to PNG if you have many PNGs on your site. I don’t recommend doing them all at once as the PNGs > JPGs will be all mixed in together with your processed JPG>JPGs in your “processed images” folder. The PNGs need to be manually replaced with their corresponding JPGs via the media uploader on WordPress.
- Once your site is downloaded or backed up
By now, your website files will be downloaded (see “before we get started”). Disconnect Filezilla so you don’t accidentally break something while you are mucking around with your image files.
Once your backup is downloaded, right click on the folder and choose “properties” to see your website’s total size – just so you can compare at the end!
One last thing – find your uploads file in your newly downloaded website folder and copy it to your desktop and rename it “Uploads_Clone” or similar. You can find it here yourname.com>wp-content>uploads.
Bulk resizing images on WordPress in Irfanview
Go back to Irfanview and in the top right file view window find your Uploads_Clone file. I had to go Users>Admin>Desktop>Uploads_Clone to find mine.
Open the Uploads_Clone file. The files here are named all the years that you have been blogging. Choose the first year and open it. Within it are the numbers of the months that you uploaded images. Some may only contain an index file if you didn’t upload any images.
Choose the first number in the list and double click to open it. It will bring up a list of files. If you choose the details option from the drop down like this:
It will now show you the size of the files. Click “size” to rearrange the files from biggest to smallest.
Select the biggest file at the top, scroll down to the file that is slightly bigger than what you have your output size set to, hold down shift and click on it. This will select all files bigger than your chosen output size.
**Note: I have had the occasional issue with Irfanview crashing when I asked it to process too many images at once. If that happens to you simply select 50-100 images to process at each time and do it in a few stages.
Now that you have selected your images, you can either click “Add” or drag and drop them into the box at the bottom like in the above image.
Push “Batch” and watch the magic happen.
Once it is complete, push “Return to Batch”.
Next, check the files that have been processed.
Open your Processed_images folder on the desktop and look at your processed files in an image viewer. If they’re not what you were hoping for, delete them from your “processed images folder”, then tweak your settings and process them again.
Once you are happy with them, open the Uploads_Clone folder on your desktop and find the appropriate year and month’s sub-folder.
Select the newly batched images all in your new folder and drag them into your Uploads_Clone sub-file (this should delete them from your Processed_images folder, if it doesn’t then you can delete them yourself). When prompted, choose to replace all the old files.
Rinse and repeat with each year and months files until your Uploads_Clone folder contains all the new sized images.
PROCESSING PNG IMAGES
If you have PNG images to process, repeat the same, but this time leave them all in your Processed_images file so you know where to find them when you need to upload them via WordPress Media Uploader. Once you have uploaded them to your media library you can find the corresponding PNG image in a post, click on it, then select replace image. You then choose the Jpeg image to swap into its place.
A lot of work, I know, but next time don’t use PNG’s on your website!
How to Get Newly Optimized Images on to WordPress
The next step is fairly methodical.
Once you have all your newly sized and optimized images in your Uploads_Clone file, there are two options to choose from:
A) Go through each year and month and upload them to the corresponding folders on the right hand side of FileZilla. When prompted, select the option to overwrite conflicting files if there is a size difference and skip files that are already there.
B) Upload the whole Uploads_Clone file to yourname.com>wp-content>. Once it is there, delete the old file called “Uploads” and rename your Uploads_Clone file to simply “Uploads”.
Personally, I felt safer doing it one set of images at a time. But it is up to you.
Because the new images are in the exact same folder location and have the exact same file name that they always had, WordPress will presume that they are the exact same files and access them as such.
ONE LAST THING…
When you’re done, don’t forget to clear any caches that you may have if you use a caching plugin and clear your browser’s cache too.
If you compare your Upload_Clone folder size to the original Uploads folder that you downloaded, you will see what a massive difference that you have made.
Have you optimized your WordPress website images without using a plugin? How did you do it? Let us know in the comments below.
Please share with your blogging friends!
