The Complete Guide to Featured Thumbnails and Image Sizes in WordPress
Whatsapp Pinterest
Advertisement

A picture is worth a thousand words—unless it’s been resized inappropriately, in which case it’s a bit embarrassing. WordPress contains powerful tools for resizing images and thumbnails, but you need to know how to deal with them.

Read on for everything you need to know about image sizes in WordPress and managing featured images.

Editing PHP in WordPress Files

This post contains PHP code for WordPress. You might want to read our free PHP crash course Learn To Build With PHP: A Crash Course Learn To Build With PHP: A Crash Course PHP is the language that Facebook and Wikipedia use to serve billions of requests daily; the de-facto language used for teaching people web programming. It’s beautifully simple, but brilliantly powerful. Read More before attempting any modifications on your theme.

If you’re not comfortable opening up your theme files, or don’t want to because they’ll be lost with future theme updates, you can use the My Custom Functions plugin to add code blocks instead.

My Custom Functions

WordPress Image Size Basics

wordpress media settings screen

In the WordPress admin dashboard, you probably already know about Settings > Media.

These are the three default image sizes, which WordPress calls: thumbnail, medium, and large. The thumbnail size has a special setting to be cropped at the exact dimension you specify here. This needn’t be a 1:1 ratio dimension—you can set it however you like.

When cropping is enabled, the images will be scaled and centered, then anything that doesn’t fit will be discarded.

The medium and large setting work slightly differently, in that you’ll specify maximum dimensions for both width and height, and the images will be scaled down accordingly. If the image is too small, those image sizes won’t be created.

When you upload a new image, the original is saved and available to insert into a post at full size, and the other registered image sizes are automatically created.

Adding Custom Image Sizes in WordPress

The three sizes that are defined by default within WordPress might not be enough, which is why themes and plugins are allowed to add their own custom sizes. If you’re comfortable editing your theme files, you can do this too.

Open the theme directory and look for the functions.php file. Add the following code, one for each image size you want to define:

add_image_size( 'my-thumbnail', 400, 200, true);

Each new image size needs a name, width and height dimensions, and whether or not images should cropped to exactly this size (true or false). For structural parts of a theme or widget, you generally would want to crop so it doesn’t break the layout.

You might be tempted to create lots of custom image sizes, but you should do so sparingly. Each image size you define will be generated for every single image you upload, even if you only intended it for us with the featured image.

So if you have seven custom image sizes, plus the three default ones, each image you upload will spawn 10 little copies of itself. If you consider that a single post may have 10 images embedded in it, that’s 100 files being created just for that post alone.

You cannot create a custom image size and specify it should only be used for your featured images.

Also, even if you’re no longer using a certain custom size and have deleted that code (or changed themes), the old images will remain on the server forever. WordPress won’t delete unused images for you. On a site as old or as big as MakeUseOf, this means a few hundred gigabytes are wasted storing images that are no longer used.

For smaller sites, the Media Cleaner plugin may help, but always run a full backup first.

Media Cleaner

Custom Image Sizes for Use in Post Content

By default, custom image sizes won’t appear in the drop-down box when inserting an image into a post. The only thing you’ll see there is Thumbnail, Medium, Large, and Full Size (depending on the size of the original image, since it won’t be upscaled).

insert-image

If you want your custom size to also be on the list, we’ll need a little more code. Again, add to your functions.php file:

function image_sizes_to_mediapicker( $default_sizes ) {
 return array_merge( $default_sizes, array(
 'my-thumbnail' => __( 'My Thumbail Size' ),
 ) );
}
add_filter( 'image_size_names_choose', 'image_sizes_to_mediapicker' );

This works by filtering the media picker list. We merge the original size list array with any new sizes we also want listed. Change “my-thumbnail” and “My Thumbnail Size” to your custom size, and the human-readable friendly name you’d like it listed as.

WordPress Featured Image Options

Featured images are a single image associated with a post, but not necessarily inserted into the post content. They’re often used by themes in the header, on the front page, or on the sidebar. However, in terms of image sizing, they aren’t treated any differently to normal images.

For every size you have defined, any image that’s uploaded will be duplicated and resized, including the featured image.

If you don’t see the option to Set featured image on your post edit screen, it’s possible your theme doesn’t support the feature. You can force support by adding the following line to your theme’s functions.php file, but I’d strongly suggest finding a new theme instead.

Lack of support for something as basic as featured images would be indicative of outdated code elsewhere.

add_theme_support('post-thumbnails');

To use the featured image in your own theme or plugins, use the_post_thumbnail() function to output the image tag:

the_post_thumbnail('my-thumbnail',array('class'=>'my_post_thumbnail_css_class'));

The function takes 2 parameters: the named size you’re looking for (in this case “my-thumbnail”), and any attributes you want to pass in, like a custom CSS class.

If you’d rather just get the actual URL of the featured image than the required HTML too, try this instead (getting the medium image size in this example):

$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'medium');
echo $thumbnail[0];

Regenerating WordPress Thumbnail Images

Anytime you change your default image dimensions or create a custom image size, it’ll only apply to new uploads. All your existing images remain in the original dimensions.

