Bild nach verwendetem Medium auswählen

[beatovich]

hallo

Hallo, ich bin einigermaßen vertraut mit HTML und CSS. Jetzt möchte ich eine eigene Homepage erstellen. Gelesen habe ich u.a., dass man mehrere Versionen eines Bildes verwenden soll für die verschiedenen Bildschirmgrößen.

Das soll man nur machen, wenn eine Anzahl Bedingungen zutrifft. Im allgemeinen haben Samsungs und iPhones einen zwar schmaleren viewport, wenn in CSS-pixel gemessen. Da sie aber jedes Pixel doppelt so hoch (oder höher) auflösen wie etwa ein Desktopscreen kommt es unter dem Strich auf's gleiche raus.

Ergo: Bildmasse <=50 kB lohnt den Aufwand nicht.

Wie kann ich dies steuern?

allenfalls über das srcset Attribut

Sind hierzu mehrere img-Angaben notwendig, wobei jeweils nur eine davon in CSS als sichtbar definiert wird?

display:none oder hidden attribute führen nicht dazu, dass eine Ressource nicht verlangt wird.