Bilder mit guter Qualität in Website integrieren ... Wie geht's am besten?

[marctrix]

Hej Maxi,

Wieder so ein Anfängerproblem.

Das ist gar kein Anfängerproblem. Bei Bildern den besten Kompromiss zwischen Qualität und kByte zu finden ist gar nicht so einfach. Insbesondere wenn man die scharfen Displays bei Handys (die bei Apple Retina-Displays heißen) und hochauflösenden (4k- und 5k-) Monitoren unterstützen will.

Eine Möglichkeit ist mittels JavaScript (gibt fertige Lösungen im Netz) oder dem Element picture verschieden hoch aufgelöste Bilder anzubieten. Allerdings versaut einem bei picture mal wieder die mangelnde Unterstützung diverser Browser (Safari und IE) den Spaß an der Sache. Bräuchte man also wiederum ein JavaScript (Polyfill) um diese Funktionalität nachzurüsten oder Fallback-Lösungen.

Es gibt aber noch eine Möglichkeit, von der ich regen Gebrauch mache: Wenn man recht große Bilder sehr stark mittels JPEG komprimiert, kommen Bilder mit sehr wenigen kilobyte heraus.

Ich setze daher Bilder ein, die auch für große Bildschirme ausreichen (mit doppelter Kantenlänge, also vierfacher Auflösung) als diese später angezeigt werden sollen.

Handys geben nach außen an, dass sie weniger können, als es tatsächlich der Fall ist. Wenn man beispielsweise eine 16px große Schriftart verwendet, wird die auf einem Handy auf die tatsächliche Auflösung bezogen wie eine 32 Pixel große Schriftart dargestellt. Das ist nötig, weil 16 Pixel auf dem kleinen Handy schon recht klein sind, für 12 oder gar 10 Pixel große Schriftarten gilt das umso mehr.

Glücklicherweise muss man sich hier nicht drum kümmern, die Handy-Browser übernehmen das. Jedenfalls werden die Schriften so groß dargestellt als würde die Webseite auf einem Bildschirm mit relativ grober Auflösung laufen. intern werden die Schriften aber mit der vollen Auflösung gerendert (berechnet) und auch bei der Darstellung kommt die volle Auflösung zum Einsatz. Darum sehen Schriften auf Handys so gestochen scharf aus (wie gedruckt). Für Bilder gilt dasselbe.

Wenn Du ein Bild, das 200 x 200 Pixel misst 100 x 100 Pixel groß anzeigen lässt, wird natürlich das 200 x 200 Pixel große Bild geladen (und dargestellt). Das führt auch auf Retina-Displays zu einer Darstellung, die genau wie bei Schriften sehr hochwertig wirkt.

Der Vorteil dieser Methode, die etwas kompliziert klingt, ist, dass die Anwendung überhaupt nicht kompliziert ist.

Man muss nur ein relativ großes Bild zur Verfügung stellen, um damit responsive Bilder für große Bildschirme und Handys gleichermaßen bereit zu stellen.

Das ganze mache ich schon seit einer geraumen Zeit (2103 habe ich bereits was dazu gepostet). Eine schöne Darstellung verschiedener Bild-Größen und das Ergebnis in kByte und Qualität findet man in dem Post ganz unten oder direkt hier.

Wie mache ist es denn am Besten? Eine Idee wäre, die Fotos auf 1000x640 zu verkleinern und dann die Bildgröße im HTML-Code zu definieren. Das müsste doch dann qualitativ besser sein, oder [als kleinere Auflösungen]?

Selbstverständlich.

Problem dabei ist, dass ich eine Diashow mit Bildern in portrait und landscape habe, so dass eine feste vorgegebene Größe problematisch sein könnte?

Die Größe kannst du für jedes Bild einzeln angeben...

Marc