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!

FAQ

The words, Image, Photograph, Graphic, are all used interchangeably throughout this article, as any media that you are adding to your website needs the same optimization and size treatments.

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 sizing, orientation, and resolution first. Then, we’ll give our recommendation for the hands-down best software to optimize images.

There’s also a short FAQ at the end that compiles all the common questions we get into one neat list for your viewing pleasure.

“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

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 and optimized, and also maybe (probably) 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. You’re not alone, we’ll get through it together!

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 a bunch of old school math ratios. Which we all hate. So, I’ve done them for you below.

Preparing Your Photographs for Upload

There are two measurements to note for your images: the resolution and the size.

Let’s say you have a brick and marshmallow both 4inches x 4inches. They have the same sizes but the weight is different. That weight difference is huge even though the size of both items in our analogy are the same. This is how resolution works.

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 size and resolution.

FAQ

Images have a size (width x height) but they also have a resolution expressed as ppi (pixels per inch). The higher the resolution, the more space it takes up on your website.

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 – 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 do I need to know about WEBP?

Since WordPress version 5.8 you can upload images with the file extension .webp in WordPress. .Webp is considered “next generation”: it’s able to load much faster than even 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.

And leaving your images in their original form (.jpeg, usually) still lets older browsers maintain the user experience, since ewww.io essentially makes a .webp copy rather than changing the original. (More detail in the image optimization section)

Which size to use every time

As we said in the beginning, you need two things for the perfect image: resolution (covered above) and the size. The size is made up of the width and the ratio. You can discover your perfect width and ratio in a few simple steps.

FAQ

We start with width (not height) because of screen width limitations, so the images look good on any screen.

Width: The gold standard for width in blogs is 2000px wide. Super simple!

Ratio: Consistency here only matters for featured images! But boy, is it important! Let me show you the difference:

If you use different ratios on featured images in the same site, you’ll end up with lists of posts that have wonky-looking photos next to them. Trust us: if you’ve just made the tastiest looking borsht since grandma’s house, your client doesn’t want a close up photo of the spoon!

FAQ

Ratio consistency is important for featured images only! Featured images are the images that appear in the “thumbnail” of a post. They’re the one image your reader sees when deciding whether or not to read any given post, and they appear in post archives, home page sliders, search results, and more!

When choosing a ratio for your featured images, you need to note your site’s archives orientation.

To discover the site’s archives orientation:

  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 wide or tall? See diagram below. The ones on the left are all landscape. (wide)
FAQ

Portrait: If you have tall photos across your site, then upload one of the portrait ratios.
Landscape: If you have wide shaped pictures, then use one of the built-in landscape ratios.

Kadence has programmed a bunch of the most common ratios for you. When choosing what size to make your featured image, pick one of the below and stick to it!

These are Kadence’s built-in ratios.

  • Landscape 4:3
  • Landscape 3:2
  • Landscape 16:9
  • Landscape 2:1
  • Landscape 3:1
  • Landscape 4:1
  • Portrait 3:4
  • Portrait 2:3
  • Square 1:1

At WPBarista, we use square (1:1) ratios for our featured images. We created an example using an original photo (16:9 below) and uploaded it to this post and then told WordPress to crop to various ratios. The ratios are labeled on the images below. Compare what parts are missing from the original (16:9), and choose for yourself what size will fit most of your featured images best (remember your site’s orientation!)

Landscape Cropping Examples

Portrait Cropping Examples

If you upload a landscape image (see original), WP will crop it to look like this:

Now that you have an idea of orientation and ratios – you need to pick one and stick to it!

And that is all you need to get the perfect image EVERY time in WordPress – upload the width at 2000px according to your desired ratio. And being the superhero I am, I did the math for you below!

Kadence Image Ratios w/ Exact Measurements

Square Ratio
1:1 Ratio

Always use 2000px wide. And if you have chosen to use square (1:1 ratio), then it’s always the same.

  • 2000px x 2000px
Landscape Ratios
Grey blank image with title 2000px x 1500px
4:3 Ratio
Grey blank image with title 2000px x 1333px
3:2 Ratio
Grey blank image with title 2000px x 1125px
16:9 Ratio
Grey blank image with title 2000px x 1000px
2:1 Ratio
Grey blank image with title 2000px x 667px
3:1 Ratio
Grey blank image with title 2000px x 500px
4:1 Ratio

Always start at 2000px wide. And use your selected ratio every time for the perfect image.

  • 4:3 works out to 2000px x 1500px
  • 3:2 works out to 2000px x 1333px
  • 16:9 works out to 2000px x 1125px
  • 2:1 ratio works out to 2000px x 1000px
  • 3:1 ratio works out to 2000px x 667px
  • 4:1 ratio equals 2000px x 500px
Popular Portrait Ratios
Grey blank image with title 2000px x 2667px
3:4 Ratio
Grey blank image with title 2000px x 3000px
2:3 Ratio

These ratios were built-in to Kadence for your convenience, and they are common online too.

  • 3:4 ratio is 2000px x 2667px
  • 2:3 ratio is 2000px x 3000px

Image Optimization

ewww.io landing page screenshot

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 resolution and the size all sorted out, it’s time to get these images out to the world!

How to Upload to WordPress

As long as you use the Media Library to store your images, ewww.io can do its job. So 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.

FAQ

TIP: Drag an image from your desktop to an open post-edit screen to have it automatically added.

Step-by-Step Guide to Image Sizing

Time needed: 1 minute

  1. Configure EWWW.io to compress images AND use easy i/o (this is a paid service).

  2. Take one raw image from your computer/phone/camera and select export.

  3. In the export menu, change the resolution and size. Your resolution should be ~70ppi and your size should be 2000px by height (see ratios section above)

  4. Once you’ve saved your resized images on your device, open up your media folder and drop them in.

  5. Step 5: While editing your posts, add images from your media library – they are ready to go!

And voila! Perfectly sized images Every. Single. Time.

Video Tutorial & Summary

Frequently Asked Questions – Right here!

2000px wide by whatever high (see the ratios section above). Use an optimization plugin to serve modern image formats. All of these terms are explained above.

Normal people refer to the size of an image to mean either the width x height or space it takes up (Kb and Mb). The right terms would be size and resolution.

Quality is usually a combination of uploading a too-low resolution image, or too small, coupled with an aggressive optimization plugin. Skewed images are a result of a too-small image or too small for the ratio.

DPI stands for dots per inch. And PPI stands for pixels per inch. Dots per inch is a throw back to the early days of dot matrix printers. Both of these acronyms are referring to the image resolution. See the Resolution section for more details.

The right optimization plugin makes or breaks the speed of the site. All the suggestions above are to create the perfect size, that is also google-friendly and FAST. We recommend ewww.io only for the reasons outlined above.

Keep em relevant, fast and use alt-tags.

All advice in this post is accurate for any size device. If you upload the image in the right resolution and ratio there will not be any issues on mobile phones.

Webp is a modern image format that most browsers support. It is up to 25% faster than standard images. See the webp note in the post for more information.

Beginner Checklist

If you’re starting out, you’ll love our comprehensive 52 point checklist for your website! Read through once, and then work on items one at a time as it comes up!

52 Edits Checklist – beginners categories

Cathy Mitchell

Single Mom, Lifelong Learner, Jesus Follower, Founder and CEO at WPBarista.