WordPress Image Sizes: Recommended Dimensions & Resolutions

Optimizing image sizes in WordPress is an essential part of maintaining a fast-loading and user-friendly website. 

Image files are one of the biggest contributors to poor website performance. The more images you have and the larger they are, the slower your website will be to load. Properly sized images not only improve site speed, they reduce unnecessary storage usage and improve search rankings. 

This guide covers the recommended dimensions and resolutions for various image types in WordPress, image optimization techniques, and tips on managing your image files to keep your media library tidy.

Default WordPress image sizes

When you upload an image, WordPress automatically generates multiple copies in different sizes to accommodate various placements across your site. The default image sizes are:

• Thumbnail: 150×150 pixels (cropped to a square aspect ratio). Ideal for small previews or gallery images.
• Medium: 300×300 pixels. Suitable for in-content images.
• Large: 1024×1024 pixels. Used for full-width content or featured images.
• Full Size: The original dimensions of the uploaded image.

These sizes can be adjusted by navigating to Settings > Media in your WordPress dashboard. Modifying these settings will affect future uploads, but existing images will remain unchanged.

Recommended image dimensions for specific uses

Choosing the appropriate image dimensions ensures clarity and optimal loading times. Here are some suggested sizes for common image types:

Pages and posts

• Recommended Size: 1200×800 pixels or 1200×628 pixels
• Usage: Ensures clear, high-quality visuals for general page and post content, balancing aesthetics and performance. The 1200×628 pixel size is most compatible with social media platforms.

Featured images

• Recommended Size: 1200×628 pixels
• Usage: Displayed prominently at the top of posts or pages; ensures compatibility with social media sharing.

Header or background images

• Recommended Size: 1920×1080 pixels
• Usage: Provides a high-resolution, full-width visual for headers, hero sections, or background images.

Logo images

• Recommended Size: 250×100 pixels
• Usage: Ensures clarity and sharpness when displayed in the header or footer. Keep in mind that your exact logo size and dimension will vary depending on its aspect ratio.

Thumbnail images

• Recommended Size: 150×150 pixels
• Usage: Used for small previews, such as in galleries or post excerpts.

Your theme or plugins may also include specific suggested image sizes that are assigned to certain post types, page templates, or other custom content. For example, popular events calendar plugin, The Events Calendar, uses a featured image size of 1280×720 pixels.

How to customize the default image sizes

While WordPress provides default image sizes, you might need custom dimensions to suit your theme or design preferences. To add custom image sizes, edit the functions.php file.

Editing the functions.php file:

1. Access your theme’s functions.php file: It’s advisable to use a child theme to prevent changes from being overwritten during updates.
   
2. Add the add_image_size() function: Insert the following code, replacing ‘custom-size-name’ with your preferred name and specifying the desired width and height in pixels:
   

add_image_size( 'custom-size-name', 600, 400, true );

3. The true parameter enables hard cropping to the exact dimensions specified.
   
4. Regenerate thumbnails: After adding custom sizes, regenerate thumbnails for existing images using a plugin like Force Regenerate Thumbnails. This plugin will delete all previous thumbnail image sizes and regenerate new images based on your defined image sizes.

This process ensures that your images are tailored to your site’s specific needs.

How to optimize images for web performance

There are several ways that you can create optimized images for your website. The approach you use will largely depend on your particular needs, who is visiting your website, and how you use your images off-site. 

Let’s take a look at the different steps you can take to optimize your images.

1. Analyze your images

If you haven’t uploaded your images to your website yet, you can check your file sizes and optimize your images before you upload them. What if you’ve already uploaded your images to your Media Library, though? Scrolling through your images either in your WordPress dashboard or using SFTP can be time-consuming.

The quickest way to discover which image files could benefit from resizing and compression is by using the Jetpack Boost plugin. It includes an image analyzer that scans your site and identifies images that need optimization.

2. Compress images

You can use desktop apps, browser-based tools, or plugins to compress your images.

There are free desktop apps like PhotoBulk (Mac and Windows) or ImageOptim (Mac only), or if you’re already using Adobe software, Photoshop has excellent image compression capability.    

If online tools are more practical or convenient for you, TinyPNG and Imagify are both great options for reducing file sizes without noticeable quality loss.

If you prefer a simpler and faster approach, consider installing a plugin such as Jetpack Boost. It automatically converts your images to the efficient WebP format and serves them through an image CDN, ensuring faster load times with minimal effort.

3. Use appropriate file formats

WebP and AVIF files provide maximum image compression while retaining image quality. Both allow for transparent images and WebP supports animation files (like GIFs). These file types are also supported in most major browsers and most social media platforms.

The downside to these two file types is that they are not supported in email. So if you’re importing content directly from your website to your email software (e.g. a WooCommerce integration pulling in products directly from your website into your emails), your images will not display in inboxes. 

More universally readable file types are JPGs and PNGs. JPEGs are suitable for photographs due to their compression capabilities, while PNGs are better for images requiring transparency or with fewer colors. 

Even when compressed, JPGs and PNGs will often still take up more space than similar-quality WebP and AVIF files, but they may be more practical if your site is integrated with a variety of other software or if maximum accessibility is a priority, since WebP and AVIF won’t work on older browsers.

4. Leverage responsive images

WordPress automatically includes the srcset attribute in image tags, allowing browsers to select the appropriate image size based on the device’s screen. Ensure your theme supports this feature.

Most modern, block-based themes will support the srcset attribute, but there may be older themes that do not. If you’re not sure whether your theme supports this attribute or not, you can check using your browser’s inspector tool. 

Load any page on your website that contains an image. Then, right-click the image and select Inspect. Find the <img> element and look for srcset. If you see it there, then you’ll know your theme supports it.

Implementing these practices helps maintain a balance between image quality and site performance. Experiment with your image optimization techniques to get the balance just right for your needs. Don’t forget to use these approaches with all the images you upload to your website — not just when you first create it.

Managing additional image sizes from themes and plugins

Themes and plugins can introduce additional image sizes, leading to unnecessary files occupying server space. To manage these sizes:

Identifying registered image sizes

Use plugins like Media Hygiene to view and manage all images and sizes registered on your site. Check to see which image sizes are being used and decide whether you want to delete them.

Disabling unused image sizes

If certain sizes are unnecessary, you can remove them using plugins like Media Hygiene or by adding the following code to your theme’s functions.php file:

function remove_default_image_sizes( $sizes ) {

    unset( $sizes['thumbnail'] );

    unset( $sizes['medium'] );

    unset( $sizes['large'] );

    return $sizes;

}

add_filter('intermediate_image_sizes_advanced', 'remove_default_image_sizes');

Modify the unset lines to target the specific sizes you wish to remove.

Regularly auditing and managing image sizes helps in maintaining an organized media library and conserving server resources.

Note: Before you disable or delete any image sizes, make a backup of your site. Ideally, you should test any major changes like this on a staging site or locally, rather than on your live site.

How to ensure compatibility with high-resolution displays 

With the prevalence of high-resolution screens, such as Retina displays, it’s essential to serve images that look sharp on all devices. To achieve this:

• Upload larger images: Provide images at double the intended display size. For example, for a 300×300 pixel display area, upload a 600×600 pixel image.
• Utilize the srcset attribute: As mentioned earlier, the responsive image feature in WordPress will automatically serve the appropriate image size based on the device’s capabilities as long as your theme supports this feature.

Best practices for managing WordPress images

To keep your WordPress media library optimized and efficient, consider these best practices:

• Use descriptive filenames: Rename image files before uploading to include relevant keywords (e.g., blue-sneakers-running.jpg instead of IMG1234.jpg).
• Organize the media library: Utilize folders or media management plugins like Media Library Assistant.
• Implement lazy loading: WordPress includes native lazy loading for images, reducing initial page load times by loading images only when they come into view.
• Optimize image sizes: Use plugins, desktop apps, or browser-based tools to analyze and optimize your images for optimal performance.
• Install an image CDN: Jetpack Boost provides an image CDN that resizes and serves your WordPress images in WebP and other page speed-friendly formats.

Common WordPress image size problems

Even with the right settings, things can go wrong. Here are expert solutions to the most frequent image issues:

Problem: My images look blurry after upload.

This often happens when a small image is displayed in a larger container. Your theme’s CSS may be stretching it. Solution: Always upload images that are at least as large as the largest container they will appear in. Use your browser’s “Inspect” tool to find the container size and upload an image to match.

