Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D Animationsagentur
    • Content Marketing Agentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Full-Service Agentur
    • Internetagentur
    • Local SEO Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • Performance Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopify Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
  • Beste Agentur finden
    • 3D Animationsagentur
    • Content Marketing Agentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Full-Service Agentur
    • Internetagentur
    • Local SEO Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • Performance Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopify Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Projekt anfragen
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
Projekt anfragen

Dr. Web » Design » Responsive Images: Das Picture-Element ist endlich da!

Responsive Images: Das Picture-Element ist endlich da!

  • Aktualisiert am 23. November 2023
  • Dieter Petereit von Dieter Petereit
  • Design, Responsive Design, Webdesign
  •  

Top Agenturpartner

Werbehinweis-Icon.

AdsMasters GmbH

Düsseldorf

B NEX Webdesign

Eckental

klickbeben

Innsbruck

SEO-Sicht

Berlin

VASTCOB

Bergisch Gladbach

SEO Küche

Kolbermoor

Alle Agenturpartner

Was lange währt, wird endlich gut. Die viel diskutierte Lösung für die Umsetzung von Bildern in responsiven Designs ist tatsächlich in der Realität angekommen. Und es ist tatsächlich das Picture-Element des W3C geworden, nachdem sich die WhatWG zuletzt für das Srcset-Attribut am Img-Element ausgesprochen hatte. Von wegen, die W3C würde nur einen statischen Schnappschuss verwalten, während die WhatWG diejenige wäre, die HTML5 als lebenden Standard, als Work in Progress betrachten.

html5-logo

Responsive Images: Ein steiniger Weg mit vielen aufgeschlagenen Knien

Ich will an dieser Stelle nicht wieder die Diskussion zu Gehör bringen, die sich in den letzten zwei Jahren intern abgespielt hat. Der Streit um die richtige Lösung für Responsive Images und andere wichtige Fragen kommender Standards hatte bekanntlich sogar dazu geführt, dass sich die Web Hypertext Application Technology Working Group (WHATWG) als einflussreichste Arbeitsgruppe innerhalb des W3C von diesem abgespalten hatte, um HTML5 künftig als lebenden Standard weit schneller fortzuentwickeln als unter der Ägide des W3C vermeintlich möglich. Wir berichteten am 23. Juli 2012 darüber.

Erst wenige Tage vorher hatte sich eben diese WhatWG auf Srcset als Lösung für Responsive Images festgelegt, wir berichteten auch darüber. Im Nachhinein wenig verwunderlich, wollte sich das W3C in Form seiner HTML Working Group mit Unterstützung der W3C Community Group so gar nicht mit diesem nassforschen Vorgehen einverstanden erklären und stellten im Herbst 2012 klar, dass das Picture-Element mitnichten tot, sondern vielmehr sehr lebendig und genau die Stoßrichtung des W3C sei. Hier berichteten wir darüber.

Dann passierte nur wenig Plakatives, wenn auch hinter den Kulissen fleißig gewerkelt wurde. Im Februar 2014 gingen wir bei Dr. Web sogar so weit eine neue JavaScript-Lösung zu empfehlen, anstelle noch länger auf Picture oder Srcset zu warten.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

Responsive Images: Chrome Canary hat es schon, andere fast

Und jetzt also ist es tatsächlich so weit. In einem brandaktuellen Beitrag auf A List Apart gab Mat Marquis, der umtriebige Kopf der Responsive Images Community Group, ehemaliger Mitarbeiter im jQuery Mobile Team und hauptberuflicher Designer/Developer bei der nicht unbekannten Filament Group, die erste Browser-Implementation des Picture-Elements bekannt.

Es ist Chrome Canary, die Developer-Version des Chrome-Browsers, der ab sofort für erste Tests des Elements herangezogen werden kann, wozu Marquis naheliegenderweise direkt auffordert. Chrome Canary gibt es übrigens hier. Nach der Installation pasten Sie folgende Zeile in die URL-Leiste

chrome://flags/#enable-experimental-web-platform-features 

