Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO 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
Menü
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO 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

< dr. web > » Design » Responsive Images: Das Picture-Element ist endlich da!

Responsive Images: Das Picture-Element ist endlich da!

  • Aktualisiert am 25. Oktober 2022
  • von Dieter Petereit
  • Design, Responsive Design, Webdesign
  •  

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.

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.

Inhaltsverzeichnis

Agenturpartner in Innsbruck

Edit Content

klickbeben

Unsere Aufgabe ist für uns ganz klar: Wir wollen mehr bringen als wir kosten. Das heißt: Der wirtschaftliche Erfolg steht bei klickbeben im Vordergrund. Wir verstecken uns nicht hinter Zahlen wie Likes, Klicks, Seitenaufrufen, Absprungraten etc. und versuchen damit Kunden zu verwirren. Wir treten an, um Umsatz zu erwirtschaften. Daher spielt das Tracking auch eine große Rolle. Bei uns weiß jeder Kunde am Ende genau, was wir ihm gebracht haben. In Euros – nicht in anderen Metriken.

— Manuel Diwosch,
Geschäftsführer
Alle Webdesign-Agenturen →

Lust auf mehr?

14 Best Practices, die Sie für einen erfolgreichen Internetseite Relaunch beachten sollten

Was bewegt einen Unternehmer dazu, seine Internetseite von Grund auf neu auszurichten? Nun, die Gründe für einen Internetseite Relaunch einer können sehr vielfältig sein. Oft spielt ein veraltetes Design eine Rolle. Dieser Grund ist nicht so trivial, wie er vielleicht erscheint. Denn ein unmodernes Aussehen der Webseite kann Besucher und damit potenzielle neue Kunden abstoßen.

Broschüre drucken: So präsentieren Sie Ihr Unternehmen oder Ihr Projekt professionell

Broschüren können ein hochwirksames Werbemittel sein, und Ihr Unternehmen oder Ihre Praxis dabei unterstützen, Kunden zu gewinnen. In diesem Text erfahren Sie, wie Sie Ihre Broschüre planen, gestalten und drucken lassen können.

KI GPT-4: werden Webdesigner und sonstige Erdlinge ihren HAL-Moment erleben?

Wo ist dieser verdammte Aus-Schalter?” Dies waren die letzten Worte von David Bowman, dem Anführer einer Widerstandsgruppe Webdesigner, denen es gelang zum vermeintlichen WDN-Zentralcomputer vorzudringen, bevor sie von Wächterdroiden eliminiert wurden.

Schreibe einen Kommentar Antworten abbrechen

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

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen