Perfekt WordPress Images Sizes

WordPress Featured Image Size and Perfect Image Sizes

Use the optimal WordPress image sizes for your theme! I am always asked which image sizes are the right ones for a particular theme. Especially the size for the featured image raises questions again and again. This guide will show you how to find the right image sizes for each WordPress theme.

Once you’re done with the biggest adjustments to your theme and nothing changes in the width, you can determine the size of your images and featured images.

Determine the Theme Width

Theme width setting at Kadence
Theme width setting at Kadence

However, we do not use the settings in the customizer, because with these widths the inner distance usually comes away. So we measure directly in the browser!

We need the maximum width of the images used, otherwise the images are then displayed enlarged and thus blurred.

Attention: I do not use the narrower width of my blog posts for the WordPress image width, but the width of the pages, so that I can use the images everywhere without loss of quality. Even if I want to display the blog posts on full width later.

  1. Open a page with the widest width of your website.
  2. Right-click any paragraph and select Inspect.
  3. In the browser console, hover over the selected line in the HTML code.
  4. The first value is your content width. (See screenshot below.)

I use the Chrome browser for all screenshots. Other browsers behave very similarly.

Determine the maximum content width in the browser for optimal WordPress image sizes.
Determine the maximum content width in the browser for optimal WordPress image sizes.

In my example, the content width is 1280 pixels.

Determine the Image Height

Calculate aspect ratio
Calculate aspect ratio

Once you know the width, you can use the aspect ratio you want to create the height for your featured image and the default height for all remaining images and graphics.

Formula: Width / Ratio-width * Ratio-height

Popular is an aspect ratio of 16:9.

Calculation (example): 1280 / 16 * 9 = 720 px height

You can also use a special page for calculation.

So the post image size is 1280px x 720px.

You should always save your WordPress post images or featured images in the same size. You probably also want to use 16:9, so you can directly use the previously calculated size.

Example post image size: 1280px x 720 px

Standard Post Image Size: 1200 px x 675 px

Optimal WordPress Content Image Size

The optimal image size for WordPress content always results from the width of the post type.

Even if you only use the images for the narrow blog layout, you should save your images for your maximum website width. So you still have sharp images and graphics for later layout changes.

Thus, the optimal WordPress image size results from the maximum content width.

The height can be freely chosen here, as the content images are never listed in grids of the same size.

In the example I used in this post, I save my content images again with a width of 1280 px.

Customize Media Settings in WordPress

Change optimal image sizes in the media settings
Change optimal image sizes in the media settings

WordPress creates at least three sizes for each uploaded image – depending on the theme, usually many more.

In order to really save the right sizes for your theme, you still have to adjust the width and height under Settings > Media.

For “Height” or “Max Height”, always enter a 0 (a zero) so that the images are not cropped.

Under “Large” I enter the previously determined maximum width. For medium size, the width of my blog posts, which I have always set up to 800 px. For the preview images, I use half the width of my blog posts, so thats 400 px.

  • Large: 1280
  • Medium size: 800
  • Thumbnails: 400

Then click on “Save changes”.

Choose the right Image Size in the Editor

Image size in the editor
Image size in the editor

After the previous settings, we now have three WordPress image sizes, which should always be used in the right place.

In the blog posts, the image size “Medium” is suitable.

On full-width pages, be aware to choose the full size, otherwise the images will appear blurred.

Thumbnails for Archive Pages

Select thumbnail or preview image for the archive layout
Select thumbnail or preview image for the archive layout

For the listings in the blog and on the archive pages, you have to check in the Customizer whether the smallest preview image format or thumbnail is selected.

Otherwise, the visitor would have to download the large images unnecessarily.

Next Steps WordPress Image Sizes

Best WordPress Hosting

Hosting recommendations are usually garbage.

Often extremely cheap hosting packages for $ 3 are recommended, others advertise a $ 100 VPS, because they earn the most as an affiliate thereby. In the end, we all just want the fastest possible web space for as little money as possible.

And optimized for WordPress!

What else is important? The server should be a fast backbone for your website and the support should answer as fast as possible, and preferably in your language.

You can get all this at Cloudways from $ 10,00 / month.

Even if the storage space no longer causes big costs, I still don’t want to store image sizes that I never need.

But I have already written the post Disable WordPress image sizes.

Similar Posts

Leave a Reply

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