Bilder in schmalen Displays unterdrücken

[Chris]

Moin,

am PC möchte ich einige images anzeigen, die aber bei schmalen Bildschirmen nicht angezeigt werden sollen. Wie kann ich das erreichen?

[Gunnar Bittersmann]

@@Chris

am PC möchte ich einige images anzeigen, die aber bei schmalen Bildschirmen nicht angezeigt werden sollen.

Wenn die Bilder wichtig sind, warum willst du sie dann den meisten Nutzern^[1] vorenthalten?

Oder andersrum: Wenn die Bilder unwichtig sind, warum willst du große Bildschirme damit vollmüllen?

Wie kann ich das erreichen?

Mit dem picture-Element, darin ein img mit 1-Pixel-Grafik als data-URL. Im source-Element das bedingt anzuzeigende Bild, mit Query im media-Attribut:

<picture class="hidden-on-small-screen">
	<source media="(width >= 50rem)" srcset="https://example.net/einstein.webp"/>
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Albert Einstein"/>
</picture>

Und das Ding auf kleinen Bildschirmen ausgeblendet, damit kein Platz beansprucht wird und damit der Alternativtext von Screenreadern nicht vorgelesen wird:

@media (width < 50rem) {
	.hidden-on-small-screen { display: none }
}

Den Breakpoint kannst du deinen Bedürfnissen anpassen, musst das aber im Markup und im Stylesheet tun; die Werte sollten übereinstimmen. Diese Kopplung ist doof, aber was Besseres fällt mir nicht ein.

Anzusehen bei diesem Beispiel.

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.

🖖 Live long and prosper

---

1. Je nach Zielgruppe. Aber im Allgemeinen dürften heutzutage mehr Leute mit Smartphones im Web unterwegs sein als mit Großgeräten. ↩︎

[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

[Der Martin]

Hallo Matthias,

Dem stehen aber immer noch geringere Übertragungsraten in Mobilfunknetzen gegenüber.

das kann man so pauschal nicht mehr sagen. Je nach Standort und Netzqualität ist die Übertragungsrate auch im Mobilfunk überraschend gut.

Ich habe das festgestellt, als vor einigen Wochen mein Festnetzanschluss mehrere Tage ausgefallen war und ich ersatzweise daheim mein Handy als WLAN-Hotspot eingerichtet hatte. Ich hab am PC keinen Unterschied zur Festnetz-Verbindung bemerkt.

Nach meiner Recherche erlaubt 4G je nach Netzauslastung Übertragungsraten von über 100Mbit. Das ist mehr als mein Festnetz-Anschluss mit 50Mbit.

Nur kann halt am Handy die Übertragung je nach Netzqualität und Auslastung mal erheblich in die Knie gehen.

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.

Leider kann man nicht die aktuelle effektive Bandbreite abfragen. Das wäre wesentlich hilfreicher.

Einen schönen Tag noch
 Martin

[Rolf B]

Hallo Gunnar,

ich habe keine Zeit zum testen, aber was ist mit loading="lazy" oder content-visibility:auto (letzteres impliziert striktes Containment und könnte damit andere Probleme generieren...).

Oder das gute alte display:none...

Rolf

[Gunnar Bittersmann]

@@Rolf B

ich habe keine Zeit zum testen

Die hab ich mir mal genommen.

Oder das gute alte display:none...

… ist genau das, wovor ich mit „vorher prüfen, dass die Bilddatei auch nicht übertragen wird, wenn das Bild nicht angezeigt werden soll“ gewarnt hatte. Test: Das rote Ampelmännchen wird auch bei schmalem Viewport geladen. Jedenfalls bei display: none allein.

Aber im Zusammenspiel …

aber was ist mit loading="lazy"

Das ist eigentlich nicht für Bilder gedacht, die sich initial im sichtbaren Bereich befinden. Erfüllt aber den Zweck: Test lazy loading.

<img
  class="hidden-on-small-screen"
  loading="lazy"
  src="https://example.net/einstein.webp"
  alt="Albert Einstein"
/>

mit der genannten Stil-Regel für .hidden-on-small-screen.

oder content-visibility:auto

Da bin ich nicht fündig geworden. Auch nicht auf ein Vorfahrenelement angewandt: Test span content-visibility.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Das rote Ampelmännchen …

erinnerte mich gerade daran, wie wohl das erste Ost-Ampelmännchen in West-Berlin installiert hatte.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

mit der genannten Stil-Regel für .hidden-on-small-screen.

Nicht zu vergessen:

img.hidden-on-small-screen:not([loading="lazy"]) {
  outline: medium solid red;
  ERROR: 'loading="lazy" attribute missing';
}

um Bilder zu kennzeichnen, bei denen loading="lazy" vergessen wurde.

🖖 Live long and prosper

[MudGuard]

Hi,

img.hidden-on-small-screen:not([loading="lazy"]) {
  outline: medium solid red;
  ERROR: 'loading="lazy" attribute missing';
}

um Bilder zu kennzeichnen, bei denen loading="lazy" vergessen wurde.

sieht man das Zeug nach ERROR: auch auf dem Viewport? Oder nur in der Console irgendwo?

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

sieht man das Zeug nach ERROR: auch auf dem Viewport? Oder nur in der Console irgendwo?

Da ERROR keine standardisierte (oder von Chrome-Entwicklern trotzdem inplementierte und gepushte) CSS-Eigenschaft ist, wird sie geflissentlich ignoriert und hat keinerlei Auswirkung auf die visuelle Darstellung. Sie erscheint aber im Entwicklertool.

Die Idee stammt von Heydon Pickering und ist in Testing HTML With Modern CSS beschrieben.

🖖 Live long and prosper

[MudGuard]

Hi,

sieht man das Zeug nach ERROR: auch auf dem Viewport? Oder nur in der Console irgendwo?

Da ERROR keine standardisierte (oder von Chrome-Entwicklern trotzdem inplementierte und gepushte) CSS-Eigenschaft ist, wird sie geflissentlich ignoriert und hat keinerlei Auswirkung auf die visuelle Darstellung. Sie erscheint aber im Entwicklertool.

Die Idee stammt von Heydon Pickering und ist in Testing HTML With Modern CSS beschrieben.

ok, danke für die Erklärung.

Gibt's da bei CSS keine Konvention für "custom properties" (analog der Bindestrich-Konvention für custom elements in HTML). Bewußt in Anführungszeichen, da custom properties ja schon belegt ist für die "CSS Variablen" 😉

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

Gibt's da bei CSS keine Konvention für "custom properties" (analog der Bindestrich-Konvention für custom elements in HTML).

Ja, die Zwei-Bindestriche-Konvention. 😆

Bewußt in Anführungszeichen, da custom properties ja schon belegt ist für die "CSS Variablen" 😉

Hab den verlinkten Artikel von Heydon – nach dem Abschicken meiner Antwort, hehe – weitergelesen und festgestellt, dass es gar keiner von anno dazumals war, sondern ein relativ neuer, wo er das Thema nochmal aus neuerer Sich betrachtet und --error anstatt ERROR verwendet.

Oder doch erher --error-* mit Zusatz, damit nicht nur die letzte, sondern alle relevanten Meldungen angezeigt werden.

🖖 Live long and prosper