Hugues Audouard Freelance web designer and wordpress consultant

How to reduce image file size before uploading to your WordPress website

This articles cover images that are intended to be used as they are i.e. without any cropping necessary

It is very important to ensure images uploaded to a WordPress website take as little space as possible. The best practice is to first resize your images at the size (in pixels) they are intended to be displayed at on the web page and then compress the file (without loss of quality) to achieve a final file size of something under 100 Kilobytes (Kb).

This is primarily to ensure your website page loads as fast as possible for visitors, page load speed being one of the (many) factors used by search engines like Google to decide how to rank a given page in search results.

  • Imagine a typical home page with half a dozen images, if those images are uploaded straight from a digital camera, smart phone or stock image download they might each be around 3 to 5 Mb; multiply that by 6 and you have 18 to 30Mb worth of images to load on the page…
  • Now, take the same images at a reduced file size of say 75Kb each and the resulting total become a page with only 450Kb worth of images – so about 60 times smaller !

Another very good reason to implement this best practice is to ensure that the size of you website files take as little space as possible on your web server. WordPress automatically creates several versions of every images you upload, this then compounds the impact and one can quick end up with a very large “uploads” folder, making it difficult for you webmaster to keep enough backup copies of your site.

But isn’t that all very technical and difficult ?

The good news is: it doesn’t have to be! Particularly if all you need to do is reduce the image size without any kind of cropping required, in this case you don’t even need any kind of specialised image manipulation software

To try and help, I have put together a short (less than 5 minutes) video going through each step of the process on a Mac. It’s probably a bit rubbish but have a watch and try it for yourself if you like – I’ve also summarised the steps below.

Video summary

  1. Make a copy of the file first to preserve the original image (right click on the file in finder and select “duplicate”)
  2. Open the image in “preview” (simply double click on the image in the finder)
  3. In the preview menu select tools > adjust size
  4. Select the width you would like in pixels in the dialogue box (provided the padlock sign is on, the height will resize in proportion)
  5. Close preview
  6. Open you web browser and go to https://tinypng.com
  7. Drag the image file you’ve just reduced into the box with the dotted border
  8. Watch it happen then click the “download” button
  9. Et voila, your image has now been compressed and is ready to upload to you WordPress website

 

Posted in:

Hugues

I'm a freelance web designer & developer, as well as a bit of a digital marketing expert. I love all things WordPress and helping people make the most of their website and digital marketing presence. You'll sometimes find me lurking at various WordPress meet-ups, Facebook groups or the WordPress.org support forum...

SIGNUP FOR THE NEWSLETTER

I don't send out newsletter very often at all, but when I do I hope you'll find them useful

Your details will never be passed on to third parties. You can unsubscribe from emails at any time using a link which will always be provided.
Privacy policy

Something went wrong. Please check your entries and try again.

Share this article

Web Hosting