Hinweise
Bild vom .jpg‑Format ins .webp‑Format umwandeln
Eine DSLR Kamera, also eine digitale Spiegelreflexkamera, liefert Bilder im .jpg‑Format. Standardmässig in der Grösse 6'000 × 4'000 Pixel, 300 dpi Auflösung in der Höhe und der Breite, was dem Formfaktor 3:2 entspricht. Natürlich mit exzellenter Auflösung, geeignet zum Drucken. Diese Datei belegt relativ viel Speicherplatz. Auf heutigen Computern spielt dieser Platzbedarf eine eher untergeordnete Rolle. Im Internet ist die Dateigrösse hingegen wesentlich. Zudem bringt diese Auflösung für die Anzeige auf einem Bildschirm keinen sichtbaren Vorteil.
Ein Bildschirm zeigt standardmässig eine Auflösung von 72 ppi an. Ein Quadratzoll eines Bildes im .jpg‑Format enthält 300 × 300 = 90'000 Bildpunkte pro Zoll. Für die Anzeige auf einem Bildschirm sind 72 × 72 = 5'184 Bildpunkte pro Zoll erforderlich. Mit einer Reduktion der Bildpunkte von etwa 94 % wäre der Bildschirm also zufrieden und man würde keinen Unterschied sehen.
Doch wie entfernt man diese nicht benötigten Bildpunkte?
Dafür hat Google das .webp‑Format erfunden, den heutigen Spitzenreiter für Bilder im Webdesign. Das Werkzeug Squoosh hilft dir, Bilder umzuwandeln.
Wir wandeln mit Squoosh um
Wir verringern die Bildbreite auf 1'900 Pixel, lassen die Höhe automatisch berechnen und können sogar die Bildqualität auf 75 % senken. Obwohl dies zu einer verlustbehafteten Kompression führt, verringert es den Platzbedarf zusätzlich um einige Prozente, ohne dass dies merklich sichtbar würde. Zudem komprimiert das .webp‑Format noch besser als dies schon das .jpg‑Format tut.
Wir vergleichen
| Format | B × H [Pixel] |
Auflösung [dpi] |
B × H [cm] |
Formfaktor [1] |
Speicherplatz [KB] |
Reduktion |
|---|---|---|---|---|---|---|
| .jpg | 8'510 × 5'874 | 300 × 300 | 72 × 49.7 | 3:2 | 10'900 | |
| .jpg | 8'510 × 5'874 | 72 × 72 | 300 × 207 | 3:2 | 10'900 | |
| .webp | 1'900 × 1'266 | 72 × 72 | 67 × 44.7 | 3:2 | 256 | -98 % |
Die Bildbreite nimmt von 72 auf 67 cm, ab. Wobei Du ein Bild kaum 67 cm breit auf einen Bildschirm bringen möchtest. Wenn Du das Bild nicht verkleinerst, könntest Du es 3 m breit auf einen Bildschirm zaubern.
Fazit
Quasi ohne sichtbaren Verlust haben wir den Speicherplatz mit ein paar Handgriffen um 98 % reduziert.
Der Server lädt extrem viel schneller, die Besucher freuen sich statt unsere Website wegen zu hoher Lieferfristen zu verlassen, und wir benötigen extrem viel weniger Speicherplatz auf dem Server, denn plötzlich überschreiten wir den gemieteten Speicherplatz und müssen alte Bilder löschen oder ein teureres Hosting mieten.
Viel Spass bei deinem Experimentieren mit Bildern für dein Webdesign!
Noch ein paar Sätze zu DPI
Weiter oben schreibe ich, dass 72 dpi der Standard bei heutigen Bildschirmen seien. Das stimmt so nicht. Andere behaupten, 72 dpi seien uralte Vergangenheit. Richtig ist: Eine Bildauflösung von 72 dpi wird im Webdesign im Hinblick auf den Platzbedarf von Bildern immer noch angewendet und empfohlen. Wichtiger ist die Bildgrösse in Pixeln, und hier wird als Minimum Full HD (1'920 × 1'080, Formfaktor 16:9) empfohlen. Wir erhalten jedoch Bilder vom Fotografen mit dem Formfaktor 3:2. Deshalb haben wir uns für die Grösse 1'900 × 1'270 entschieden. Was Bildschirme betrifft, zeigen heutige Mobiltelefone bis 400 DPI an. Wenn wir also 1'900 durch 400 teilen, würde das für eine Breite von knapp 5 Zoll (ca. 13 cm) reichen. Ich kenne kein Handy, das so breit ist. Kurz und gut: Unsere Bilder werden auf PC‑Bildschirmen einwandfrei und auf dem Handy extrem scharf angezeigt, was unserem Ziel entspricht. Und wenn jemand ein Bild in der Grösse 72 × 49.7 cm drucken möchte, müsste er das Originalbild im .jpg‑Format beim Fotografen anfordern.