Bilder im Internet/Formate und Größen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der ursprüngliche Artikel GIF oder JPEG aus dem aktuell.de.selfhtml-Bereich befasste sich mit der praktischen Anwendung der beiden Formate GIF und JPEG und zeigte, welches der Formate in welchen Fällen das geeignetere war.

Heute hat sich der Fokus verschoben. Niemand verwendet mehr Bilder in einer zu schlechten Qualität, um Bandbreite zu sparen. Bild-Dateien direkt vom Handy sind oft zu groß, sodass die Ladezeit der Seiten besonders auf mobilen Geräten mit beschränkter Bandbreite zu lange dauert.

Die richtige Größe

Warum lädt mein Bild so langsam?

Ein häufiger Fehler ist es, Bilder gleich von der Speicherkarte des Fotoapparats bzw. des Handys online zu stellen.

Empfehlung:

Welche Größe sollen Bilder im Web haben?

Hierbei gibt es natürlich keine festen Werte. Allerdings haben sich einige Erfahrungswerte herauskristallisiert:

  • Wenn Sie Bilder mit Großansicht (z.B. in einer Galerie) anzeigen möchten, empfehlen sich Werte um die 1000px größte Seitenlänge.
  • Wenn Sie Bilder in einer Galerie ohne Großansicht anzeigen möchten, empfehlen sich Werte um die 500px größte Seitenlänge.
  • Wenn Sie Bilder einfach nur neben dem Text anzeigen möchten, empfehlen sich Werte um die 300px größte Seitenlänge.
  • Wenn Sie Bilder in einer Vorschau anzeigen möchten, empfehlen sich Werte von 100 - 200px Seitenlänge.
Empfehlung: Wenn Sie bei Thumbnails markante Ausschnitte von Details anstelle einer einfachen 1:1 Verkleinerung des „großen“ Bildes zeigen, wirkt die Vorschau spannender. Die Vergößerung sollte drastisch sein. Um die Details noch stärker zur Geltung zu bringen, können Sie das Vorschaubild noch einmal schärfen (unscharf maskieren).

Dies sind grobe Daumenwerte. Letztendlich hängt es von Bild selbst ab und wieviel Platz Ihnen zur Verfügung steht oder Sie dem Bild einräumen möchten.

Die Entwicklung geht natürlich immer weiter, heute ist von gestochen scharfen kleinen Displays bis hin zu 30-Zoll-Bildschirmen alles dabei. (siehe responsiv(es Webdesign))

Weitere Hinweise finden Sie z.B. unter

Das richtige Format

BMP

Das BMP-Format (Windows Bitmap) wurde für das Betriebssystem Microsoft Windows entwickelt und dient dort zur möglichst einfachen, systemnahen Darstellung von Rastergrafiken mit einer Farbtiefe von bis zu 24 bit pro Pixel.

Beachten Sie: Bitmaps im .bmp- oder .tif-Format eignen sich nicht für das World Wide Web, da alle Pixel mit ihrem zugehörigen Farbwert gespeichert werden. Deshalb sind BMP-Dateien sehr viel größer als komprimierte Rastergrafiken.

JPEG oder GIF

Die hohe Anzahl von verschiedenen Farben, die in den meisten Fotos vorzufinden ist, trägt entscheidend zur Auswahl der Dateiformats bei: das GIF-Format[1] besitzt eine Farbtabelle, welche höchsten 256 Farben aufnehmen kann. Das bedeutet, dass Sie erstens die Datenmenge nur durch die Reduzierung der Farben verringern können, und zweitens 256 Farben häufig zu wenig für ein ansprechendes Foto sind.

JPEG[2] wiederum speichert mehr Farbinformationen ab, wodurch eine hohe Farbanzahl gewährleistet werden kann. Die eingebaute flexible Komprimierung ermöglicht zusätzlich eine Reduzierung der Dateigröße, ohne große Einschnitte in der Qualität zu machen.

Als Beispiel hier ein Foto mit einem blauen Himmel:

JPEG (200x270px ) 11.9 KB GIF (200x270px) 14,8 KB
Rastergrafik mit jpg Rastergrafik mit gif

Wie Sie hier sehen, ergeben sich gerade durch die reduzierte Anzahl der Farben bei GIF bei den Farbübergängen (Himmel und Teile der Flagge) hässliche Streifen. Die 256 verschiedenen Farben reichen einfach nicht aus, um einen gleichmäßigen Farbübergang darzustellen. Beim JPEG-Format tritt dieses Problem nicht bzw. erst bei sehr starker Komprimierung auf.

Die Dateigröße ist im Gegensatz zum GIF (14,8 KB) mit 11.9 KB auch noch deutlich kleiner. Das JPEG-Bild ist allerdings mit 50% komprimiert.

Andererseits ist es mit dem GIF-Format möglich eine Farbe als Transparenz festzulegen. Es können auch mehrere Ebenen übereinandergelegt und animiert werden.[3]

Kompression vs. Abmessungen

Fotos werden im Allgemeinen als Rastergrafiken abgespeichert, in denen jeder Pixel einen bestimmten Farb- und Helligkeitswert hat. Damit die Datenmengen eines solchen Bitmap-Bildes nicht zu groß wird, werden diese Farbinformationen komprimiert. Das klappt nicht ganz verlustfrei, ist im allgemeinen aber zu verkraften.

