nicht angemeldet
TS
Auge
marctrix
TS
marctrix
TS
Gunnar Bittersmann
marctrix
Hello,
die Frage steht ja schon im Betreff:
Gibt es eine Alternative zu den Breakpoints bei srcset per CSS ?
Die übrigen Breakpoints werden ja aich im CSS festgelegt. Da ist es eigentlich nicht schön, dass die für <img srcset ...> im HTML stehen.
Liebe Grüße
Tom S.
Hallo
Gibt es eine Alternative zu den Breakpoints bei srcset per CSS ?
Ja, Hintergrundbilder. Da dein Bild vermutlich nicht ohne Grund im HTML steht, denn es gehört doch zum Inhalt(?), erfolgt die Angabe der Quelle dort auch an der richtigen Stelle.
Die übrigen Breakpoints werden ja aich im CSS festgelegt. Da ist es eigentlich nicht schön, dass die für <img srcset ...> im HTML stehen.
Fügst du die Quellenangabe für ein als ein HTML-Element eingefügtes Bild per CSS ein? Eben. Gehört das Bild zum Inhalt, gehört es ins HTML und gehört auch dessen Quellenangabe in das HTML-Element. Ist es jedoch schmückendes Beiwerk, gehört's ins CSS und du kannst per Media-Query beliebig viele verschiedene Bilder als Quelle eines Hintergundbildes angeben.
Tschö, Auge
Hej TS,
Gibt es eine Alternative zu den Breakpoints bei srcset per CSS ?
Die Frage hat Auge ja schon hinreichend beantwortet, außer: meist ist das gar nicht nötig. Biete besser große, aber maximal komprimierte Bilder an, statt Sets von Bildern.
Retina Revolution erklärt warum das funktioniert.
Marc
Hello,
Biete besser große, aber maximal komprimierte Bilder an, statt Sets von Bildern.
Retina Revolution erklärt warum das funktioniert.
Hier geht es um ein Banner über die ganze Breite. Das wird zu mickrig, wenn man es nur skaliert. Für schmale Displays gibt es daher ein ähnliches, das in der Breite verringert ist.
Liebe Grüße
Tom S.
Hej TS,
Hier geht es um ein Banner über die ganze Breite. Das wird zu mickrig, wenn man es nur skaliert. Für schmale Displays gibt es daher ein ähnliches, das in der Breite verringert ist.
Banner riecht für mich förmlich nach Hintergrundbild…
Da kannst du dann mit den vielen CSS-Eigenschaften für Größe, Positionierung usw fast jedes gewünschte Verhalten erreichen. Ist aber erst mal nur eine Vermutung.
Ist das Bild denn wirklich mehr als Schmuck?
Marc
Hello,
Hier geht es um ein Banner über die ganze Breite. Das wird zu mickrig, wenn man es nur skaliert. Für schmale Displays gibt es daher ein ähnliches, das in der Breite verringert ist.
Banner riecht für mich förmlich nach Hintergrundbild…
Nicht wirklich. Einen Hintergrund könnte es später noch zusätzlich geben. Das ist das Logo der Seite, dass eigentlich z. B. auch beim Druck berücksichtigt werden soll.
Leider käpfe ich gegen mehrere Fronten, so wie das im Webdesign meistens ist. Nun funktionieren alle mir verfügbaren Browser, mit Ausnahme der IEs, speziell IE-11.
Es ist ein Spaltenlayout. Innerhalb von <setcion>-Elementen wird ggf. in Slapten dargestellt. Sogar bei allen mir verfügbaren Mobiles ist das inzwischen angenehm zu lesen. Nur der IE 11 zerkloppt es jetzt noch.
Daran werde ich wohl noch ein wenig knabbern...
Liebe Grüße
Tom S.
Hallo,
käpfe ich gegen […] <setcion>-Elemente [… und …] Slapten
Nur der IE 11 zerkloppt es jetzt noch.
Bist du sicher, dass es am IE liegt? ;)
Gruß
Kalk
Hello,
es liegt immer am Coder, also an mir.
Aber wenn ich die Spezialitäten des IE 11 nicht kenne, dann nützt mir das nichts.
Ich werde mal ein Excerpt der Seite erstellen und das öffentlich stellen.
Vorher lohnt es sich nicht, weiter darüber zu diskutieren, es sei denn, die IE-Kapriolen wären allgemein bekannt. Ich konnte aber noch nichts Spezielles finden dazu ...
Liebe Grüße
Tom S.
Hej TS,
Aber wenn ich die Spezialitäten des IE 11 nicht kenne, dann nützt mir das nichts.
Ich werde mal ein Excerpt der Seite erstellen und das öffentlich stellen.
Genau, lass uns mal einfach mit drauf gucken. Vielleicht fällt ja jemandem etwas ein.
Marc
@@marctrix
Unterschiedliche Bilddateien für Retina-27″-Mac und Retina-iPhone sind schon sinnvoll.
LLAP 🖖
Hej Gunnar,
@@marctrix
Unterschiedliche Bilddateien für Retina-27″-Mac und Retina-iPhone sind schon sinnvoll.
Leider ist das so ähnlich wie mit der Text-Version für Blinde früher - oft wird dann der Aufwand alle Varianten oder überhaupt etwas zu aktualisieren gescheut. Fragt sich, ob dann der Schaden nicht größer ist als ein (vermeintlicher) Nutzen.
Die in "Retina Revolution" vorgestellte Technik ist kein Allheilmittel. Das picture-Element ist aber eben auch nicht immer die beste Wahl. Sogar besonders pingelige Designer habe ich schon mehrfach von der Idee besonders großer, dafür aber stark komprimierter Bilder überzeugen können. Es lohnt einfach oft nicht, ein 50kByte-Bild noch mal extra händisch aufzubereiten um dann auf 45kByte zu kommen und dann ständig zwei Varianten zu pflegen. Wie in dem Artikel dargelegt benötigen die Bilder mit den kleineren Abmessungen bisweilen sogar mehr Speicherplatz. das liegt vermutlich mit dem jpeg-Algorithmus zusammen, der von der Annahme ausgeht, dass nebeneinander liegende Bildpunkte dieselben oder sehr ähnliche Farbwerte besitzen. Dass trifft auf dasselbe Bild mit vierfacher Auflösung einfach häufiger zu. Daher kann man die stärker komprimieren. Meine laienhafte Deutung der Experimentier-Ergebnisse…
Marc
Tabellenkalk