[ERLEDIGT] Auflösungsweiche

[FendVario1]

Hallo,

Vorweg: Ich bin, was Javascript, CSS und HTML angeht ein blutiger Anfänger.
Ich bin dabei eine Website zu erstellen, die zu großen Teilen aus Bildern besteht, weshalb eine gewöhnliche CSS Weiche wenig Sinn macht, da - vor allem auf Mobilgeräten - die Ladezeit deutlich zu lang ist. Und so die Möglichkeit besteht, kleinere Bilddateien einzubinden, um bei größeren Auflösungen trotzdem gute Bildqualität zu gewährleisten.

Gibt es eine Möglichkeit, Javascript oder AJAX die jeweilige Seite nach Prüfung der Auflösung aus der html-Datei auszulesen und dann direkt im Browser zu laden, ohne die URL zu ändern?

Danke schon mal im Vorraus für die Hilfe.

Grüße,
Fend

 

[Tronjer]

Dafür gibt es das srcset Attribut in HTML5.

 

[MrMurphy]

Na ja,

srcset wird nicht mal vom IE Edge vollständig unterstützt, vom IE11 und älteren IE überhaupt nicht.

http://caniuse.com/#search=srcset

Das hat mich bislang davon abgehalten srcset zu verwenden. Und JavaScript-Lösungen sind mir zu unsicher, da die Besucher JavaScript (zum Beispiel über No-Script) häufig blockieren.

Von daher bevorzuge ich die gute alte Methode, die Bilder auf die maximal angezeigte Größe zu beschneiden und skalieren.

Anschließend wird die Bildqualität noch gemindert. Damit ist eine ganze Menge möglich, ohne das die Besucher einen Unterschied sehen können.

Damit wird der Speicherplatz der Bilder in der Regel schon extrem verringert.

Gruss

MrMurphy

 

[FendVario1]

Es geht weniger um den Speicherplatz, als um das Datenvolumen, dass der Besucher "herunterladen" muss, und das ist in diesem Fall ja der eigentliche Knackpunkt, der bei deinem Verschlag auch nicht umgangen wird.
Laut der Übersicht ist srcset ja auch, abgesehen von Opera Mini und Android <5.1, prinzipiell möglich und nur nicht gänzlich unterstützt, was kein großes Problem ist, da ja, eben für diese Browser, eine Standard Version des Bildes zusätzlich abgelegt ist - wenn ich dass jetzt richtig interpretiere, was ich bisher gelesen habe.
Und da es mir in erster Linie um Mobile Geräte geht, ist fehlender IE Support nicht allzu dramatisch.

Grüße,
Fend

 

[MrMurphy]

Hallo Fend,

dir ist aber schon bewußt, dass srcset dazu dient die Bildqualität der jeweiligen Auflösung anzupassen und nicht um das Datenvolumen zu verringern?

Heißt: Bei mobilen Geräten mit Retina-Displays mit ihrer hohen Pixeldichte wird häufig ein größeres Bild (auch vom Datenvolumen her) geladen als auf dem Desktop. Die Retina-Displays kommen ja auf eine höhere Auflösung mit ihren deutlich über 2000px als Desktopmonitore.

Gruss

MrMurphy

 

[FendVario1]

Ähm, also ich verstehe das anders:
http://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/#chapter5

Es gibt zwar die Möglichkeit mit höherer Auflösung, die du meinst, aber der Austausch des Bildes, angepasst an den Viewport wäre ja eigentlich das, was ich benötige, um unnötig große Bilddetails nicht zu übertragen.

Grüße,
Fend

 

[MrMurphy]

Hallo,

du hast den Beitrag aber schon gelesen? Da steht nämlich genau das, was ich bereits geschrieben habe:

Letzteres führt zu schlechter Bildqualität auf großen Displays. Hochauflösende Displays werden gar nicht berücksichtigt.

Ziel ist es, die Pixeldichte der Grafiken soweit zu erhöhen, dass sie der DPR von hochauflösenden Geräten entspricht.

Genau, es geht nicht um weniger Datenvolumen bei mobilen Geräten, sondern darum, Grafiken möglichst optimal anzuzeigen, nämlich mit möglichst vielen Pixeln.

Bilder sollen mit unterschiedlicher Auflösung für normale und hochauflösende Displays ausgegeben werden

Bilder innerhalb eines flexiblen Web-Layouts (responsive Layout) sollen mit unterschiedlicher Abmessung für verschiedene Viewport-Größen ausgegeben werden

Und die Viewportgröße beträgt bei Smartphones mit Retina-Displays heutzutage locker über 2000px Breite. Dort ist der Viewport ja immer die volle Fensterbreite.

Das mit srcset das Datenvolumen verringert werden soll oder kann wird richtigerweise hingegen nicht behauptet.

Das ist wieder eine der Legenden, die wahrscheinlich nicht mehr aus der Welt zu bekommen ist.

Gruss

MrMurphy

 

[helgasoso]

einem SM-G925F mit Tapatalk