Bilder in schmalen Displays unterdrücken

[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