如何在WordPress中指定srcset自定义缩略图尺寸，让浏览器按需选择

Got it, let's break this down step by step. WordPress's default srcset behavior sticks to the original image's aspect ratio, but you want to swap that out for your own custom, non-matching ratios and let the browser pick based on viewport size. Here's exactly how to make that happen:

1. Register Your Custom Aspect-Ratio Image Sizes #

First, define the unique aspect-ratio sizes you need. Add this code to your theme's functions.php file:

add_action( 'after_setup_theme', 'register_custom_aspect_ratio_sizes' );
function register_custom_aspect_ratio_sizes() {
    // Example sizes with distinct aspect ratios:
    // Vertical 3:4 for mobile portrait views
    add_image_size( 'mobile-vertical', 600, 800, true );
    // Wide 16:9 for tablets/desktop landscapes
    add_image_size( 'tablet-wide', 1200, 675, true );
    // Ultra-wide 21:9 for large desktop screens
    add_image_size( 'desktop-ultrawide', 1920, 823, true );
}

• The true parameter forces hard cropping to your exact aspect ratio, so images won't get stretched or squashed.
• After adding this, you’ll need to regenerate thumbnails for existing images (use a tool like Regenerate Thumbnails if you haven’t already—no external links needed, just search the WordPress plugin repo for it).

2. Override Default srcset to Use Your Custom Sizes #

WordPress automatically builds a srcset using same-aspect-ratio images. We need to replace that with our custom sizes using the wp_calculate_image_srcset filter:

add_filter( 'wp_calculate_image_srcset', 'custom_aspect_ratio_srcset', 10, 5 );
function custom_aspect_ratio_srcset( $sources, $size_array, $image_src, $image_meta, $attachment_id ) {
    // Clear out WordPress's default srcset sources
    $sources = [];
    
    // List your custom size slugs here (match what you registered earlier)
    $custom_sizes = [
        'mobile-vertical',
        'tablet-wide',
        'desktop-ultrawide'
    ];
    
    foreach ( $custom_sizes as $size ) {
        $image_data = wp_get_attachment_image_src( $attachment_id, $size );
        if ( $image_data ) {
            $width = $image_data[1];
            $sources[ $width ] = [
                'url' => $image_data[0],
                'descriptor' => 'w',
                'value' => $width
            ];
        }
    }
    
    return $sources;
}

This filter replaces the auto-generated srcset with only your custom, different-aspect-ratio images.

3. Tell the Browser When to Use Each Size (Set the sizes Attribute) #

The sizes attribute is critical—it tells the browser which image size to load at different viewport widths. You can set this globally or per-image:

Option A: Global Filter (Applies to All Images) #

Add this to functions.php to set a universal rule:

add_filter( 'wp_calculate_image_sizes', 'custom_aspect_ratio_sizes', 10, 3 );
function custom_aspect_ratio_sizes( $sizes, $size_array, $attachment_id ) {
    // Map our custom sizes to viewport breakpoints
    return '(max-width: 600px) 600px, (max-width: 1200px) 1200px, 1920px';
}

This tells the browser:

• For viewports ≤600px: Use the 600px-wide mobile vertical image
• For viewports ≤1200px: Use the 1200px-wide tablet wide image
• For anything larger: Use the 1920px-wide desktop ultrawide image

Option B: Per-Image Control #

If you want different behavior for specific images, specify the sizes attribute directly when calling the_post_thumbnail:

the_post_thumbnail( 'large', [
    'sizes' => '(max-width: 600px) 600px, (max-width: 1200px) 1200px, 1920px'
] );

Quick Checks to Ensure It Works #

• Test with Dev Tools: Use your browser's Network tab to verify the correct image is being downloaded at different viewport sizes.
• Adjust Cropping: If you don’t want hard cropping (e.g., you want to scale without cutting parts of the image), set the fourth parameter in add_image_size to false—just note this might make images slightly off your exact aspect ratio.

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