WordPress移动端响应式文章图片尺寸适配及srcset设置咨询

Hey there! Let's walk through how to set up responsive image sizing with srcset exactly as you need it—targeting those specific breakpoints for your post images (both in article lists and single posts).

First, it looks like you're using WordPress (given the post-thumb and post-thumb-large naming convention for custom image sizes), so I'll tailor this solution to WP, but I'll also note how to adapt it for other platforms if needed.

1. First: Confirm Your Custom Image Sizes Are Registered #

If you haven't already, make sure your two custom sizes are added to your theme's functions.php file. This tells WordPress to generate these sizes when you upload images:

add_action( 'after_setup_theme', 'register_custom_image_sizes' );
function register_custom_image_sizes() {
    // post-thumb: For screens ≤400px (width 400px, height auto)
    add_image_size( 'post-thumb', 400, 9999, false );
    // post-thumb-large: For screens 400px-767px (width 767px, height auto)
    add_image_size( 'post-thumb-large', 767, 9999, false );
}

Important: After adding this, regenerate your existing media library images (use the Regenerate Thumbnails plugin or run wp media regenerate via WP CLI) so WordPress creates the new sizes for old images.

2. Adding srcset to Your Images #

You'll need to handle two main scenarios: article list thumbnails, and images inserted into single posts.

Scenario 1: Article List Thumbnails #

If your theme uses the_post_thumbnail() to output list thumbnails, replace that code with a custom img tag that includes srcset and sizes. Find the relevant template file (like index.php, archive.php, or content.php) and update the thumbnail section:

// Grab the URLs for both custom sizes
$small_thumb_url = get_the_post_thumbnail_url( get_the_ID(), 'post-thumb' );
$large_thumb_url = get_the_post_thumbnail_url( get_the_ID(), 'post-thumb-large' );

// Output the responsive image tag
echo '<img 
    src="' . esc_url( $small_thumb_url ) . '"
    srcset="' . esc_url( $small_thumb_url ) . ' 400w, ' . esc_url( $large_thumb_url ) . ' 767w"
    sizes="(max-width: 400px) 400px, (max-width: 767px) 767px"
    alt="' . esc_attr( get_the_title() ) . '"
    class="post-thumbnail">';

The sizes attribute tells the browser:

• Use the 400px-wide image when the screen is ≤400px
• Use the 767px-wide image when the screen is between 400px and 767px

Scenario 2: Images in Single Posts #

For images inserted via the WordPress editor, WP adds a default srcset, but it won't use your custom sizes by default. Add these filters to functions.php to override this behavior:

// Customize srcset to use your image sizes
add_filter( 'wp_calculate_image_srcset', 'custom_post_image_srcset', 10, 5 );
function custom_post_image_srcset( $sources, $size_array, $image_src, $image_meta, $attachment_id ) {
    // Apply this rule to single posts and article lists
    if ( is_single() || is_home() || is_archive() ) {
        $sources = array();
        
        // Add your custom small size
        $small_thumb = wp_get_attachment_image_src( $attachment_id, 'post-thumb' );
        if ( $small_thumb ) {
            $sources[ $small_thumb[1] ] = array(
                'url' => $small_thumb[0],
                'descriptor' => 'w',
                'value' => $small_thumb[1],
            );
        }
        
        // Add your custom large size
        $large_thumb = wp_get_attachment_image_src( $attachment_id, 'post-thumb-large' );
        if ( $large_thumb ) {
            $sources[ $large_thumb[1] ] = array(
                'url' => $large_thumb[0],
                'descriptor' => 'w',
                'value' => $large_thumb[1],
            );
        }
    }
    return $sources;
}

// Set the matching sizes attribute
add_filter( 'wp_calculate_image_sizes', 'custom_post_image_sizes', 10, 3 );
function custom_post_image_sizes( $sizes, $size_array, $attachment_id ) {
    if ( is_single() || is_home() || is_archive() ) {
        $sizes = '(max-width: 400px) 400px, (max-width: 767px) 767px';
    }
    return $sizes;
}

For Non-WordPress Sites #

If you're using a different CMS or static site, simply hardcode the srcset and sizes into your image tags wherever you output post images:

<img 
    src="path-to-post-thumb.jpg"
    srcset="path-to-post-thumb.jpg 400w, path-to-post-thumb-large.jpg 767w"
    sizes="(max-width: 400px) 400px, (max-width: 767px) 767px"
    alt="Your image description">

3. Test It Out #

After making these changes:

1. Open your site in a browser
2. Use the developer tools (F12) to inspect an image—you should see the srcset and sizes attributes matching your setup
3. Use the responsive design tool to switch between screen widths, and verify the browser loads the correct image size

内容的提问来源于stack exchange，提问作者jOE