Bilder in schmalen Displays unterdrücken

[Matthias Scharwies]

Guten Morgen,

Nachtrag: Bevor jemand mit „ich hab was Besseres“ kommt: vorher prüfen, dass die Bilddatei auch nicht übertragen wird, wenn das Bild nicht angezeigt werden soll.

Bilder_im_Internet/responsive_Bilder_mit_picture

Textvorschlag für eine bessere Einleitung zum Wiki-Artikel:

Mittlerweile surft eine Mehrheit mit Mobilgeräten und möchte die gleichen Inhalte – und Bilder – wie Desktop-Nutzer sehen. Dem stehen aber immer noch geringere Übertragungsraten in Mobilfunknetzen gegenüber. So stellt sich die Frage, wie man Nutzern von Mobilgeräten leichtgewichtige Bilder zur Verfügung stellt, während für den Desktop durchaus hochauflösende Bilder mit mehreren MB Speichergröße abgerufen werden können.

Dieser Artikel stellt das picture-Element vor, das wie z. B. video als Container-Element für ein Bild mehrere Quellen bereitstellt.

Der Browser wählt dann anhand von Medienmerkmalen wie den Geräteeigenschaften (Abmessungen, Auflösungen oder Seitenverhältnisse) oder den Benutzereinstellungen (Dark Mode, hoher Kontrast, weniger Animationen) selbstständig das am besten passende Bild aus.

Kritik und Anregungen erbeten – ich würde das dann mittags anpassen!

Herzliche Grüße
Matthias Scharwies