nicht angemeldet
Bild nach verwendetem Medium auswählen
Gunnar Bittersmann
Matthias ApselHallo, 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. Wie kann ich dies steuern? Sind hierzu mehrere img-Angaben notwendig, wobei jeweils nur eine davon in CSS als sichtbar definiert wird?
-
@@Jürgen
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Hallo Gunnar, habe auf der referenzierten Seite das Beispiel "Gestaltung mit srcset und sizes" angeschaut. Was mir auffiel: Die Bilder ändern sich sehr schon. Hat der Autor des Beispiels aber vergessen, auch die Überschrift "Gestaltung mit srcset und sizes" der Screengröße anzupassen. Er verschwindet nämlich bei schmalem Screen.
-
Hallo Jürgen,
habe auf der referenzierten Seite das Beispiel "Gestaltung mit srcset und sizes" angeschaut. Was mir auffiel: Die Bilder ändern sich sehr schon.
Schön, dass wir dir helfen konnten.
Hat der Autor des Beispiels aber vergessen, auch die Überschrift "Gestaltung mit srcset und sizes" der Screengröße anzupassen. Er verschwindet nämlich bei schmalem Screen.
Danke für den Hinweis.
Bis demnächst
Matthias--
Pantoffeltierchen haben keine Hobbys.
-
-
-
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.