If you want to resize previously uploaded images, you’ll need a plugin. AJAX Thumbnail Rebuild lets you select which sizes to regenerate, and will slowly work through your archive.

AJAX Thumbnail Rebuild

There are some limitations and pitfalls you should know about though.

While featured images can be resized automatically, no plugin can rewrite post content. For example, if you added an image to a post at the large size (which may have been 500px at the time), changing the definition of large will not change the image size in the post. It’ll stay at 500px unless you edit the post and reinsert the same image at the new size.

thumbnail-rebuild

As mentioned, if you have a lot of image sizes, you’re going to generate a lot of images. Thankfully, the Thumbnail Rebuild lets you limit this to only featured images. But again, remember this only applies to your previous image. All future image uploads will be managed by WordPress, meaning all of the image sizes will be created for everything.

Now would be a great time to also learn the difference between JPG and PNG Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC Know When to Use Which File Format: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC Do you know the differences between JPG and PNG, or MP3 and FLAC? If you don't know which file formats to use, let us guide you through their distinctions. Read More  so you know to use the optimal format in future.

Take Your WordPress Site to the Next Level

Want to tweak your WordPress theme? Your theme’s use of images, colors, and positioning of elements is mainly defined by CSS and HTML, so we recommend checking out these step-by-step tutorials to learn CSS and HTML.

And if you’re interested in themes, take a look at these cool WordPress themes for a photography portfolio.

Is your WordPress site crashing too often? Are you paying too much? Switch to a well-known hosting service like InMotion Hosting (special MakeUseOf discount with this link) or Bluehost (special MakeUseOf discount with this link).

Explore more about: Wordpress.

Enjoyed this article? Stay informed by joining our newsletter!

Enter your Email

