Beginner’s Guide to WordPress Image Sizes (+ Best Practices)

Beginner’s Guide to WordPress Image Sizes (+ Best Practices)


Shares

760

Share

Tweet

Share

Facebook Messenger
WhatsAppEmail

Do you want to learn about WordPress image sizes?

Often, beginners ask us about what image sizes they should use on their WordPress site and how WordPress handles images in different areas.

In this beginner’s guide, we will explain common WordPress image sizes and share best practices on how to know which sizes to use on your website.

WordPress image sizes explained for beginnersWordPress image sizes explained for beginners

What Is an Image Size?

Image size usually refers to the width and height of an image measured in pixels. For instance, 1600×900 pixels means an image is 1600 pixels wide and 900 pixels in height.

Image size in dimensionsImage size in dimensions

These measurements are also called image dimensions. Basically, an image with larger dimensions has more pixels, which will increase the image file size.

Image file size is the space an image file occupies on a computer, and it’s measured in bytes. For instance, 100 KB (kilobytes).

If an image has a large file size, then it will take longer for users to download and can affect your website’s speed and performance. That’s why it’s important to keep the image file size as small as possible while keeping the image at the right dimensions.

This is where image file formats come into play.

Image file formats are compression technologies for saving image files. The most common file formats used on the web are JPEG and PNG.

Images like photographs that contain more colors can be better compressed by using JPEG file format. On the other hand, images like illustrations with fewer color details can use PNG for the best results.

For more details on image file formats, you can check out our article on how to optimize images in WordPress.

With that in mind, here’s a quick overview of the things we will cover in this article:

  • What Size Should My Images Be for My WordPress Site?
  • What Image Sizes to Use in Blog Posts
  • What Image Sizes to Use for Featured Images
  • What Image Sizes to Use for Social Media
  • What Image Size to Use for Website Logo in WordPress
  • Editing Images for Your WordPress Website

Ready? Let’s get started.

What Size Should My Images Be for My WordPress Site?

For an average WordPress website, you’ll be using images in several areas of your website. You’ll need images for your blog posts, thumbnails, page headers, cover images, and more.

WordPress automatically handles some of the image file sizes by default. Whenever you upload an image, WordPress will automatically make several copies in different sizes.

Automatic copies of images in different sizesAutomatic copies of images in different sizes

You can view and even adjust the default WordPress image sizes by visiting the Settings » Media page in the WordPress admin area.

Here, you’ll see three image sizes: thumbnail, medium, and large.

Default image sizes in WordPressDefault image sizes in WordPress

However, your WordPress theme may create its own additional image sizes and use them for different sections of your site.

These sizes will not be visible on the ‘Media’ screen, and the only way to view those additional sizes is by going to the ‘File Manager’ on your WordPress hosting account.

Then, you’ll want to navigate to /wp-content/uploads/ folder and select any year folder there to browse. This will help you see all the various image sizes your WordPress site is generating.

Now, let’s take a look at different areas of your website, and what image sizes you should use in those areas.

What Image Sizes to Use in Blog Posts

You should choose the image size for your blog posts based on your WordPress theme.

For instance, some WordPress themes come with a single-column layout, which allows you to use wider images.

Image in a single column layoutImage in a single column layout

Some other WordPress themes use multi-column layouts, which typically consist of a content area and a sidebar.

If you use this type of theme, it means you need to adjust the image width accordingly.

Two column layoutTwo column layout

For most blogs, you can use the following image sizes:

  • Single column layout: 1200×675 pixels
  • Two-column layout: 680×382 pixels

Now, you might notice that many popular WordPress websites use the same image width for all their images inside an article. Please note that this is not a strict rule.

For instance, if you need to add a ‘Media and Text’ block, then you can adjust the image size accordingly. In the example below, we are using a portrait image next to some text.

A blog post showing image in portrait size next to some textA blog post showing image in portrait size next to some text

Similarly, you may want to use square images for some situations.

For instance, here’s an example of square images used in a multi-column layout.

Square images in columnsSquare images in columns

When using square images, you simply need to make sure that the image dimensions have the same width and height, such as 300 x 300 pixels.

Featured images, also called post thumbnails, are a WordPress theme feature. This means that your theme will determine what size images to display.

For instance, some WordPress themes may use a standard 16:9 aspect ratio for featured image sizes, such as 680×382 pixels.

Some WordPress themes may also use the featured image as the header image. If that’s the case, they may need larger images, like 1200×675 pixels.

Feaatured image used in coverFeaatured image used in cover