bestätigen mit der Enter-Taste und klicken im folgenden Fenster auf "Aktivieren". Sie brauchen sich übrigens nicht zu sorgen. Die Änderungen, die Sie im Canary vornehmen, wirken sich nicht auf eine etwa vorhandene, reguläre Chrome-Installation aus. Beide werden separat gehalten.

Als Startpunkt für eigene Tests empfiehlt Marquis die Picturefill-Demos, welche bekanntlich so ausgelegt sind, dass das Polyfill nur da einspringt, wo die nativen Browserfähigkeiten nicht ausreichen.

Ausweislich der diversen Roadmaps ist ersichtlich, dass der Firefox ebenfalls kurz vor der Implementation von Picture steht, ebenso das Webkit-Projekt. Microsoft ziert sich wie stets und führt das Picture-Element, neben dem Srcset-Attribut gleichberechtigt als "Under Consideration". Na ja, der IE ist bei mir ohnehin nur "Under Consideration", wenn er sich nicht vermeiden lässt.

So, Kämpen des Netzes. Dann mal ran. Was haltet ihr von der Umsetzung?

Übrigens funktioniert das Picture-Element in der jetzigen Implementation noch nicht voll responsiv bei Änderungen des Viewport. Also, nach Änderungen einmal kurz einen Refresh machen.

Wie hilfreich war diese Info?

Gesamtbewertung: 0 / 5. Anzahl Bewertungen: 2 0

Dieter Petereit

Dieter Petereit

Dieter Petereit ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Lust auf mehr?

Sterben Logodesigner aus? Dieses KI-Tool bringt Designer ins Schwitzen

Mit der Einführung eines KI-basierten Tools zur Logoerstellung stehen Logodesigner vor bedeutenden Veränderungen. Dieses Tool, das die Erstellung von hochwertigen Logos in Sekundenschnelle ermöglicht, wird die Arbeitsweise von Logodesignern in naher Zukunft maßgeblich beeinflussen.

Die Bedeutung von Whitespace im Design

Whitespace (Weißraum oder „negativer Raum”) ist der leere Raum zwischen den Elementen einer Seite. Obwohl viele dies als Verschwendung von wertvollem Platz auf dem Bildschirm ansehen, ist der Weißraum ein wesentliches Designelement:

42 CSS Buttons mit Hover-Effekt & Code Snippets

Für schön anzusehende CSS-Buttons benötigt es schon lange keine Grafiken mehr — sie lassen sich formen aus der Schönheit des geschriebenen Codes. Doch die Erstellung kann ganz schön knifflig werden, wenn du an eine umfassende Browser-Kompatibilität denkst. Wie gut, dass es fertige Code-Schnipsel und zahlreiche Beispiele dafür gibt. Und noch besser, dass wir heute die besten Beispiele auch gleich in diesem Beitrag präsentieren.

Schreibe einen Kommentar Antworten abbrechen

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

dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.

Fachmagazin für Online-Marketing. Seit 1997. Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur finden in Ihrer Nähe

  • Alle Städte
  • Augsburg
  • Berlin
  • Bonn
  • Dortmund
  • Dresden
  • Düsseldorf
  • Essen
  • Frankfurt am Main
  • Freiburg im Breisgau
  • Hamburg
  • Hannover
  • Innsbruck
  • Karlsruhe
  • Köln
  • Leipzig
  • München
  • Nürnberg
  • Stuttgart
  • Wien
  • Alle Städte
  • Augsburg
  • Berlin
  • Bonn
  • Dortmund
  • Dresden
  • Düsseldorf
  • Essen
  • Frankfurt am Main
  • Freiburg im Breisgau
  • Hamburg
  • Hannover
  • Innsbruck
  • Karlsruhe
  • Köln
  • Leipzig
  • München
  • Nürnberg
  • Stuttgart
  • Wien

Agenturleistungen

  • Beste Agenturen finden
  • Content Marketing Agentur
  • Designagentur
  • Digitalagentur
  • Drupal Agentur
  • Full-Service Agentur
  • Internetagentur
  • Local SEO Agentur
  • Marketing Agentur
  • Performance Marketing Agentur
  • Online Marketing Agentur
  • SEO Agentur
  • Shopify Agentur
  • Shopware Agentur
  • Social Media Agentur