Resize Your Images for WordPress Use – A ‘How To’ Guide

Resize Your Images for WordPress Use – A ‘How To’ Guide

Resize Your Images for WordPress Use – A ‘How To’ Guide

In this ‘How To’ I’m sharing a simple process to batch resize (& reduce file size of) images for WordPress use. Having worked on many websites where image content is very important, photography sites being the classic example, it’s long been important for me to be able to easily resize images for WordPress use but it’s also important that my clients understand how to do this.

WordPress is great, but when working with lots of photos it really is important to be sure they’re of a suitable viewing size (& file size). Skip straight to ‘Resizing Your Images for WordPress’ below for the How To, first though here are 2 reasons it’s important to resize images (in particular reduce large, quality photos) before use with WordPress:

‘WordPress Cannot Upload Images’?

Ever had this problem? Does ‘this file exceeds the maximum upload size for this site’ ring a bell? It’s common to find your WordPress site limited to 2MB uploads, and quality digital photos are rather huge without reduction (5MB sizes aren’t uncommon). You can increase that upload size but it’s actually more than enough for most things. With a reduction & compression of your image sizes the problem disappears! Over many years of image processing I’ve rarely seen any good reason for a full-screen web image to be much above 0.4MB (& smaller ones can feasibly go under 50KB). With the steps below this is achievable without any real discernible loss in image quality.

Smaller Images = A Faster Site = Better Google Rankings

The other huge reason to resize your images is the effect on your website’s speed. The larger the image sizes, the slower the page loads. The slower the page loads the less professional it feels to visitors, & the more frustrated they’ll get with the experience of viewing your site (& the more likely they are to leave & head off elsewhere). What’s more Google takes site speed into account when deciding how high your site appears in the search results, so keep your site fast to help your site’s SEO.

Resizing Your Images for WordPress

For the process we’ll be using the excellent Freeware image batch converter software XnConvert which I’ve found is perfect for the job, so first head over here to download your copy

1. Gather your images

Big Image Sizes for auto-resizingI’m going to use 4 images for this guide. They’re straight from my digital camera & as such are rather hefty, both in display size (3000 x 2000 pixels for example) & file size (5.23MB? Ouch!)

Images to resize for WordPress useI’ve intentionally chosen some photos with very rich detail, some with a wide range of different colours, & one with a large space of a narrow range of colours (blue sky). This is to show suitable ‘universal’ settings as overdoing image compression can leave noticeable degradation in some cases (particularly dealing with large spaces of single colours).

2. Open XnConvert & drag in your images

XnConvert Sreenshot

On running XnConvert you’ll see this open white space for listing the images you’re processing.

Drag-drop the images you’re processing into the space & they’ll then appear like so:Images previewed in XnConvert

3. Set up your conversion actions

Firstly we’re going to add a literal resize of the image to a more sensible display size (or ‘resolution’). 1366 x 768 is currently the most common display resolution (think: maximum visible image size) but that’s a widescreen laptop resolution so we’re going to use 1280 x 1024 (which is plenty big).

The XnConvert Resize settingSo, click the ‘Actions’ tab, then the ‘Add action’ button & move your cursor over the ‘Image’ option & choose the ‘Resize’ option (there are oodles of different useful Actions available, like making all your photos appear ‘Retro’, but we’re only interested in resizing here).

The XnConvert resize optionsNext select ‘1280 x 1024′ in the ‘Presets’, then next to ‘Enlarge/Reduce’ choose ‘Reduce only’

You’ll see on the right there is a ‘Before’ & ‘After’ so you can preview how the processes image will look.

4. Set your output

Next we set details of the outputted files.

The XnConvert file output settingsClick on the ‘Output’ tab & you’ll now see a lot of options for configuring the file output, including controlling the output ‘Filename’ & whether you’re going to replace the original files or rename them. In the options choose ‘Rename’ & your originals will be kept. Then beside filename type: {Filename}-reduced

This will use the original name but add ‘-reduced’ to the end of the description. Now select the ‘JPG’ format & click on the ‘Settings’ underneath. Set the quality to 85% & click ‘OK’. Finally click the blue floppy disc icon near the bottom-left of the screen & save all the settings in case you want to use them again in future (in which case on this screen you click the folder in the bottom-left to load the settings file).

5. That’s it!

Click the ‘Convert’ button & your images will be resized & reduced in file size!

The result

These files started as needlessly huge in dimensions, 2000+ x 3000+, & 18MB in total file size. Now with a few simple clicks (just 2 clicks if you have the settings saved) we’ve reduced them all to a sensible maximum of 1280 x 1024, & a combined file size of….. just 1.25MB! Perfectly prepared for uploading to your WordPress website for use.

WordPress Auto Resize of Images

One last thing: you may well not be starting a new website and already have some large images on your site you’d like to auto-resize to help keep your site trim. No problem! Get yourself the EWWW Image Optimizer plugin installed then on your site click ‘Media’ > ‘Bulk Optimize’. The plugin wont reduce the actual image size, & wont make quite as dramatic savings as above, but will automatically reduce image file sizes without reducing the quality at all. What’s more once it’s installed it’ll automatically apply its reduction techniques to any newly uploaded images.

This is a fairly long post but I guarantee you’ll find the steps as easy as anything!… oh, & if you need a photography website building, or professional WordPress training or support, do feel free to drop me a line I’d love to help :)

Popular searches for this page:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>