JPEG (unkomprimiert) 71,0 KB JPEG (50% komprimiert) 11,9 KB    Ausschnitt-Vergrößerung
Rastergrafik unkomprimiert Rastergrafik komprimiert Ausschnitt

Das JPEG-Foto liefert bei 50% Komprimierung befriedigende Qualität. Die Farbübergänge am Himmel und an der Flagge erscheinen in allen Farben. In quadratischen Bereichen werden die Farbinformationen durch Mittelwertsberechnungen zusammengefasst.

Bei dieser Vergrößerung kann man aber auch deutlich einen der Nachteile von JPEG erkennen: Kanten und harte gerade Übergänge fransen mit zunehmender Komprimierung aus.

Je besser Sie die Qualität einstellen, desto kleiner werden diese quadratischen Bereiche und desto weniger wird der Nachteil sichtbar.

In Zeiten von pixelgenauen Layouts wurden Bilder auf die benötigten Maße zugeschnitten und mit dem width-Attribut ein fester Platz auf der Webseite freigehalten. Dies ist heute obsolet, da bei hochauflösenden Geräten Bild-Pixel und Geräte-Pixel voneinander abweichen. Deswegen sind passend zugeschnittene Bilder nun oft zu klein und wirken deshalb pixelig.

Empfehlung: Wenn Sie Rastergrafiken in größeren Abmessungen und einer hohen Kompression (30-40%) abspeichern, vermeiden Sie Artefakte und Verpixelungen. Viele Bilder sind aber auch bei einer Kompression von 25% noch akzeptabel.[4][5]

Hauptartikel: Bilder im Internet/responsive Bilder mit picture

PNG - Grafiken mit Texten

Bei Texten stößt das JPEG-Format an seine Grenzen. Die Schrift wird unscharf dargestellt und an den Rändern der Buchstaben treten Störungen auf. Hier bietet sich für Rastergrafiken neben dem GIF- auch das PNG-Format[6] an. PNG kann die gleiche Fülle an Farben darstellen wie JPEG, komprimiert aber verlustfrei. Dafür sind die Bilddateien meist größer als bei JPEG.

JPEG (10,90 KB) GIF (5,57 KB) PNG (8,78 KB)
Rastergrafik jpg Rastergrafik gif Rastergrafik png


Allerdings gilt das Ersetzen von Text in HTML durch Bilder (das sogenannte Image Replacement) mittlerweile als verpönt.

Empfehlung: Text sollte nie durch Grafiken ersetzt werden, da er sonst nicht von Suchmaschinen gefunden werden oder markiert werden kann.

WebP

WebP („weppy“) ist ein Datenformat für verlustbehaftet oder verlustfrei komprimierte statische oder animierte Bilder. Es ist ein Schwesterprojekt des Videoformates WebM. WebP erreicht bei sehr hoher Komprimierung mehr Bildqualität pro Datenmenge als JPEG.

Browserunterstützung
caniuse.com

AVIF

Das Bildformat AVIF basiert auf der Videokodierung AV1 und wurde ursprünglich für die Videoübertragung im Internet entwickelt. Das AVIF-Format soll eine im Vergleich zu JPEG oder PNG besonders hohe Bildqualität bei hohen Kompressionsraten verfügen. Es bietet im Gegensatz zu bestehenden Bildformaten Bandbreiteneinsparungen.

Browserunterstützung
caniuse.com

Logos und Icons

Kleine Icons aus JPEG- oder GIF-Grafiken wirken auf hochauflösenden Bildschirmen oft pixelig. Daneben sorgt eine Vielzahl von Grafiken für viele http-Requests, die die Ladezeit der Seite erhöhen.

Diagramme und Info-Grafiken können oft besser mit SVG realisiert werden.

Empfehlung: Erstellen Sie SVG-Icons. Sie sind immer gestochen scharf, skalierbar und können sogar bei größeren Viewport-Größen zusätzliche Details einblenden.
Erstellen Sie die Grafiken in einem Grafikprogramm wie Inkscape oder Illustrator und optimieren Sie sie.

Hauptartikel: SVG/Tutorials/Icons

Screenshot von SVG-Icons
SVG-Icons, die mit custom properties entsprechend formatiert wurden


Weblinks

  1. ↑ Wikipedia: Interchange Format
  2. ↑ Wikipedia: JPEG
  3. ↑ Der Vorteil der animierten GIFs ist ihre problemlose Einbindung in Webseiten. Trotzdem gibt es einige Nachteile:
    • einmal erstellte Versionen lassen sich nur schwer ändern (jedes Bild muss einzeln in einem Grafikprogramm bearbeitet werden)
    • Die Animation kann nicht angehalten oder wieder animiert werden.
    • Um Bilder einzublenden, braucht man viele Zwischenbilder (hoher Speicherbedarf)
    Deswegen werden folgende Alternativen doch wieder interessant: Siehe auch: SELF-Blog: GIF - heute noch aktuell? vom 26.03.2022
  4. ↑ developers.google.com: Bild-Optimierung
  5. ↑ Daan Jobsis: Retina revolution
  6. ↑ Wikipedia: Portable Network Graphics
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Bilder_im_Internet/Formate_und_Größen&oldid=93804“