Hmmmm, dann hole ich mal ein klein wenig weiter aus: ich wollte zunächst einmal verstehen, was die Zeile
$custom_header_sizes = apply_filters( 'twentysixteen_custom_header_sizes', '(max-width: 709px) 85vw, (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px' );
eigentlich genau macht - so richtig klar ist mir das nämlich nicht.
Wenn du dir die nachfolgende Zeile anschaust sollte es vermutlich klarer werden:
<img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
in der aktuellen WordPress Version kann _nach_ Jahren des wartens - WordPress _jetzt_ Responsive Images.
Um die Darstellungs Probleme von Bildern auf unterschiedlichen Displays und Monitoren in Zukunft mit reinem HTML lösen zu können, hat sich die Responsive Images Community Group gegründet. Die Gruppe hat mehrere Jahre lang Lösungsvorschläge erarbeitet und hitzig diskutiert.
Im Rahmen der Diskussion wurden u.a. die möglichen Anwendungsfälle für Responsive Images formuliert:
Bilder sollen mit unterschiedlicher Auflösung für normale und hochauflösende Displays ausgegeben werden
Bilder innerhalb eines flexiblen Web-Layouts (responsive Layout) sollen mit unterschiedlicher Abmessung für verschiedene Viewport-Größen ausgegeben werden
Es sollen unterschiedliche Bildausschnitte, Seitenverhältnisse oder Motive für verschiedene Viewport-Größen verwendet werden (Art Direction)
Es sollen unterschiedliche Dateiformate für unterschiedliche Browser verwendet werden
Kombinationen der letzten vier Punkte
Um diese Anwendungsfälle zu lösen, gibt es nun ein weiteres HTML-Element namens <picture>, die neuen Attribute srcset und sizes und die Werte x, w und vw.
In Kombination kann man damit jeden beschriebenen Anwendungsfall damit lösen.
Das srcset-Attribut überschreibt in kompatiblen Browser das src-Attribut und stellt eine Liste mit verschiedenen Bildquellen bereit.
Die von dir zitierte Zeile hat den Inhalt von dem Attribute sizes
Zitat aus Selfhtml:
Das Attribut:
sizes besteht aus einer durch Komma getrennten Liste, die die dargestellte Breite des Bildes beschreibt. Diese Information nutzt der Browser um zu entscheiden, welches der in srcset definierten Bildquellen geladen werden soll.
Also dachte ich, es sei eine gute Idee, diejenige Stelle zu suchen, an der der Hook definiert ist und zu schauen, welche Callback-Funktion da aufgerufen wird. Aber da es diese Definition nirgendwo gibt, ist mir dieser Weg also verbaut.
https://responsiveimages.org/
