Auch schon gehabt? – Man baut einen tollen, voll breiten Hero-Header mit einem gestochen scharfen Bild in hoher Auflösung, und er sieht super aus – auf Desktops. Aber auf dem Smartphones wirkt das Bild verwaschen, pixelig oder zeigt gar noch JPG-Artefakte. Grund dafür ist, dass WordPress nicht einfach das Bild, sondern ein Set unterschiedlicher Bildgrößen im Quellcode bereitstellt, und je nach Browserfensterbreite wird entweder die große Version oder eine der kleineren geladen.

Der Quellcode, der entsteht, sie so aus:

<img decoding="async" loading="lazy" width="2560" height="1499" class="wp-block-cover__image-background wp-image-30362"
    alt="My Hero Image" src="https://testweb.site/wp-content/uploads/2023/09/hero-image.jpg"
    style="object-position:50% 100%" data-object-fit="cover" data-object-position="50% 100%" srcset="https://testweb.site/wp-content/uploads/2023/09/hero-image.jpg 2560w, 
        https://testweb.site/wp-content/uploads/2023/09/hero-image-960x562.jpg 960w, 
        https://testweb.site/wp-content/uploads/2023/09/hero-image-1600x937.jpg 1600w, 
        https://testweb.site/wp-content/uploads/2023/09/hero-image-600x351.jpg 600w, 
        https://testweb.site/wp-content/uploads/2023/09/hero-image-768x450.jpg 768w, 
        https://testweb.site/wp-content/uploads/2023/09/hero-image-1536x899.jpg 1536w, 
        https://testweb.site/wp-content/uploads/2023/09/hero-image-2048x1199.jpg 2048w"
    sizes="(max-width: 2560px) 100vw, 2560px" />

Ab einer gewissen Hero-Höhe wird das Bild damit in die falsche Richtung skaliert, und es wirkt pixelig / unscharf.

Recherchen führten mich zu einem Filter mit dem Namen max_srcset_image_width. Hier kann man über eine Filterfunktion darüber bestimmen, bis zu welcher Bildbreite ein Format überhaupt in ein Imageset aufgenommen werden soll. Es soll damit vermieden werden, dass zu große Bilder die Performance beeinträchtigen. Nun ist Performance sicher ein Thema, Qualität allerdings auch, besonders auf Fotografie-Websites.

Dafür gibt es allerdings keinen min_srcset_image_width-Filter.

Im Quellcode der media.php stieß ich dann allerdings auf einen anderen, ebenso geeigneten Filter.

	/**
	 * Filters an image's 'srcset' sources.
	 * ...
	 */
	$sources = apply_filters( 'wp_calculate_image_srcset', $sources, $size_array, $image_src, $image_meta, $attachment_id );

Damit kann man selbst darüber bestimmen, welche Bildgrößen im Set landen (und welche nicht). Eine Lösung wäre, zu prüfen, welche Größe das eingefügte Bild hat, und ab einer bestimmen Größe (wie man sie z.B. nur für Hero-Bilder braucht) sämtliche Größen zu entfernen, die so klein sind, dass eine scharfe Abbildung auf Smartphones nicht mehr funktioniert (am besten ein wenig mit den Zahlen spielen).

Das folgende Snippet definiert, dass es für Bilder die größer sind als 2000 Pixel keine Zuschnitte geben wird, die kleiner sind als 1000 Pixel. Wenn dann so ein Bild als Cover Image verwendet wird, gilt für Smartphones dann die Auflösung von 1000 Pixel. Damit wird vermieden, dass zu kleine entstehen die auf kleinen Displays dann blury wirken:

add_filter( 'wp_calculate_image_srcset', 'hero_images_srcset', 10, 5 );
function hero_images_srcset($sources, $size_array, $image_src, $image_meta, $attachment_id) {
    if ( $size_array[0] >= 2000 ){
        foreach( $sources as $size => $source ) {
        if ( $size < 1000 ) { 
            unset( $sources[$size] ); 
            } 
        } 
    } 
    return $sources;
}

Bei Bildern mit 2000 Pixeln und mehr (was man eben für große Hero-Header verwendet, wäre es immer dieselbe Bildgröße, könnte man den Filter auch darauf begrenzen, z.B. if ( $size_array[0] === 2560 ) ) überprüft die Funktion die Größe der weiteren Quellbilder und sortiert jene aus, die weniger als 1000 Pixel breit sind.

Man kann die Veränderung auch im Quellcode erkennen:

<img decoding="async" loading="lazy" width="2560" height="1499" class="wp-block-cover__image-background wp-image-30362"
    alt="My Hero Image" src="http://testweb.site/wp-content/uploads/2023/09/hero-image.jpg"
    style="object-position:50% 100%" data-object-fit="cover" data-object-position="50% 100%" srcset="http://testweb.site/wp-content/uploads/2023/09/hero-image.jpg 2560w, 
    http://testweb.site/wp-content/uploads/2023/09/hero-image-1600x937.jpg 1600w, 
    http://testweb.site/wp-content/uploads/2023/09/hero-image-1536x899.jpg 1536w, 
    http://testweb.site/wp-content/uploads/2023/09/hero-image-2048x1199.jpg 2048w"
    sizes="(max-width: 2560px) 100vw, 2560px" />