responsive Dateigrössen

[marctrix]

Hej Regina,

ansonsten stets daran zu denken, dass eher schlanke Leute mit dem Auto und dem Fahrrad kompatibel sind.

Wo immer möglich handhabe ich es deshalb so. Ich erstelle ein jpg für alle.

Vorgehensweise

Das Bild wird mindestens in der größten Auflösung bereit gestellt (bedenken, dass 1 CSS-Pixeln ggfs. 4 Hardware-Pixeln entspricht!).

Man komprimiert das Bild mit jpeg "bis es weh tut“, das heißt man schiebt den Regler für die Qualität so weit runter, bis erste Artefakte sichtbar werden, dann wieder ein bisschen zurück. Also eben so weit wie irgend möglich.

Man bindet dieses eine Bild für alle Geräte ein.

Erläuterung

Wenn ich alles richtig verstanden habe, ist der Trick folgender. Das JPEG-Komprimierungsverfahren geht davon aus, dass zwei nebeneinander liegende Bildpunkte oft (fast) denselben Farbwert besitzen und fasst dann mehrere Pixel in eine Information zusammen, so dass eben nicht mehr für jeden einzelnen Pixel, sondern für Gruppen von Farbpixeln 24bit oder gar 32bit benötigt werden.

Die Annahme, dass nebeneinander liegende Pixel (fast) dieselbe Farbe haben, trifft auf ein größeres Bild wesentlich häufiger zu, als für ein kleineres Bild.

Dadurch lassen sich größere Bilder stärker komprimieren, als kleinere Bilder. Oft mit folgendem Effekt: das flächenmäßig größere benötigt Bild eine geringere Dateigröße.

Mir ist das ganz am Anfang meiner Beschäftigung mit RWD aufgefallen und ich wollte immer mal schauen, ob sich das verifizieren lässt, dann habe ich aber den Artikel Retina Revolution gefunden, den ich seither statt eines eigenen Textes immer verlinke. 😉

Vorteile

• einfaches handling: man benötigt nur eine Datei
• einfaches HTML: man benötigt kein picture
• kein JS nötig (code-Rauschen wurde das hier wohl genannt: gefällt mir sehr gut!)
• einfaches Rendering: der Browser muss nichts entscheiden

Nachteile

• um die optimale Komprimierung für jedes einzelne Bild zu erreichen, muss das händisch gemacht werden. Eine Automatisierung (tausend Bilder auf Qualität 33% zu stellen) funktioniert nicht, da sie bei dem einen Bild zu sichtbaren Artefakten führt, bei einem anderen Optimierungspotential verschenkt
• nur für Fotos geeignet (24bit) - relativiert sich, da für die meisten visuellen Daten mit wenig Farben SVG ohnehin das sinnvollere Format sein dürfte

Marc