Html5 Tag <picture>
Arc

Html5 Tag <picture>

Damit das Bild auch immer sitzt.

Das <picture> Element

Der Html Tag <picture> kann als Container für <img> Tags gesehen werden. Wobei der Container dazu dient mehrere Source angaben zu machen und damit unterschiedliche Bilder je nach Display Breite, Höhe bzw. Auflösung auszuliefern. 

Attribut media (optional)

Mit dem Attribut media können Media Queries angegeben werden, sprich Abgrenzungen bei denen unterschiedlicher Inhalt verwendet wird. Der User Agent, in dem Fall der Browser trieft diese Entscheidung und liefert den entsprechenden Inhalt aus. Wird der Media Query zu false evaluiert so wird dieses <source> Element übersprungen.

<picture>
 <source srcset="logo-breit.png" media="(min-width: 600px)">
 <img src="logo-schmal.png" alt="ppp">
</picture>

Attribut type (optional)

Durch das type Attribut kann ein source Element mit einen MIME-Type (Internet Media Type) ausgezeichnet werden. Damit wird dem User Agent mitgeteilt um welches Format es sich bei dieser Datei handelt. Der Browser kann dadurch erneut dieses source Element überspringen sollte das angegebene Format nicht unterstützt werden.

<picture>
 <source srcset="ppp-logo.svg" type="image/svg+xml">
 <img src="ppp-logo.png" alt="ppp">
</picture>

Attribut srcset (required)

Durch das Attribut srcset ist es möglich verschiedene Bildgrößen auszuliefern. Dabei werden Auflösung, Zoomstufen im Browser und Bildschirme mit höheren Pixeldichten (DPI) unterschieden.

<picture>
 <source srcset="ppp-logo.png 1x, ppp-logo_x2.png 2x, ppp-logo_x3.png 3x">
 <img src="ppp-logo.png" alt="ppp">
</picture>

Attribut sizes (optional)

Das sizes Attribut hat ähnliche Absichten als das media Attribut jedoch erlaubt es nur eine Eigenschaft zum Beispiel 100vw oder einen Media Query.

<picture>
 <source srcset="logo-breit.png" sizes="100vw">
 <source srcset="logo-schmal.png" sizes="50vw">
 <img src="logo-schmal.png" alt="ppp">
</picture>

Unterstützung

Bis auf den durch Edge bereits ersetzten Internet Explorer wird dieses Element Mobile und Desktop von allen Browsern unterstützt.

Pixelparker Logo
Autor
pixelparker
Weitere Artikel die Sie interessieren könnten
pixelparker Artikel bei debitoor
pixelparker Artikel bei debitoor
Kürzlich hat uns Debitoor einige Fragen zum Thema "Selbstständig mit IT Services" gestellt und in einem netten kleinen Beitrag auf deren Blog veröffentlich. 
Silverstripe Tipps und Tricks
Silverstripe Tipps und Tricks
Hier schreiben wir eine nützliche Informationen zur Entwicklung mit dem Silverstripe Framework / CMS.
Browsermarktanteile
Browsermarktanteile
Chrome, Firefox, Internet Explorer, Safari, Edge, Opera und wie sie Alle heißen. Für welchen Browser sollen wir unsere Webseite testen?
Docker bundled Information
Docker bundled Information
In diesem Beitrag sind einige wichtige Docker Informationen gebündelt. Eine Art Cheatsheet oder zur Auffrischung.
SVG Logo Animation
SVG Logo Animation
Wir zeigen euch wie man einfach und schnell ein SVG Logo oder Icon animieren kann. Dafür arbeiten wir mit dem bekannten Animations-Tool Greensock (GSAP).
Bald geht ohne PHP 7 nichts mehr
Bald geht ohne PHP 7 nichts mehr
WARNUNG: Möglicherweise ist ihr Handeln jetzt gefragt um eine Abschaltung zu verhindern. Die Unterstützung für PHP 5.6 läuft am 31.12.2018 aus, das ist die letzte Version von PHP 5. Auch für die erste PHP 7.0 Version ist bereits am 03.12.20...
Html5 Tag <picture>
Html5 Tag <picture>
Mit dem Html5 Element <picture> bekommen <img> Tags einen Container. Dadurch können Bilder für unterschiedliche Displaygrößen optimiert werden. Weder CSS noch JS ist dafür notwendig!
macOS Cheatsheet
macOS Cheatsheet
In diesem Artikel fassen wir nützliche Mac Tastaturkurzbefehle zusammen. Zudem Listen wir einige häufig verwendete Sonderzeichen Kombinationen auf.
Kein HTTP ohne S!
Kein HTTP ohne S!
Eine moderne Webseite ist kein statisches Produkt und sollte neben aktuellen Inhalt auch schnell und vor allem sicher und fehlerfrei sein. Diese Eigenschaften sind nebenbei die wichtigsten um bei Google ein entsprechend gutes Ranking zu erh...
Google Maps API Key Error
Google Maps API Key Error
Die integrierte Google Karte zeigt "For development purposes only". Das ist leider kein Fehler am API Key sondern eine beabsichtigte und neue Einschränkung seitens Google. Die Angabe einer Kreditkarte ist Notwendig. Google beschränkt den Fr...
GitLab SSH
GitLab SSH
Eine kurze Erklärung zum erstellen einer SSH Verbindung zu GitLab.
Composer macOS
Composer macOS
Schnell und einfach kurz mal composer am mac installieren. Der PHP Pakermanager wird in vielen unterschiedlichen Projekten verwendet.
macOS tree Command
macOS tree Command
Mit tree können wir uns Verzeichnisse in einer übersichtlichen Baumform anzeigen lassen. Wir zeigen euch wie ihr schnell und einfach tree auf euren Mac bekommt.
Git - Häufige Task und Cheatsheet
Git - Häufige Task und Cheatsheet
Git die freie Software zur verteilten Versionsverwaltung von Dateien. Hier notieren wir uns einige häufig verwendeten Tasks als Cheatsheet.