Bilder im Internet/Formate und Größen

Aus SELFHTML-Wiki
Bilder im Internet(Weitergeleitet von Grafikformat)
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?

Für einfache Webseiten kann man sich grob an folgenden Größen orientieren:

  • Vorschaubilder: etwa 150–300 Pixel größte Seitenlänge
  • Bilder neben dem Text: etwa 400–800 Pixel
  • Galerie ohne Großansicht: etwa 600–1200 Pixel
  • Großansicht: etwa 1200–2000 Pixel oder mehr

Das sind allerdings nur Richtwerte. Auf hochauflösenden Displays kann eine größere Bilddatei erforderlich sein, während für ein kleines Smartphone-Display eine wesentlich kleinere Variante genügt.

Empfehlung: Wenn du bei Thumbnails markante Ausschnitte von Details anstelle einer einfachen 1:1 Verkleinerung des „großen“ Bildes zeigen, wirkt die Vorschau spannender (Art Direction). Die Vergößerung sollte drastisch sein. Um die Details noch stärker zur Geltung zu bringen, kann man das Vorschaubild noch einmal schärfen (unscharf maskieren).

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

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

Weitere Hinweise findest du 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.

Beachte: 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 man erstens die Datenmenge nur durch die Reduzierung der Farben verringern kann, 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 man hier sieht, 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 (unkom­primiert) 71,0 KB JPEG (50% kompri­miert) 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 du 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 du Rastergrafiken in größeren Abmessungen und einer hohen Kompression (30-40%) abspeicherst, vermeidest du Artefakte und Verpixelungen. Viele Bilder sind aber auch bei einer Kompression von 25% noch akzeptabel.[4][5]

→ Hero-Images – Große Bilder als Blickfang

moderne Alternativen

AVIF

Browserunterstützung
caniuse.com

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.

HEIC

Browserunterstützung
caniuse.com

High Efficiency Image File Format (HEIF) ist ein flexibles Container-Dateiformat für Bilder und Bildsequenzen, das verschiedene Kompressions-Algorithmen unterstützt. Es hat die Dateiendung .heif oder .heic und verspricht (wie HEVC) 40 Prozent Platzersparnis gegenüber JPEG.

Für Browser ist es schwierig, HEIC zu unterstützen, da das Format komplex ist und die Lizenzierung kostspielig ist. AVIF und JPEG XL bieten kostenlose Lizenzen und sollen HEIC ablösen.[6]

WebP

Browserunterstützung
caniuse.com

WebP („weppy“)[7] 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.

JPEG XL

Browserunterstützung
caniuse.com

JPEG XL [8] verbessert die Qualität der komprimierten Bilder relativ zur Datei-Größe gegenüber den älteren Bildformaten JPEG, JPEG 2000 und WebP. Im Vergleich zu den moderneren Formaten HEIC und AVIF besteht lediglich ein leichter Vorteil bei Bildern mit einer hohen Bildqualität (geringe Kompression) bzw. in Originalqualität (verlustlose Kompression).


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[9] 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.

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: Erstelle SVG-Icons. Sie sind immer gestochen scharf, skalierbar und können sogar bei größeren Viewport-Größen zusätzliche Details einblenden.
Erstelle die Grafiken in einem Grafikprogramm wie Inkscape oder Illustrator und optimiere diese dann.

→ SVG/Tutorials/Icons

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


Bilder passend ausliefern

  • Einbindung mit img
    • src und srcset
    • gute Alternativtexte
    • Bilder mit CSS formatieren
      • flexible Breiten
      • Rahmen und Filter
      • Größenanpassung mit object-fit
    Landscape.svg
     
  • Hero-Images – Große Bilder als Blickfang
    • Resolution Switching mit srcset
    • <picture> –ein Container
    • Art Direction
    • light and dark mode
    Picture-art-direction.svg
     
  • Responsiv(es Webdesign)
    Brad-Frost-this-is-not-the-web.png
     

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. ↑ caniuse.com/heif
    It is hard for browsers to support HEIC because it is complex and expensive to license. AVIF and JPEG XL provide free licenses and are designed to supersede HEIC.
  7. ↑ webP (de.wikipedia.org)
  8. ↑ XL JPEG XL (de.wikipedia.org)
  9. ↑ Wikipedia: Portable Network Graphics

Abgerufen am 25.08.2026
von "http://wiki.selfhtml.org/wiki/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen"