How to Reduce Image File Sizes Directly in WordPress

March 17, 2019

Kaylchip.com is a travel + lifestyle blog for the modern traveller with a creative soul. Content is balanced between travel, creativepreneur advice, and random musings from my heart. Learn more about me.

 TheBlog

Travel

Palm Springs Guide

follow @kaylchip

01

15-step guide to starting a blog in 2019

Start a Blog

02

THE ULTIMATE GUIDE TO a
vancouver girls trip

03

How to Spend 3 Days in seattle, washington
Now Trending
Explore Travel
boston
palm springs
costa rica
portugal
canada
paris
maui
girls trip
How to Reduce Image File Size in WordPress Change file size in wordpress for images

Recently, much to my horror, I realized 70% of the images uploaded to my blog were not optimized properly. I found this out only after doing a page speed test and seeing an alarming amount of red. Insert panic mode.

I googled the optimal size for blog photos, and found most websites advise photos to stay under 500KB.

Even though I thought I had all my photoshop and lightroom settings dialed, and was using Tinypng for every image, I still had some images in the 3MB range.

Yes, not good. I looked into my options, as the last thing I wanted to do was source out all the large files, open them in photoshop, resize them, and then re-upload them to my blog.

Luckily, I found a solution to reduce image file sizes in WordPress, saving me a ton of time. Phew! I wanted to share this newfound knowledge with all the newbie and veteran bloggers out there as this can really affect SEO and is a relatively easy fix once you know how to save your photos properly before uploading.

In this post, I first explain how to find out what the optimal width is for your photos based on your blog, as that will determine how you size them. I then go through how to change any existing large files you have already uploaded to WordPress/your blog, and finally, I show you what settings you should be exporting your photos with from here on out to avoid all this!

First things first.

Find out what the width of your blog container is.

  • To do that, open Chrome and go to one of your blog posts
  • Right-click near one of the images
  • Click “Inspect”
  • When the inspect tool opens, click the arrow within the square icon (far top left)

inspect blog widthHover over images and blog text and the dimensions will appear. Keep scrolling to make sure the width is uniform throughout.

Tip: Your blog width can sometimes be found under your theme settings in WordPress if your theme is hosted through WordPress versus a third-party.

Now that you have your blog width..

Identify the images you currently have on your blog that are weighing down your site

To do so:

  • If you don’t already have the Smush plugin, download and activate it now
  • Open your media library and make sure it’s organized in list format versus little thumbnails
  • Once that is done, click the smush button to the right of your photos. It will show you what size the image is after the “smush” process. If any of your photos are above 500kb, you will want to resize them.

How to reduce file size of already uploaded media in wordpress:

  • Click on the image and click edit
  • Click “edit image” underneath the image (left side)

how to reduce image size in wordpress

You will see the dimensions on the right-hand side.

Changing photo file size in wordpress

Change the dimensions so that the width is the same as your blog width (mine is 950). The height will populate on its own. Click scale and save.

reduce size of image in wordpress media

All done! Your photos that live in WordPress have been optimized.

If you have an overwhelming number of photos, I recommend running a Google page speed test to identify the photos that are really weighing down your site and start there.

Now, how to avoid having large files to begin with? It’s all about how you save your images in Lightroom and Photoshop.

Saving photos in Lightroom for your blog:

When you go to save in Lightroom, bump the quality down from 100 (found under “File settings”). I prefer to keep mine around 80, but play with yours to make sure you aren’t sacrificing quality.

Under image sizing, click resize to fit, short edge, and enter the width of your blog in pixels. I use short edge for my blog, but test yours out as you might need to click long edge for your particular blog.

How to save photos for blog in lightroom

I’ve been playing around with “Sharpen for screen”, but I usually leave this unticked. Feel free to experiment with this and see if you notice any difference.

Saving photos in Photoshop for your blog:

When you save in Photoshop, click File, Export, Save for Web.

save image size in photoshop

Play with the quality (top right, I usually do around 73-80), then go down to image size and change the width to your desired blog width (again, mine is 950). You can see how large the file size is in the bottom left side of the blue square outlining the preview of the photo under JPEG. The photo above is now at 464.5KB in size, under the 500KB maximum.

Once I’ve saved my photos, I always run them through Tinypng to decrease the file size. Finally, I upload them to WordPress, and the smush plugin decreases the file size even more.

I hope this saves you time by avoiding large image sizes within your blog posts. Going through 65 pages of images in my library today and optimizing them was not fun!

Xx,

Kaylee

READ NEXT: How to add line breaks to your blog posts

READ NEXT: 5 Things to Do Before You Publish a Blog Post

The comments +

Leave a Reply

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

Don't go!

I'm not like a regular email list, I'm a cool email list.
I'll only ever pop into your inbox with actionable advice, exclusive content or exciting announcements.

WITHOUT GETTING ON THE VIP LIST

SIGN ME UP!

Get your

The ultimate guide to perfecting your instagram theme. Enter your email below and your guide will be on its way! I'll also add you to our email list. You can unsubscribe anytime!

free instagram guide!

Artboard 3
    Powered By ConvertKit