Bilder in WordPress – Ratgeber

Wann JPG, GIF oder PNG? SVG?

Dieser Artikel soll WordPress-Administratoren und -Redakteure bei der Optimierung von Bildern auf der Website unterstützen.

Update: Wir haben bei Walter Live ein aktuelleres Webinar zu diesem Thema: Bildoptimierung fürs Web(P)

Formatwahl für Eilige

• Nimm JPG für Fotos und nur für Fotos.
• Den Rest kannst du vermutlich mit PNG lösen.
• Logo als SVG.

	JPG	GIF	PNG-8	PNG-24
Wofür	Fotos	Animationen	Flache Grafiken mit wenigen Farben	Alpha-Transparenz, kleine Grafiken, die in hoher Qualität genutzt werden
Farben	16 Mio	Max. 256	Max. 256	16 Mio (oder mehr, dann wird es zum PNG-32)
Komprimierung	Qualität 0-100	Anzahl Farben, div.	Anzahl Farben, div.	Anzahl Farben, div.
Verlustlose Komprimierung	👎🏽	👍🏽	👍🏽	👍🏽
Animation	👎🏽	👍🏽	APNG	APNG
Transparenz	👎🏽	Ja, aber jeder Pixel ist entweder ganz deckend oder ganz transparenz	👍🏽	👍🏽, Alpha-Transparenz (Teil-Transparenz)

Bilder schneller laden

Websites können nicht zu schnell laden. Bilder sind häufig der Grund, warum eine Website nicht schnell lädt. Wir wollen, dass die Bilder gut aussehen und doch schnell laden.

Verschiedene Massnahmen und Kriterien können Bilder optimieren. Darunter gehören unter anderem:

• Format (JPG, PNG; GIF, SVG)
• Komprimierung der Datei
• Dimensionen (z. B. 1024px x 768px)
• Anzahl Bilder auf einer Seite

Format

Im Web werden folgende Bildformate am meisten genutzt: JPG, GIF, PNG und SVG. Andere Formate wie BMP, TIF und PSD haben im Web nichts verloren. Sie müssen in ein webfreundliches Format konvertiert werden bevor sie ins Web kommen.

Nachfolgend besprechen wir die einzelnen Formate etwas detaillierter.

Komprimierung

Verschiedene Formate haben verschiedene Komprimierungs-Möglichkeiten. Beim JPG haben wir einen Regler, mit dem wir die Dateigrösse nahezu stufenlos verkleinern können, indem auch die Qualität verschlechtert wird.

Bei anderen Formaten haben wir andere Möglichkeiten, z. B. die Anzahl der verfügbaren Farben reduzieren.

Dimensionen

Wie breit und hoch ist das Bild? Je kleiner das Bild ist – also, je weniger Pixel das Bild hat, umso kleiner ist die Datei.

Anzahl Bilder auf einer Seite

Vielleicht der banalste Punkt. Wie viele Bilder werden auf einer Website geladen? Wenn ich 100 Bilder lade, dann dauert das ca. 100 Mal länger, als wenn ich ein Bild lade. Manchmal ist die beste „Komprimierung“, die Reduktion der Anzahl Bilder auf einer Seite.

Bildformate mi Vergleich

JPG

Das JPG-Format ist für Fotos geeignet. Das ist es eigentlich schon. Bilder, die Millionen von Farben enthalten und ein wenig Qualitätsverlust zugunsten von kleinerer Dateigrösse verkraften. Das sind meistens Fotos.

GIF

Das Format GIF wurde mehrheitlich durch PNG-8 abgelöst.

GIF-Dateien können aber auch Animationen enthalten, was bei PNG zwar geht, aber nicht so breite Unterstützung unter den Browsern geniesst (Beispielsweise der Internet Explorer versteht animierte APNG mindestens bis und mit Version 11 nicht). Schon der Begriff „Animiertes GIF“ löst oft Augenrollen aus. Das bewegende Briefkasten-Fähnchen ist total ausser Mode geraten. Das heisst aber nicht, dass Animationen nicht sinnvoll eingesetzt werden können.

PNG

PNG-Dateien könnte man fast als Alleskönner bezeichnen. Sie zeigen Bilder wunderschön mit einer verlustlosen Komprimierung – also ohne Qualitätsverlust. Sie unterstützen Alpha-Transparenz, was bedeutet, dass jeder Pixel eine beliebige Farbe haben kann und zusätzlich die Transparenz bzw. Deckkraft definiert werden kann. 

Man könnte also in die Versuchung kommen, jedes Bild im Web im PNG-Format zu speichern. Es gibt aber einen Haken: PNG-Dateien können schnell mal ziemlich schwer (Dateigrösse) werden. Somit ist das PNG-Format oft nicht zu empfehlen, wenn es sich um Bilder mit grossen Dimensionen handelt. 

SVG

SVG-Dateien sind Vektorgrafiken. Da dieses Format Skripte erhalten kann, und somit eine potentielle Gefahr mit sich bringen kann, ist es standardmässig deaktiviert in WordPress.

Mit Hilfe eines Plugins kann das Format SVG trotzdem wieder aktiviert und genutzt werden. Danach können Sie zum Beispiel ein Logo im SVG-Format hoch laden.

SVG Support
https://wordpress.org/plugins/svg-support/

Safe SVG
https://wordpress.org/plugins/safe-svg/

Die 72-DPI-Lüge

“Bilder sollen mit 72 DPI gespeichert werden, wenn sie für das Web genutzt werden!” 

Das hört man nicht selten. Auch in Büchern ist dieser Quatsch zu finden.

Dass es schwachsinnig ist, solche Aussagen zu machen, ist schnell erklärt: DPI steht für Dots Per Inch, also Punkte pro Zoll. Der Bildschirm alleine gibt vor, wie dicht die Pixel zueinander stehen. Mit einem Bild kann man das nicht ändern.

Im Print-Bereich ist das anders. Bildpunkte können kleiner und näher zusammen gedruckt werden und das ergibt eine höhere DPI-Zahl. Da macht das Sinn. Auf Bildschirmen nicht.

Das heisst, wenn ein Bild für das Web gespeichert wird, dann zählen bezüglich Auflösung nur die Dimensionen in Pixeln. Wie viele Pixel breit mal wie viele Pixel hoch.

Wie gross dürfen Bilder maximal sein?

So klein wie möglich, so gross wie nötig. Das hängt von vielen Faktoren ab:

• Zielgruppe
• Art der Website
• Anzahl der Bilder auf einer Seite
• Bildgrössen und -formate