Bilder abhängig von der Monitorgröße anzeigen

Gewöhnlich bindet man Grafiken mit dem Img-Tag ein, es lohnt sich aber ein Blick auf das Picture-Tag.

In einem Video von Programmieren mit Mario bin ich auf eine interessante Möglichkeit gestoßen, mit Bildern in responsiven Webseiten zu arbeiten. Tatsächlich hatte ich das Problem bereits, das ich in der mobilen Ansicht ein anderes Bild anzeigen wollte, als in der Desktop-Ansicht. Damals habe ich das über CSS gelöst. Doch mit dem Picture-Tag geht das viel einfacher.

Bild für die höhere Auflösung

Mit dem Picture-Tag und dem media-Attribute lässt sich festlegen, welches Bild bei einer bestimmten Bildschirmweite eingeblendet werden soll. Dabei fungiert das media-Attribute in gewisser Weiße ganz ähnlich wie die Media Queries in einem CSS-Dokument.

Bild für die niedrige Auflösung

Man kann also beispielsweise mit max-width einem Bild sagen nur bis zu einer gewissen Auflösung X zu erscheinen, und dann mit min-width das nächste Bild einzubinden. Dahinter steckt folgendes HTML:

<picture>            
<!-- Einbindung über source-tag; media-tag legt fest bei welcher Pixelweite das Bild angezeigt werden soll -->            
<source srcset="spinnennetz-hoch.jpg" media="(max-width:599px)">            
<source srcset="spinnenetz-breit.jpg" media="(min-width:600px)">            
<!-- img-Tag ist der Fallback -->            
<img src="spinnenetz-breit.jpg" alt="">        
</picture>

Das als drittes über das klassische IMG-Tag eingebundene Bild fungiert als Fallback, wird also angezeigt, wenn die beiden mit Source eingebundenen Bilder nicht angezeigt werden. Und das ist scheinbar leider nötig, denn nicht jeder Browser kann mit diesem Code umgehen. Bei meinem Test funktionierte es perfekt mit Firefox, Chrome und Edge allerdings zeigten konsequent den Fallback an.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.