⏲️ Estimated reading time: 5 min
The ideal size for a featured images in a WordPress post depends on your theme and how it displays the image. However, here are some general guidelines to ensure your featured images look great:
All Sizes of Featured Images in a WordPress Post – Complete Guide
Discover all the available sizes for WordPress featured images, from thumbnails to custom dimensions. Learn how to use them effectively in your theme for better design and performance.
Introduction to WordPress Featured Image Sizes
Featured images, also known as post thumbnails, are an essential visual element in WordPress. They enhance user engagement, improve SEO, and create a professional look for your content. But did you know WordPress generates multiple sizes of the featured image every time you upload one?
In this guide, we’ll explore all default featured image sizes, how to display them in your theme, how to register custom sizes, and best practices to use them efficiently.
Default WordPress Featured Image Sizes
When you upload a featured images in WordPress, the system automatically creates several versions of it in different sizes. These include:
- Thumbnail – 150 x 150 pixels (cropped)
- Medium – 300 x 300 pixels (scaled)
- Large – 1024 x 1024 pixels (scaled)
- Full – The original image size
Thumbnail – 150 x 150 pixels (cropped)
Medium – 300 x 300 pixels (scaled)
Large – 1024 x 1024 pixels (scaled)
You can configure these sizes in your WordPress admin panel by going to:
Settings > Media
This lets you define the width and height for thumbnail, medium, and large. The “Full” size will always match the dimensions of your original uploaded image.
Where WordPress Uses These Image Sizes
Each image size has a purpose:
- Thumbnail: Used in blog post grids, recent post widgets, and category listings.
- Medium: Common in post content where a balance between size and speed is needed.
- Large: Often used for headers or full-width featured images.
- Full: For high-resolution visuals or downloadable files.
Themes and plugins may request a specific size, depending on how they’re coded. For instance, a homepage slider might use the “large” size, while a sidebar recent posts widget uses “thumbnail”.
Displaying Specific Image Sizes in a WordPress Theme
If you’re developing or editing a theme, you can control which image size is displayed with:
the_post_thumbnail('medium'); // can be 'thumbnail', 'medium', 'large', or 'full'
This flexibility allows you to serve the right image size for performance and layout optimization.
You can also add image classes or attributes for better styling:
the_post_thumbnail('large', ['class' => 'featured-image', 'alt' => get_the_title()]);
Registering Custom Featured Image Sizes
Sometimes, the default image sizes aren’t enough. For example, your design might need a 600×400 banner image. You can add custom sizes using:
add_image_size('custom-banner', 600, 400, true);
Then, to make it available in the admin area (like Gutenberg or classic editor), use:
add_filter('image_size_names_choose', function($sizes) {
return array_merge($sizes, [
'custom-banner' => 'Custom Banner'
]);
});
Now, you can select “Custom Banner” from the media library when adding images to posts or pages.
Viewing All Available Image Sizes
To see all generated image sizes for an uploaded file, you can use a plugin like Regenerate Thumbnails or programmatically print them with:
$image_id = get_post_thumbnail_id();
$image_meta = wp_get_attachment_metadata($image_id);
echo '<pre>';
print_r($image_meta['sizes']);
echo '</pre>';
This is helpful for developers or if you’re troubleshooting layout issues.
Best Practices for Featured Images Usage
- Optimize images before upload: Use tools like TinyPNG or Squoosh to compress.
- Always set alt text: It’s essential for accessibility and SEO.
- Use responsive sizes: WordPress automatically includes
srcset
, but your theme should support it. - Avoid full-size on mobile: Large images slow down mobile load times.
- Consistent aspect ratios: Keep your featured images uniform for a clean layout.
How to Regenerate Thumbnails After Changing Sizes
If you change your image dimensions via Settings > Media
or by adding new custom sizes, old images won’t automatically update. Use the Regenerate Thumbnails plugin to recreate the new sizes.
This ensures all previous uploads fit your new layout needs without manual reupload.
Responsive Featured Images in Modern Themes
Modern WordPress themes support srcset
and sizes
attributes automatically. That means the browser chooses the best image size to load based on screen size and resolution. You don’t need to manually create versions WordPress handles it for you.
However, your theme must use the_post_thumbnail()
properly and not override it with custom HTML to retain this functionality.
Conclusion
WordPress featured image sizes go beyond the simple “upload and go” mindset. Understanding how they work and how to control them empowers you to design faster, more responsive, and visually consistent websites.
Whether you’re a blogger, designer, or developer, managing your featured image sizes correctly will drastically improve performance and aesthetics.
🏷️ Tags: WordPress, featured image, image size, theme development, media settings, WordPress tutorial, image optimization, responsive images, WordPress blog, WordPress beginner
Only logged-in users can submit reports.
Discover more from HelpZone
Subscribe to get the latest posts sent to your email.