Responsive Webdesign – Grundlagen

Bilder für hochauflösende Displays – srcset

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dank der srcset-Angabe können Sie ganz einfach Bilder speziell für hochauflösende Displays bereitstellen. 

Transkript

Mit Hilfe des srcset-Attributs können Sie ganz einfach Bilder für hochauflösende Displays bereitstellen innerhalb des HTML-Codes. Folgende Ausgangsbasis: ich habe ein Bild. Das hat zum einen die Größe 300x200 und dann habe ich noch eine hochauflösende Variante erstellt in der doppelten Größe, also 600x400. Und damit wir gleich erkennen welche Variante geladen wird, habe ich noch ergänzt 2x. Jetzt möchte ich, dass dieses Bild 600x400, was doppelt so groß erstellt ist, geladen wird auf hochauflösenden Displays. Es soll aber natürlich in der normalen Größe 300x200 dargestellt werden. Das kann ich folgendermaßen realisieren. Damit wir einen Vergleich des normalen Bildes haben, wie es ganz klassisch eingebunden wird, habe ich noch an dieser Stelle angegeben src=blume, ganz normal mit alt=blume noch. Und darüber ist die neue Angabe mit srcset. Wie sieht das aus? Ich habe mein img-Element, ganz normal das src-Attribut zusätzlich, aber das srcset-Attribut, bei dem ich ein zusätzliches Bild in einer höheren Auflösung angeben kann. Außerdem muss ich über einen Deskriptor bestimmen wann dieses Bild benutzt werden soll. Also, eben in diesem Fall, wenn das Display doppelt so viele Pixel hat durch dieses 2x. Sehen wir uns das dann einmal im Chrome an. Zuerst sehen wir uns das hier im Desktop-Browser an, ganz normal, beide Bilder werden angezeigt. Ich habe an dieser Stelle kein hochauflösendes Display. Und dann möchte ich einmal ein hochauflösendes Display emulieren. Wechsle in die Entwickler Tools von Chrome, den anderen Modus und wähle Apple iPad und aktualisiere das Ganze. Und Sie sehen dieses erste Bild, wo wir srcset angegeben haben, da wird wirklich die hochauflösende Variante genommen. Die Bilder werden aber trotzdem gleich groß dargestellt. Also, das Bild wird auf dem hochauflösenden Display automatisch genommen. Wenn ich nichts angebe, natürlich kommt das Standardbild. Wie sieht es mit der Browser-Unterstützung für diese sehr nützliche Feature aus? Die aktuellen Informationen finden Sie immer bei Can I Use. Grün bedeutet, dass es unterstützt wird, hellgrün oder dieses olivgrün bedeutet in diesem Fall, dass es auch geht, weil wenn man das durchliest, sieht man, dass der x-Deskriptor geht, aber nicht andere Angaben bei srcset beispielsweise. Also, sieht die Browser- Unterstützung gar nicht schlecht aus. Das Gute an dieser Variante ist aber natürlich in dem Moment, wo ein Browser srcset nicht unterstützt, verwendet er ganz normal das Bild. Wir haben also eine integrierte Fallback-Lösung. Sie haben im Film gesehen wie man srcset nutzen kann, um Bilder für hochauflösende Displays bereitzustellen. Hinter srcset schreiben Sie das Bild, was Sie für das hochauflösende Display nutzen wollen und als Faktor für welche Art von Displays es verwendet werden soll.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!