WordPress featured image too big? Sizing fixes

If a WordPress featured image is too big, check whether the problem is its visible dimensions or the file the page downloads. The theme controls the placement. WordPress's generated image size controls an available source file. You may need to change both to get a smaller, appropriately sharp result.

There is no single featured image size for every WordPress site. A full-width article header, a narrow archive card, and a social preview can use the same attachment in different ways. Start with the placement that needs fixing.

Find the setting that controls the image

Open the affected page and identify where the image appears. A featured image is selected in the post settings, but its public layout usually comes from a template, theme setting, or page builder.

For a block theme, the Post Featured Image block in the relevant template controls the featured-image placement. For a classic theme, look for documented theme options and the PHP template that renders it. A builder can have separate settings for the post header and archive card.

Inspect the public image in browser developer tools. The image element's currentSrc property identifies its selected URL. Record its displayed width and height and the downloaded file's pixel dimensions. A large-looking image needs a layout change. A small-looking image with a very large download needs a source-selection or encoding change.

Change featured image dimensions in a block theme

1. Open Appearance > Editor if your active theme provides the Site Editor.

2. Find the template used by the affected page, such as Single Posts or an archive template.

3. Select the Post Featured Image block. List View can make it easier to locate inside groups or a Query Loop.

4. Review its alignment, width, height, and aspect ratio controls where the theme exposes them.

5. Save the template and inspect a public post at mobile and desktop widths.

The Post Featured Image block documentation describes alignment and dimension controls, with options that vary by context and theme. Full-width alignment or a tall fixed height can be the reason a header occupies too much of the screen.

Choose a layout from the content you publish. A wide landscape crop can work for photographs composed for it; it can cut off a portrait or screenshot. If the block offers scale controls, review how those controls fit or crop the image in the chosen area.

Changing a shared template affects the posts using it. Check more than the one post that prompted the change, especially if older featured images have different proportions. A custom template can be useful when one article genuinely needs another presentation.

Check classic-theme and builder options

A classic theme may expose featured-image width, ratio, or placement through the Customizer or its own settings screen. Use the theme's documentation to locate the active control. A page builder can override that output with a single-post or archive template.

If a setting changes nothing, verify which template the public page actually uses. Check cached HTML and generated builder styles after saving. Editing a post's inline Image block does not necessarily change its featured-image placement.

Settings > Media controls standard generated image sizes. The theme's post-thumbnail size is separate from the Media screen's thumbnail size, as documented for the_post_thumbnail(). Changing the thumbnail setting alone may leave the header unchanged.

Reduce the visible width with targeted CSS

If the theme lacks a suitable layout control, add a narrowly scoped rule through its supported custom CSS mechanism or child theme. Use a class specific to the featured-image placement and inspect the element that carries it.

This example assumes the image element has a custom class named article-featured-image:

.article-featured-image {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin-inline: auto;
}

The 720-pixel maximum illustrates a narrow article layout. Choose the value from your design and verify that the class is on the public image element. A block's custom class can be on a wrapper instead; in that case, use a selector appropriate to that markup. A wrapper with its own dimensions may also need adjustment.

For a fixed-ratio crop, a container and object-fit: cover can control presentation. The object-fit documentation explains how cover fills the available box and can crop the image. Check the subject's position and the mobile crop.

CSS changes displayed size. Inspect the requested file separately before expecting a smaller transfer. Avoid fixed width and height values that stretch the image away from its natural ratio.

Register a dedicated featured image size

For a classic PHP template, confirm that the theme supports featured images and that the post has one assigned. The featured-image theme documentation explains the required post-thumbnails support. A developer can then register a header size. This example requests a cropped 1200-by-675 variant; choose dimensions from your layout:

function site_register_article_featured_size() {
    add_image_size( 'article-featured', 1200, 675, true );
}
add_action( 'after_setup_theme', 'site_register_article_featured_size', 20 );

add_image_size() registers the named size. The final true requests a hard crop; false fits proportionally within the specified bounds. A source that is too small may not yield the requested dimensions.

Store theme-related code in a child theme and test on staging. Registering the size only makes the variant available. The relevant template must request it:

if ( has_post_thumbnail() ) {
    the_post_thumbnail( 'article-featured', array(
        'class' => 'article-featured-image',
    ) );
}

Place that call in the appropriate post template, replacing the featured-image call that owns the placement. The function uses the current post in the WordPress Loop. Adding a second call elsewhere can display the image twice.

If the theme uses the default post-thumbnail size throughout, set_post_thumbnail_size() changes that registered size. A separate named size gives more precise control when archive cards and article headers need different crops. Neither function rebuilds existing files immediately.

Regenerate existing images after a size change

Upload a fresh test image first to confirm the registration and template request. Then back up uploads and the database before rebuilding older derivatives.

You need WP-CLI installed, shell access, a working server image editor, and permission to write uploads. From the WordPress installation directory, confirm the CLI and WordPress version:

wp --info
wp core version

Regenerate one test attachment first. Here, 123 is an example ID; replace it with an attachment ID from that installation. Keep the theme or code registering article-featured active:

wp media regenerate 123 --image_size=article-featured --skip-delete

The regeneration command supports a named size and selected attachments. Retaining old thumbnails helps when existing pages still reference them, but generated filenames can still be overwritten. Verify one result before extending the operation to a larger batch.

For WebP or AVIF attachments, confirm server format support under Tools > Site Health > Info > Media Handling before regeneration. The WordPress resizing guide explains the difference between new uploads and server-side rebuilding.

If the image becomes blurry, inspect the available source resolution. Regeneration cannot recover detail from a small upload. If it is cropped badly, change the crop policy or choose a source composed for that placement, then rebuild the affected variant.

Verify downloads, loading, and other placements

On the public page, check the selected resource at a mobile width and at the largest desktop width. Responsive image selection can legitimately use a wider file for a high-density screen. WordPress's responsive candidate calculation considers compatible image proportions, so differently cropped variants need a separate check.

If dimensions are suitable but bytes remain high, use the image compression workflow. If the featured image is the visible main image, follow the LCP loading guidance and verify that a lazy-loading rule does not delay it. A layout adjustment alone does not change its request priority.

Check an archive card, related-post card, and any image download that use the same attachment. Inspect the social preview configuration separately: it may choose another image URL. Avoid using a universal social-preview dimension as the rule for every featured-image placement.

If the header still uses the old size, inspect the active template's requested size, attachment metadata, and cached markup. A new variant can exist on disk while the template continues to request Full Size. Correct that request and reload the public page before running another library-wide regeneration.

Featured images from a shared media library

For images stored in Vyso, resize and crop transformations can supply different versions for an article header and an archive card while keeping the original asset. A WordPress template or integration can use the resulting delivery URLs. Vyso is also developing a native WordPress plugin to make these resize and crop features available directly in WordPress. The theme still controls visible placement and responsive markup, so check the crop and selected file at each layout width.