Leave a Reply

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

  1. To-mos
    January 11, 2017 at 3:04 am

    $thumbnail = has_post_thumbnail() ? wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' )[0] : 'DEFAULT URL';

    Is how I've approached this so you can use a default fallback.
    Hope it might help someone :)

  2. Katherine E Harms
    June 6, 2016 at 5:20 pm

    Thanks for promptly responding to my question. I used your article as a guide to further research. I also submitted a support request to WordPress.

    On my own, I found no way to alter the specification for a featured image. WordPress support confirmed that in my theme (2014) it requires a CSS change, and that cannot be done without a premium subscription.

    I'm making notes as I go, and this is one note in favor of a premium subscription. It will take more than this to justify the $99, but I guess I will see the truth as things progress. In the meantime, I must find pictures that meet or exceed the 1038 pixel width.

    I really appreciate your site and your response to my comment.

  3. Katherine E Harms
    June 5, 2016 at 4:38 pm

    I'm a complete novice, and not a developer. I am trying to get the right size featured image to work with theme 2014. I have no difficulty finding images for my featured image that work fine with my home page grid. The images all look great there. However, when the reader clicks the grid to read the post, the images are all too narrow. There is line hatching to the right of the image that fills the remaining width of the displayed post. In publishing jargon I think it is the concept of bleeding to the cut edge of the paper. I don't know how wide that space is or how to be sure I get photos that look good at that width. I am so focused on content, that it takes me forever to find the photo that works with my content. I never will get my work done if I have to go into the details of the sizing and filter for that, too.

    I can't even find a place in 2014 where the featured image size is set. I looked in Customize, but it only sets featured content to a slider or a grid. The image is not mentioned.

    Help!

    • James Bruce
      June 6, 2016 at 2:52 pm

      Without a URL to check, I can only guess that your images are actually too small , therefore they can't be resized to whatever ratio the featured image is asking for.

      Image sizes are generally set by theme code, and not user definable, since they relate to the design.

      You can post the URL if you like!

  4. Wesley Banks
    May 31, 2016 at 5:44 pm

    I currently have a blog with images sized at 640x360. I always upload that exact size, and have never messed with the media settings.

    I'd like to change all my image sizes to 700x395 to match the new content width.

    What is the best way to accomplish this? Can I do it with the media settings and regenerate plugin, or do I need to re-upload a ton of images?

    • James Bruce
      June 1, 2016 at 7:24 am

      Not possible, for two reasons. First, you've uploaded low resolution - scaling up is not done by wordpress or any plugins I know of. Second, the image size is coded into the post content at the point of insertion. You *can* resize featured images, since those are attached to the post and fetched through php functions; but not images you've inserted into the post content itself.

      So, to answer the second part: you would need to both re-upload at a higher resolution, and edit every single post.

      • Wesley Banks
        June 1, 2016 at 6:49 pm

        Thanks James, in the future, should I be uploading higher resolution photos and utilizing the media settings to choose which size?

        Or what is the best way to prevent something like this happening (assuming I change content widths in the future at some point)?

        • James Bruce
          June 1, 2016 at 8:07 pm

          That will work for featured images, yes. You can always define a new image size, then run AJAX thumbnail rebuild plugin to change them - but that still won't work for in-post images. I'm afraid there isn't a solution to that, at least not in the current way WordPress works.

  5. erin
    April 12, 2016 at 5:20 pm

    my featured images are showing up HUGE at the top of my posts before the title. i want them to show up smaller, and would prefer them to be next to the post snippet. is this something that has to do with my theme or can i change this? i am currently using the free Quest theme.

    • James Bruce
      April 13, 2016 at 8:55 am

      First step I would suggest trying is to run a plugin called AJAX THUMBNAIL REBUILD: https://wordpress.org/plugins/ajax-thumbnail-rebuild/ (activate, then go to the plugin page, and run it on everything) - it could just be that your images haven't been resized correctly for your current theme.

      If that doesn't help, your thumbnail sizes in wordpress settings may be incorrect. Check what size they should be, then make sure those match up with the value given. (then run the resizer plugin again, so it can change all the images to be the right size).

      If that doesn't work, your theme is coded badly. Yo'll need to delve into the code to find out exactly how they've defined their function to get the featured image, and override the sizes there.

  6. Barbara
    March 22, 2016 at 9:40 pm

    Complete guide indeed! I've spent the past two days trying to find a clear explanation of how WP's default image sizes work. Thank you so much!

  7. Libby
    March 21, 2016 at 10:31 pm

    Is this still current? - "a new version of every single image you’ve ever uploaded will be created – not just the featured image. This is a limitation of WordPress."

    Is there really no way to limit additional image sizes to specific images? My current website is photo heavy so if additional images are created for every photo uploaded it's going to get very big very quickly which is nightmare when it comes to backing-up.

    I don't need additional sizes for the images used within blog posts, just for the other images used through the site.

    Any suggestions?

    • James Bruce
      March 22, 2016 at 8:06 am

      I'm afraid so. It's even more ridiculous because there's no way to delete old image sizes safely, so once you've gone through quite a few theme changes (as we have on this site), you end up with terabytes of image uploads.

      The latest wordpress also introduced a new default image size, which you can't change, as part of its "responsive images" update.

      There is no solution, sorry!

      • Libby
        March 22, 2016 at 8:27 am

        Boooo! Thanks for replying and clarifying though. :-)

        I'm baffled that WP does this, imagine how many terabytes of un-needed images there are across ALL WP sites!? It's crazy!

  8. Joy
    February 22, 2016 at 2:36 am

    Hi James,

    Great article, thanks! My brain is mush after trying to find an answer for this and trying so many things - unfortunately, I haven't found a fix. Here's my problem:

    the featured image for the website I'm working on (Customizr theme) is constantly oversized as it's seems like WP or the theme is trying to fit the picture into a wide slider-like space. It's also often pixelated as a result.

    The images look great on the homepage in the little round bubbles, but on the actual post page, it's awful as you only get to see a small part of the image. There's got to be a way in the theme or settings to make this work and I'm missing it, right? I'm sorry if it's right in front of me and I'm missing it. I think I'm looking at it too much.

    I'm not a developer and not excellent with code, but any help you could provide would be much appreciated as I'm at the end of my rope!

    Thank you!

    • James
      February 24, 2016 at 10:39 am

      Bit difficult to diagnose without seeing the code I'm afraid. Every theme is coded differently. It could be that the image sizes set in your wordpress settings are wrong, or it could be that images need to be regenerated to the correct sizes... check those two first, perhaps.

      Use AJAX image resizer plugin if they do just need to be resized.

  9. Zsolt Edelényi
    February 16, 2016 at 7:54 am

    Is there any chance to redefine the default size of 'large' and 'medium' thumbnails?

    • James Bruce
      February 16, 2016 at 8:21 am

      Go to the WordPress settings -> Media, and you can redefine all the standard sizes.

      • Zsolt Edelényi
        February 16, 2016 at 8:24 am

        Thanks. I forgot to say, that I would like to change it from my theme. Is there any hook for that? I do not want additional sizes.

        • James Bruce
          February 16, 2016 at 8:26 am

          No, you cant change those from your theme. That's why they have the feature of defining additional sizes. If you want to change core sizes, you need to do it from the wordpress menu.

        • Zsolt Edelényi
          February 17, 2016 at 3:59 am

          Ok. Thank you.

  10. Amanda
    February 5, 2016 at 4:51 pm

    I've having trouble with my featured images ... (link to deve site: http://nfldherald.stirlingpublications.com/featured-articles/).

    They are full size - and I don't know how to change it.

  11. Mitch
    December 21, 2014 at 5:36 pm

    ?php if( has_post_thumbnail() ) { ?>
    ?php } else { ?>
    ?php include('adsense_singlepost_top_square.php') ?>
    ?php } ?>

  12. Mitch
    December 21, 2014 at 5:36 pm

    I have the following code that allows me to flip between the FEATURE image and an ADSENSE ad and I'd like to also include if an image in the post is used.

    So if "image in post" or "has post thumbnail" then show images, otherwise INCLUDED the .php ad.

    Anyone know how I can accomplish this?

  13. MMax
    May 2, 2014 at 11:04 pm

    If your using an old theme that the author hasn't updated since before WP 2.9 are you just plain out of luck on this feature?

    • James B
      May 9, 2014 at 8:34 am

      not entirely - you can use add_theme_support( 'post-thumbnails' ); to enable functionality, but you'll still need to code in the actual thumbnail output to your theme.