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

[Maxi]

Hallo,
Wieder so ein Anfängerproblem. Ich möchte einige Bilder auf meiner Homepage haben. Habe also Fotos gemacht, die so 5 MB groß sind. Die habe ich dann mit Irfan auf sagen wir 300 x 200 px verkleinert, dann sind sie nur noch 40 KB groß, die Qualität lässt aber sehr zu wünschen übrig. 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? 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?

[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

[Gunnar Bittersmann]

@@marctrix

Eine Möglichkeit ist mittels JavaScript (gibt fertige Lösungen im Netz) oder dem Element picture verschieden hoch aufgelöste Bilder anzubieten.

Vergessen wir mal die erste. Mit dem picture-Element und vor allem dem srcset-Attribut ist man auf dem zukunftssicherem Weg und man muss sich nicht um Programmierung kümmern.

Bräuchte man also wiederum ein JavaScript (Polyfill) um diese Funktionalität nachzurüsten oder Fallback-Lösungen.

Ja, und in denen von Scott Jehl und Alexander Farkas steckt sicher soviel Knowhow, dass man es selbst nicht besser machen könnte.

LLAP 🖖

[marctrix]

Hej Gunnar,

Bräuchte man also wiederum ein JavaScript (Polyfill) um diese Funktionalität nachzurüsten oder Fallback-Lösungen.

Ja, und in denen von Scott Jehl und Alexander Farkas steckt sicher soviel Knowhow, dass man es selbst nicht besser machen könnte.

Unbedingt. Eine gut gepflegte, seit womöglich Jahren aufgrund von Feedback gepflegte Lösung ist einer eigenen in den meisten Fällen vorzuziehen.

Gilt für Anfänger doppelt und dreifach. Üben kann man natürlich (und soll man auch). In der Praxis (auf öffentlichen Seiten) sollte man aber keine Experimente einsetzen!

Marc

[Maxi]

Dank an alle. Ich kann daraus viel lernen. Momentan versuche ich mich aber weiter noch etwas an einfachen Lösungen ... Gruß

[Vollzitat]