Ijs2019medienpartner.jpg

SELFHTML ist in diesem Jahr Medienpartner der IJC.

Für die Konferenz vom 21. – 25. Oktober 2019 in München verlosen wir ein Freiticket.

Weitere Informationen finden sich im SELFHTML-Forum.

HTML/Tutorials/Bilder im Internet/Formate und Größen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
10-15min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Kenntnisse in
● HTML
● CSS


Die richtige Größe[Bearbeiten]

Warum lädt mein Bild so langsam?[Bearbeiten]

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?[Bearbeiten]

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 HTML/Tutorials/responsive Webdesign)

Weitere Hinweise finden Sie z.B. unter

Das richtige Format[Bearbeiten]

JPEG oder GIF[Bearbeiten]

Die hohe Anzahl von verschiedenen Farben, die in den meisten Fotos vorzufinden ist, trägt entscheidend zur Auswahl der Dateiformats bei: das GIF-Format 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 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.

Kompression vs. Abmessungen[Bearbeiten]

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.

Hauptartikel: Grafik/Grafikformat

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.

Grafiken mit Texten[Bearbeiten]

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 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[Bearbeiten]

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