Problem: My featured images are cropped incorrectly.

Your theme has specific, hard-coded image sizes for featured images. Solution: Check your theme’s documentation for the recommended featured image dimensions (e.g., 1200x675px). Alternatively, use a plugin like ‘Regenerate Thumbnails’ after changing themes to resize your images to the new specifications.

Problem: My site is still slow despite compressing images.

Your issue might be the sheer number of images loading at once. Solution: Ensure lazy loading is enabled (it’s a WordPress core feature since version 5.5). Additionally, use a CDN (Content Delivery Network) to serve images from a server closer to your user, which drastically reduces load times. Jetpack Boost includes a free image CDN. Learn more here: https://jetpack.com/boost/

Frequently asked questions

What is the best image size for a WordPress blog post?

The best image size for most WordPress blog posts is 1200 pixels wide by 628 to 675 pixels tall. This size works very well for images inside your content. It is also great for featured images because it looks good when shared on social media sites.

Always aim to keep the file size below 150 KB. A smaller file size helps your page load faster. A fast page is important for keeping your visitors happy and for getting a better position in search engine results. So, focus on both the dimensions and the final file size.

Why do my images look blurry on my website?

Your images likely look blurry because a small picture is being stretched to fit a big space. This happens if you upload an image that is smaller than its container on the page. For instance, if your website’s content area is 800 pixels wide, but you upload a 400-pixel image, the browser will stretch it. This stretching action makes the image lose its sharpness.

To fix this, you must upload an image that is at least as large as the container it will be shown in. You can use your browser’s developer tools to find the container size.

What is the difference between JPG, PNG, and WebP?

JPG, PNG, and WebP are different types of image files. You should use JPG for all regular photographs and pictures with many colors. JPG files can be made very small. Use PNG when you need a picture with a transparent background, like a logo. PNG files are often larger than JPGs but they keep their quality.

WebP is a newer format that is great for all kinds of images. It creates very small files with excellent quality. Most modern browsers support WebP, and using it can make your website much faster.

How do I optimize images for SEO in WordPress?

To optimize images for SEO, you need to do three main things. First, give your image file a descriptive name before you upload it. For example, blue-wordpress-t-shirt.jpg is much better than IMG_1234.jpg. Second, write a clear and descriptive alt text for every image you upload.

The alt text helps search engines understand what your image is about. It also helps people who cannot see the image. Third, make sure your images load quickly by compressing them. Fast-loading images contribute to a good user experience, which search engines reward.

What is a CDN and do I need one for my images?

A CDN, or Content Delivery Network, is a group of servers located all over the globe. These servers store copies of your website’s files, including your images. When someone visits your site, the CDN sends the images from the server that is closest to them. This makes your images load much faster for everyone, no matter where they are.

If your website has visitors from different countries, using a CDN is a very effective way to improve your site’s speed and user experience. Many modern hosting providers and plugins like Jetpack Boost offer a CDN service.

How does lazy loading for images work and is it good for SEO?

Lazy loading is a technique that tells a web page not to load an image until it is about to appear on the user’s screen. Instead of loading all images at once, it waits until the user scrolls down the page. This is very good for your website’s initial load time, which is an important factor for SEO.

A faster initial load provides a better user experience, and search engines prefer sites that load quickly. WordPress has included lazy loading as a default feature since version 5.5, so it is already helping your site’s performance.

What is the correct size for a WordPress featured image?

The best size for a WordPress featured image is typically 1200 pixels wide by 628 to 900 pixels tall for a landscape orientation. If you prefer a portrait orientation, you would use 628 to 900 pixels wide by 1200 pixels tall. However, the most important factor is what your specific WordPress theme recommends.

Different themes are built with different layouts and may require a certain featured image size to look their best. Always check your theme’s documentation first to see if it suggests a specific dimension for featured images.

Can large images really slow down my website that much?

Yes, large images are one of the biggest causes of slow websites. Every image on a page is a separate file that a visitor’s browser must download. The larger the file size of an image, the longer it takes to download.

If you have several large images on one page, the total download time adds up quickly, making the page feel very slow to load. A slow website can frustrate visitors and cause them to leave. It can also hurt your search engine rankings, as page speed is a known ranking factor.