BEST WordPress Image Size Guide for Your Website (FREE)

Did you know that when you upload a new image to your WordPress site, WordPress creates 3 (and up to 9!) different sizes for it? By default, WordPress creates different versions of your image for different screen sizes. The purpose of this is to ensure that your WordPress site looks good on all of the different devices your users may be using to visit your blog. Pretty neat.

But additionally, your theme might also create copies of your images for sliders or other features your theme supports, and this can be a problem as it slows down your site. That’s why in part 3 of this post I’ll show you what you can do about it. However, not all themes create multiple copies. For example, Astra, the theme I am using for AnyMommyCanMakeMoney doesn’t.

But what if you want to make your blog look good with a different image size than WordPress’ default? This post will show you WordPress’s best image size practices.

So in part 1 in this post, I’ll show you a really simple way to change your WordPress default settings to suit your blog’s needs. Then, in part 2, I’ll walk you through each possible image size and banner size so that you can size your image correctly before you upload it to WordPress. And I also show you the free software I use to size my images correctly. In part 3 I’ll show you a plugin I use that compresses not only your own images but also the copies WordPress makes, saving you lots of bandwidth and reducing your hosting costs. This is only one of a few plugins available, so you should definitely check it out as it could improve your SEO dramatically. 

Also, if you need help starting a blog, check out my free tutorial that walks you through the entire blog setup process so that when you finish reading it, you will have your blog set up.

Images: Why should you use them

With the right images on your blog, you can increase engagement by 65% compared to posts without images. You can also increase your blog’s brand awareness with beautiful, high-quality images.

The best way to make your WordPress theme look great is to make sure you’re using the correct image sizes. Because if you don’t use the correct size, your images may look blurry, pixelated and people will be less likely to click on them. With the right image file size, your WordPress website will also load quickly and keep your loading time low.

WordPress image size limit

Different themes require different image file sizes and image widths. However, it is always a good idea to upload a high-quality image file, as WordPress uses this to display your full-size option. As a general rule, if possible, do not upload any images larger than 150KB. This can be challenging, but in part 3 of this post, I’ll show you how to compress images for free.

Keep in mind that the correct number of pixels (which is your image resolution) is more important than the file size.

Additionally, you want to avoid uploading images that are larger or higher resolution than WordPress or your theme can handle, as WordPress won’t be able to display them.

PNG or JPEG?

Probably like me, you use Canva for all of your images and post graphics, right? And whenever you download an image, you face the same dilemma: which file type should I choose, png or jpeg?

Here’s how to remember it easily:

PNG: For logos and vector graphics, you need a PNG (Portable Graphics Format).

JPEG: But for photos, you need a JPEG (which stands for Joint Photographic Experts Group).

How to resize your images in 3 steps

I use Canva to resize all of my images before uploading them to WordPress. That way, all of my feature images are the same size.

Let’s say I am creating feature images of 1200 x 628 pixels for my fav theme, Astra. 

1. First, I create a new Canva document with a size of 1200 x 628 pixels.
2. Then, I drag my images inside and position them there. 
3. Next, I download and upload my file to WordPress.

Watch this short video to see what I mean.

Part 1 – How to change WordPress’s default settings

I emphasized earlier that you should always upload images of the highest quality but not much bigger than they need to be since WordPress won’t ever display images bigger than what is available by default.

The default WordPress image sizes

When you upload a new image, WordPress creates the following sizes for you. 

1. Thumbnail size: 150 x 150 pixels
2. Medium size: 300 x 300 pixels
3. Large size: 1024 x 1024 pixels
4. Full-size image is the original image you uploaded.

To see what they are, go to your WordPress dashboard, ”Settings” and “Media” you’ll see WordPress’s default image sizes. 

Take a look at my screen grab below.

That’s not to say that WordPress converts every image to a square. Technically, it means “150 pixels up to 150 pixels”, “300 pixels up to 300 pixels”, and “1024 pixels up to 1024 pixels”. 

In other words, a thumbnail could be 72 x 150 pixels or 150 x 100 pixels. Do you see what I mean?

If you need different image sizes then you can change WordPress’s default settings here and add new sizes. For example, if you run a shop on your blog selling printables, you’d probably want your thumbnails bigger than 150 pixels. 

With Astra, the only image size I have to create for my blog is the feature image. From there Astra just does all the image resizing automatically for me which saves me a lot of time.

Part 2 – Ideal WordPress image size guide

WordPress image sizes vary and are not set in stone as you might think. You should therefore use the size recommendations as rough guidelines and focus more on the image size ratios, like 16:9.

Depending on your theme, you will need different sizes for different locations.

However, one thing that’s the same across all themes is that large images will slow down your page speed (you can test your page speed here for free). And you want to avoid slowing down your site with the wrong image sizes at all costs since site speed is one of the most important ranking factors for Google

In order to prevent this, this guide will help you to upload images in the best size dimensions so that they look and perform the best and therefore provide the best user experience possible (which Google loves).

How to fix image size in WordPress 

You can crop and change the size of your images in your media library. But the best practice is to crop your images before uploading them to your WordPress site.  

Best WordPress image size guide for your website

Let’s take a look at the different image and banner sizes you need for your blog.

Feature image, 1200 x 628 pixels 

Your feature image is the hero image of your blog post since it determines whether or not your readers click on it. Therefore having a strong feature image is a MUST.

