How to Optimize Images for WordPress

So, you have a shiny new camera and want to make sure your images look just as good to everyone else as they do to you? Or maybe you are seeing so many .pdf, .webp, .gif, .avif, .jpg, etc. etc. you find yourself tempted to add .help and call it a day? Don’t worry, you’ve come to the right place!

There are two main errors bloggers make when it comes to uploading images to their sites: loading them too small, and using the wrong optimization plugin. Don’t worry though: we’ve gone ahead and done all the math to let you skip straight to the solution.

We’ll tackle the size first: including pixels, orientation, and resolution. Then, we’ll give our recommendation for the hands-down best software to do the rest of image optimization, specifically for WordPress.

That was true in 2007 but not today!

Current advice we see quite often is, “only upload the size you need”. That was true in 2007 but not today!

In the very busy age of the internet (on phones, TV’s and watches) we need modern image formats that are pixel perfect, but also fast! modern image formats are called .avif or .webp.

Did I mention google? Yeah, google can be picky too- but don’t worry! Although it’s (unfortunately) no longer as simple as “only as big as necessary”, it’s also something we deal with day-to-day here at WPBarista. We’ll explain how to make Google happy too.

It is my life’s mission and my heart’s passion to stop the 600px wide images!! If you’ve been around here any length of time you’ve heard my slogan, 2000px wide – always! 2000px wide and whatever high. So how high is that?

Unfortunately this means understanding how WordPress crops your images, and a wee bit about aspect ratios. I’ll go through step by step. Once you get it, it will become second nature!

Preparing Your Photographs for Upload

TL;DR

1. lower resolution
2. save as jpg
3. resize to 2000px wide x whatever high*

*[featured images only]crop to your chosen aspect ratio

“But what size do I need?”, you may ask. You probably mean width x height when you ask about size. If I say your images are too big for your web hosting… do I mean width x height? No! I mean resolution! I’ll explain resolution below. For now, let’s use dimension when referring to the width and height of an image.

Resolution: the density of pixels
Dimensions: the width x height in pixels

Changing the Image Resolution

Your images must be marshmallows! The webpage can’t handle many bricks before it slows down. (I am so proud of this analogy right now.)

Below we discuss both dimensions and resolution.

Rule #1: Change the resolution before you change the size. Before calculating the size you want, lower the resolution (make it a marshmallow!). Most programs do this with the export or save function. Once you click save/export, you’ll get some choices. You want the 100ppi (Marshmallow) resolution. Some programs call it ‘web-ready’ or ‘low quality’.

Here are some example settings you’ll need:

1. On my camera, I have it set to 100ppi by default.
2. Canva – in download menu, select “jpg” at 80% quality.
3. Photoshop – choose “web ready” jpg.
4. Adobe Illustrator – choose web ready jpg or svg
5. PicMonkey – Use the “Web” tab and choose jpg.

What about .jpg, .webp, .svg or .avif?

Since WordPress version 5.8 you can upload images with the file extension .webp in WordPress. WEBP is considered “modern image format”: it’s able to load much faster than an optimized .jpg image, with little to no sacrifice in quality. But if you’re using the plugin we recommend, you do not need to worry about creating webp images – ewww.io will do it for you.

.svg formats are for another article – but you do not need to use .svg or .avif formats in regular every day blogging.

Rule #2: Always use jpg if you can. (transparency requires png)

The Best Dimensions for WordPress Images

As we said in the beginning, you need two things for the perfect image: resolution (make it a marshmallow) and dimensions. The dimension is the width x height of the images.

Width: This is easy! Make your images 2000px wide. WordPress will shrink them to the right size depending on the reader’s screen.

If you want a super-wide image that crosses the whole screen, you may need to upload 2800px or more. But 99% of the time, 2000px wide is your number.

Height: the height you need depends on the aspect ratio of the place where the image goes. If you want to put the image into a tall spot on your post, then it needs to be 2000px wide and tall. If you want a wide landscape spot to hold the image, than it needs to be 2000px wide and short. The obvious question is, how short? or how tall?

To make sure your images look good everywhere, we’ll upload the photos in 2000px wide, and let WordPress (and your theme and plugin) work it’s magic to make it fit the device. So your images can be any square, landscape or portrait size that you can think up – as long as the width is 2000px!

If you want galleries in your posts, then it is best to upload uniform sizes so it looks neat and tidy. The only time this does not work is for featured images. We will tackle featured images below.

How to Size Featured Images

In order to keep these looking uniform on your site, you need to choose an aspect ratio and stick to it!

Quick overview of Aspect Ratios

Back in the day, when we printed photographs we had a common aspect ratio of 4×6 for photos. That was 4″ high and 6″ wide. That is an aspect ratio of 2:3.

When you graduate and your parents want to show off your big smiling face, they order an 8 x 10 or even an 11 x 17. Those are aspect ratios of 4:5 and 1:1.54 respectively. See the image below for some examples of aspect ratios that are commonly found online.

