How To Resize & Compress Images For WordPress Websites
Have you ever wondered why some websites are faster than others? I hope it hasn’t kept you up at night? Well now you can rest.
There are a few reasons why this happens, but one main element is large image sizes used throughout your website.
Having your images resized to fit the layout and compressing them allows web pages to load faster.
Let’s find out how –
Ready to learn?
Step 1 – Resize Your Image / Photo
Usually after snapping a photo on your phone camera (and these days these cameras are pretty good) you will end up with a large high-quality photo.
Digital images are usually measured by ‘pixels’ and let’s say your photo is 3000 x 1500px. Images this high in resolution are usually high in file size. This is what’s slowing your website load time!
You want to resize/crop this image for the specific area of your web page. It’s hard to say without seeing your layout, but something half this size should be a good place to start.
Quick Note: Most modern page builders can contain your image so it doesn’t fly off the page for being to big. So your resize doesn’t have to be perfectly sized.
Do you have the application to resize and crop? Here are a few that may help –
- Preview – FREE (Mac)
- Adobe Photoshop – Paid (Mac & PC)
- BatchPhoto – FREE (PC)
- PhotoSize – FREE (Online Tool)
Step 2 – Compress Your Image
Now that you have resized your image and reduced the file size, it’s time to compress it. Basically we are squeezing the image down in file size even more but keeping the quality.
There are a few ways of doing this. I recommend using these applications –
Online Tools
Tiny PNG – Smart PNG and JPEG compression
This is an online solution that’s easy and done in seconds. You can compress up to 20 files with 5MB max each at a time.
Quick Note: Doing this doesn’t affect your image quality. How great is that!
Here’s how to use Tiny PNG:
- Visit tinypng.com
- Drag your file(s) or click the upload icon in the center to select your files from your computer.
- After that friendly panda has finished squeezing your file, simply click ‘download’ or ‘Download All’ to access your new files.
That’s it! You have smaller sized file with the same image quality as before. Choice.
WordPress Plugins
If you find the above way to fiddly, you can simply add a WordPress plugin instead. There are a few plugins that are decent. Here’s 2 of them:
Smush is a award winning image optimizer. It’s as easy as uploading your images to WordPress and Smush will compress and also strip hidden bulky information your image doesn’t need.
The only downside is the FREE version doesn’t compress your image as much as it should. If you pay for the premium version this plugin will compress your image without being shy.
(If you have a website with me or plan to get one, the FREE version of this plugin with be installed already)
Compress JPEG & PNG Images Plugin
This plugin is developed by the same people at ‘Tiny PNG’. The friendly panda can also help you within your WordPress installation.
This plugin is the same idea as ‘Smush’ and automatically compresses your image on upload.
From memory the only downside is the FREE version doesn’t compress as much as it’s potential and the premium version is the better option. It really depends on your budget.
There are other plugins available so please search the WordPress directory.
If your budget is tight I recommend using the manual way of uploading your images to the ‘Tiny PNG’ website and combining with one of the plugins mentioned.
DONE! You have gone through the image resize and compression process for your WordPress website.
BUT HOLD ON! There are a few more steps that you may need to know.
Step 3 – Renaming Your Images
Now this step is optional and has nothing to do with compression, but your web designer will love you and it keeps your files clean and findable.
Simply renaming your image files can keep them organised and findable when uploading to WordPress. Google may be able to find them in image searches too. Also get into the habit of giving your image ‘Alt Text’.
Step 4 – Uploading Image To WordPress
Now at this stage your resize/compression has been completed. So CONGRATULATIONS you have some images ready for web.
Uploading to WordPress is quite straightforward. Here’s how –
- Login to your WordPress installation.
- On the left hover over ‘Media’ and click ‘Add New’.
- Click ‘Select Files’.
- Select your files from the saved destination.
Quick Note: If you have installed a compression plugin your files will be compressed on upload.
Extra Step – Adding Image To WPBakery Page Builder
All WordPress page builders and themes are different, so adding images to a page can vary, but all will be a similar process.
For this particular example I will use The7 Theme and WP Bakery Page Builder as an example. (If you have a website with me already, this step will be perfect for you)
1. On the left hand side of your admin panel click ‘Pages’.
2. Find the page you want to add an image to/or change and click on it.
3. Click the ‘+’ which is located top left of the page builder or within the page. This all depends if you want to add a new image or change an existing. If you want to change an existing, find image on page, hover over and click the pencil icon. Then follow from step 5.
4. Find the element named ‘Single Image’ and click on it (There are others you can use for multiple images at once).
5. Click the’+’ under ‘Image’.
6. Find your image or upload now. Click ‘Set Image’ button bottom right.
7. Scroll down on the ‘Single Image Settings’ and select the settings to suit (I usually have ‘Full’ as my Image Size which will keep the image as the original size).
8. Click ‘Save Changes’.
9. Click ‘Preview Changes’ button top right to see your image.
10. If your image looks good click the ‘Update’ or ‘Publish’ button far right hand side.
I can guarantee image size is a key factor in website loading time. Here are some more key ways for optimizing your website speed.
Thanks for reading and please get in touch if you’re wanting a fast professional website developed today.