Depending on the design of your blog you can upload a featured image in 

• landscape, 1200 x 628 pixels or 
• portrait, 628 x 1200 pixels.

For your featured image, the height can vary, but the width should always be 1200 pixels wide.

Header image (banner size), 1048 x 250 pixels

A header image, or banner size, or header banner, is an image that sits above the fold on your WordPress site, usually below your logo and menu navigation and your announcement bar. It gives your blog a distinct look. There is no one size fits all when it comes to your header image, so the actual size of your header image depends on your theme. As long as you stick to a 16:9 aspect ratio, any banner size you choose will look great on your blog. 

Listed below are various header image or banner sizes that will work in 2022:

• 1048 x 250 pixels
• 1920 × 1080 pixels
• 2560 x 640 pixels

Hero image, 1200 pixels wide, 16:9 ratio

Technically, your hero image is the same as your header image. Above the fold, it’s the biggest image on your blog and it’s the first thing your visitors see. While the exact dimensions may vary, you should ensure that it is no wider than 1200 pixels with a 16:9 aspect ratio. Additionally, try to keep your image file size below 1MB, or go to part 3 of this post to learn how to compress it.

Background images, 1024 x 768 pixels, 1920 x 1080 pixels (16:9 ratio)

Full-size, full-width images that span the entire website are popular because they look fresh and modern.Though the size of your background image may differ depending on your WordPress theme, make sure it has a 16:9 aspect ratio. Don’t forget to compress your images using one of the methods I’ll discuss in part 3 to keep your site fast.

Astra allows you to choose “full-width contained” layouts for your blog, allowing you to go full width within a specific container of your website and still have a sidebar, which I personally prefer.

Post thumbnails, 150 x 150 pixels

Thumbnails should always be 150 x 150 pixels. Depending on the theme, this can also vary.

If you’ve recently switched themes and now your thumbnails are all different sizes then you might want to check out this plugin called Regenerate Thumbnails.

It resizes different thumbnail images already uploaded in your media library to one size. But be sure to read the settings carefully before making any changes.

Carousel slider, minimum 500 pixels in height

If you want to upload images to a carousel slider make sure your images are at least 500 pixels in height. The width depends on your theme settings, whether you’re displaying your site full width or as “boxed” content.

Custom image sizes

You might want to use a custom image on your home page for example to achieve a certain look.  And you can definitely do it, the sky’s the limit, mommy.

You can add custom image sizes in the functions.php file of your WordPress backend. But, unless you’re a coder, I don’t recommend you touch this as it could severely break your site. If you really need custom image sizes, find a coder who can do it for you, and create a backup of your site before doing anything.

Change image size for mobile

Most themes are mobile responsive meaning they do the heavy lifting for you by optimising your images for a user’s best mobile user experience. But Astra goes even one step further by letting you change the image size, spacing and padding individually for mobile, so you can customize how your blog looks on mobile devices vs desktop.

Tip: The first place you should always check is how your blog looks on mobile devices, since this will be where the majority of your traffic comes from.

Part 3 – Image compression tools you can use

The site speed of your blog is one of the most important ranking factors of Google and your SEO, because it impacts your search engine rankings.

Therefore, for your blog to load as quickly as possible, you absolutely must avoid large image sizes.

Even using many images on your blog can significantly slow down your loading speed.

That’s why it is crucial that you compress your images on your WordPress site to reduce your file sizes. Compression tools and plugins can help you do this without losing quality. Although the compression difference is barely visible to the naked eye, it will significantly impact your file size and ultimately load times.

Best WordPress image compression plugins

So let’s take a look at my favorite image compression tools and plugins.

Tinypng.com: Tinypng is a free tool I use a lot to compress all kinds of images for my blog. With this tool, you can compress your images before you upload them to your WordPress site.

Imagify: With Imagify you can bulk compress your images already uploaded to your WordPress site. You can start with 200 images for free but after that you’ll have to switch to a paid plan, starting at $9.99 if paid annually.

ShortPixel: This is the only plugin that specializes in not only compressing your images but also ALL of the copies created (and this is all happening in your backend so you’ll never see it unless you’re a coder). 

Using this lightweight image optimizer plugin can help increase your website’s speed and therefore its SEO ranking.Because as I’ve mentioned so many times already, your site speed matters. A slow loading site means you could lose your visitors.

It’s something I am constantly working on at AnyMommyCanMakeMoney to improve as well, and trust me, any little helps.

By using  a “loose” compression of your images you’re saving bandwidth and that means faster loading times and better user retention for your site.

They have a free version of 20 images per month. if you need more you’ll get the option to upgrade. For AnyMommyCanMakeMoney I purchased a one off 10.000 image credit for $10.

And with that I am about to wrap up this post with some closing thoughts.

Summary on the best WordPress image sizes for your website 

I hope you learned from this post that your site speed matters.

You should therefore do two things: first, upload your images already properly sized to WordPress (instead of cropping them in your media library) and second, use an image compression optimization tool to keep your images looking pretty on your blog, but also to save you bandwidth. The third thing I want you to remember is that the actual image size depends on your theme, so you should check what size you need.

I use Astra (pro) for my blog because it pretty much takes care of all the image sizing. Astra is FREE but they also offer a pro version, which is the one I am currently. 

Did you find the right image size for your blog that you were looking for? Feel free to ask any questions about the image sizes in the comments.