Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Bildergröße automatisch serverseitig skalieren - Responsive Layout

Donnerstag, 3. Mai 2012

360 Grad Panorama der alten Holzbrücke in Bassano del Grappa
Das obige Panoramafoto der alten Holzbrücke in Bassano del Garda ist im Original 4096 px breit und 1.3 MB schwer. Genau so liegt es auch auf dem Server. Auf meinem PC wiegt es aber nur noch 92 kB, auf dem iPhone noch deutlich weniger (13 kB), ohne dass ich mehrere Versionen des Bildes erzeugt und auf den Server geladen hätte.
Dieses "Wunder" wird von einem pfiffigen Script namens Adaptive Images vollbracht. Das Einbinden dieses Scripts ist wirklich so einfach wie beschrieben.

Vorteil: Das mühselige Erzeugen mehrerer Bildgrößen, sowie die Auswahl des jeweils entsprechend der Monitorgröße geeigneten Bildes erledigt der Server. Fürs schnelle Bloggen also ideal.

Nachteil: Vielleicht die Dateigröße, die auf dem Server liegt. Ach ja, da nur abhängig von der verfügbaren Monitorgröße skaliert wird, muss unter Umständen doch noch der Browser entsprechend einer eventuellen CSS Anweisung weiter skalieren. Das Optimum der Dateigröße wird dadurch natürlich bei weitem nicht erreicht.

Nachtrag 13.04.2016

Das <picture> Tag, das ja inzwischen von allen aktuellen Browsern unterstützt wird, ist meines Erachtens die bessere Variante. Weil es individuell je nach Bedarf eingesetzt werden kann. Ich denke darüber nach, Adaptive Images auf meiner Site in den Ruhestand zu schicken. Da ich natürlich nicht alle alten Beiträge daraufhin abklappern will, ob dort eventuell zu große Originalbilder eingebunden sind, müsste ich in Kauf nehmen, dass auch mal schwergewichtige Bilder in älteren Artikeln herunter geladen werden. Ich denke nach.



Kommentare

Noch keine Beiträge.

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE