Neu ist an HTML 5.1 einiges – das meiste wird bereits von allen gängigen Browsern unterstützt. Ins Zentrum der Neuerungen rückt abermals die Anpassung multimedialer Inhalte im responsiven Webdesign. Problematisch war bisher vor allem die Darstellung unterschiedlicher Bilder bei wechselnder Auflösung. Zu diesen Zwecken sollte bereits mit HTML5 der <picture>-Container zum Standard werden – daraus wurde damals aus Zeitgründen nichts. Allerdings nutzen Webentwickler das Element dennoch – ungeachtet dessen, dass es nicht im Zuge der Einführung von HTML5 zum offiziellen Standard erhoben worden war. Mittlerweile verstehen alle üblichen Browser das <picture>-Element: Die Standardisierung mit dem neuen HTML macht es jetzt auch offiziell.
Beim <picture>-Element handelt es sich um einen Container: Über unterschiedliche Source-Elemente können Bilddateien eingebunden werden. Dadurch werden jeweils nur die für Bildschirmgröße und -auflösung passenden Bildquellen geladen, was Übertragungszeiten spart und der mobilen Gestaltung einer Website zugutekommt. Breitbandschonend können so für hochauflösende Displays auch alternative Inhalte bereitgestellt werden. Allerdings ist dafür noch das ebenfalls mit HTML 5.1 eingeführte Attribut <srcset> notwendig: Es setzt die Bilder und die verschiedenen Größen in Beziehung zueinander. Die Website SelfHTML hat in dem folgenden Beispiel dargestellt, wie die fertige Einbindung inklusive Fallback mit <img> am Ende aussehen kann:
<picture>
<source media="(min-width: 1024px)" srcset="https://www.ionos.de/digitalguidefeuerwehr-1600.jpg">
<source media="(min-width: 480px)" srcset="https://www.ionos.de/digitalguidefeuerwehr-480.jpg">
<!---Fallback---> <img src="https://www.ionos.de/digitalguidefeuerwehr-480.jpg" srcset="https://www.ionos.de/digitalguidefeuerwehr-320.jpg" alt="Feuerwehrfest 2014">
</picture>
Das <picture>-Element und <srcset> gehen gewissermaßen Hand in Hand. Auch wenn die neuesten und gängigsten Browser-Versionen beides bereits unterstützen: Für veraltete Browser wird zusätzlich mit dem Fallback sichergestellt, dass die Grafik immer korrekt angezeigt wird. Innerhalb der Source-Elemente werden schließlich die Anforderungen an Bildschirmeigenschaften wie Breite und Pixeldichte definiert.