An aspect ratio of 1:1 (square), will be square at 2000px x 2000px or at 100px x 100px. A square is a square regardless of size.

When choosing an aspect ratio for your featured images, you need to note your site’s archives aspect ratio. See diagram below. The ones on the left are all the same aspect ratio. The ones on the right are different aspect ratios, creating a non-uniform look. This is the reason to select one aspect ratio and stick to it.

How to find your featured images’ aspect ratio

1. Have a look at one of your post archive pages
2. You can find one of these by clicking any category, or
3. by clicking on any author link
4. You should see a list of posts with featured images. Are those featured images square, wide or tall?

Now that you now if they are tall or short and wide, let’s discover the exact pixel height you need.

Built-in Ratios: WordPress has built-in ratios. If you use Kadence blocks, they have built-in ratios too. But these are options you have after you upload the photograph. If you use these built-in aspect ratios to crop your images, you may get unexpected results.

If you want to control how your images look, then prepare your images before upload. We’ve already covered changing the resolution. And we know the width. And for featured images only, we also need the aspect ratio.

Look in the table below to see examples of aspect ratios and discover which one you currently use. (or upload a featured image to your favorite AI bot, and ask it what your ratio is)

So if you have an aspect ratio of 4:3, and the images are always 2000px wide, then we need the height. Use the chart above, or I recommend asking AI like so: “What is the height for an aspect ratio of 4:3 when the width is 2000px?” It will answer 1500px. Now you have the height!

In our example, your aspect ratio is 4:3 and your featured images are 2000px x 1500px. Always and forever. Amen.

You’re done. You have the resolution, aspect ratio, and width and height for your regular images and your featured images. You are now ready to upload them to WordPress! Let’s take a brief sidebar, and then get the optimization plugin installed and configured.

Side Lesson: WordPress & Cropping

Now – this is where we take a detour to prevent WordPress from skewing your image. We need to learn how WordPress will change your images after upload – and preferably, stop it from doing so!

When uploading an image, this is what WordPress does by default:

1. Pre-upload safety & size checks. Note aspect ratio.
2. Add all the sizes needed (by the theme & plugins) to Media Library instantly.
3. Check the assigned space for the image: what is the aspect ratio?
4. If the image aspect ratio & the assigned space are different = check the theme: does it want hard crop or soft crop?
5. If soft crop, squish the image into the space.
6. If hard crop, slice the image until it fits in the space.
7. If the image and placement are the same aspect ratio, no cropping.

Whether or not this processing is a good or bad thing, depends on what you need. See examples below that show how cropping works, and decide if you want hard crop, soft crop, or no crop.

Upload a square image into a portrait space, using hard crop and soft crop. Soft crop will squish the square into the portrait. Most of the time, this makes the image incredibly small or skewed. Hard crop will slice off the left and right to make it fit perfectly into the portrait space without skewing the image.

Upload a square image into a landscape space. The square will be enlarged and skewed or kept in its entirety with tons of space on left and right in soft crop. Hard crop will chop off the top and bottom so the image fits perfectly.

Upload a square image into a square space. No cropping or processing by WordPress.

For most photographers, they do not want anything re-arranged, enlarged, skewed or chopped. And that is why you want to upload your images in the same aspect ratio as it’s assigned space. It will prevent WordPress and your plugins from cropping it.

Review!

Prepare your images for upload by doing the following tasks, discussed ad nauseum above.

1. lower resolution
2. save as jpg (or web-ready)
3. find your featured image aspect ratio (ie: 2:3)
4. crop the photo(ie 2000px x 3000px)

And now – we have our dimensions, and the correct resolution. Let’s install the plugin before we do our final upload. Fortunately, this step is a one-time deal!

Image Optimization

Why we Use Ewww.io

We use ewww.io because it is unique in the services it provides – and reliable! We use the Compress API to optimize every single image on the server – saving tons of space. And we use the EASY I/O service to deliver web-optimized images on the fly (saving your server tons of bandwidth).

1. the Compress API, takes the gigantic images that you used to upload directly from your phone (at about 1mb in size) and makes them all reasonable without losing any clarity.
2. the Easy IO swaps out the image for a webp version before the reader sees the image

This plugin also has fallback options and a few more features that make it our favorite. It is also very reasonable at $7/mo.

So, now when you upload any image to your site, EWWW.io will grab it, compress it, store it properly. And, it will serve the image properly in your theme.

Now that you have the plugin installed. Let’s add the image to a post.

Final Tips

Use the Media Library to store your images so ewww.io can do its job. Do NOT link to the image or use the option to “add image by URL”.

Add all the prepared images to the media library all at once, and then open a post and insert where desired. Alternately, while creating a post, insert an image block, and then follow the onscreen prompts to upload a new image.

Step-by-Step Guide to Image Sizing