Featured images are important since your WordPress theme may use them in different areas of your website. They’re often the first thing your visitors see, so you’ll want to make a good first impression.

We recommend using larger images, which can look beautiful whether scaled down or used in wider modes.

Featured image inside containerFeatured image inside container

Similarly, if your WordPress theme uses square images for featured images, then we would recommend using images that are at least 600×600 pixels.

  • For themes that use rectangular featured images: 1200×687 pixels
  • For themes that use square featured images: 600×600 pixels

Your WordPress theme will generate additional sizes for featured images to use in different areas, such as the homepage, blog page, or archive pages.

Featured images on homepageFeatured images on homepage

What Image Sizes to Use for Social Media

Now, if your WordPress theme is using featured images that are 16:9 in aspect ratio, then you can also use them as social media images for Twitter and Facebook.

However, you’ll need to explicitly tell those platforms which image you want to display when someone shares an article from your website.

To do that, you’ll need the All in One SEO plugin for WordPress. It’s the best WordPress SEO plugin on the market and is used by over 3 million websites. This plugin can help you optimize your website for search engines and social media platforms.

Note: On a tight budget? There’s also a limited free version of All in One SEO that you can try.

To get started, you need to install and activate the All in One SEO plugin. For more details, you can see our step-by-step guide on how to install a WordPress plugin.

Upon activation, the plugin will launch the setup wizard. Simply follow the on-screen instructions to complete the process. You can also see our guide on how to set up All in One SEO for more detailed instructions.

After that, you need to visit the All in One SEO » Social Networks page and switch to the Facebook tab. From here, you can set ‘Featured Image’ as your default Open Graph image source.

Default image for Facebook Open GraphDefault image for Facebook Open Graph

You can then switch to the Twitter tab and do the same.

Don’t forget to click on the ‘Save Changes’ button to store your settings.

Now, if your WordPress theme uses images in a different size, then Facebook and Twitter may not be able to display those images properly.

In that case, you can provide social media platforms with a custom image.

Simply create an image with a 16:9 aspect ratio, which can be 1200×675 pixels or 680×382 pixels. Then, edit the post or page and scroll down to the ‘AIOSEO Settings’ section below the editor.

From here, you’ll need to switch to the ‘Social’ tab and scroll down to the ‘Image Source’ field. From the drop-down menu, select ‘Custom Image’ and then upload your Facebook image.

Set custom image for FacebookSet custom image for Facebook

Once done, you can repeat the process on the ‘Twitter’ tab as well.

Note that you’ll have to do this for all the articles you publish to ensure that social media uses the image you want them to use. For more social media image sizes, see our WordPress social media cheat sheet for beginners.

What Image Size to Use for Website Logo in WordPress

Many WordPress themes will let you know what image size you should use for your website logo.

For instance, our demo theme shows this message when we try to upload a logo.

Logo image size recommendationLogo image size recommendation

However, if you are using a newer WordPress theme with a full site editing feature, then you may not get a recommendation for logo image size.

In that case, we recommend uploading different styles and sizes to see what looks best for your brand. A logo image size of 300×200 pixels can be a good starting point.

Site logo block editorSite logo block editor

Editing Images for Your WordPress Website

We understand that most WordPress users are not graphic designers by profession. However, learning to use image editing software to scale image sizes for your WordPress website is a great skill to have. Plus, it’s very easy to do so.

WordPress itself comes with some basic image editing tools. To use them, simply go to the Media » Library page and click on an image.

This will open the image in a popup, where you’ll see a button to edit the image.

Edit image in WordPressEdit image in WordPress

Once you do that, you should see the editing options.

The editing tools include basic image resizing, cropping, rotating, and flipping.

Image editing options in WordPressImage editing options in WordPress

This basic image editing comes in handy if you need to quickly fix an image issue. However, it’s not the best way to edit your images daily.

Luckily, there are several free and inexpensive options that you can use:

  • Canva – free web based image editing software. It also includes ready-made templates for website images, logos, social media images, and more.
  • Pixlr – A freemium web-based image editing software. It can be used to resize images for your blog posts easily.
  • Gimp – Free and open-source image editing software. This tool works as a native desktop app on Windows, Mac, and Linux. It can be used to resize images, add layers of text, edit photos, and more.

We hope this article helped you learn more about WordPress image sizes and what image sizes to use on your website. You may also want to see our guide on how to add captions to featured images and how to fix featured image not showing in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.


Shares

760

Share

Tweet

Share

Facebook Messenger
WhatsAppEmail
Lượt xem: 15

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *