Website-Bilder optimieren

Fehler im Zusammenhang mit Fotos und Grafiken auf Websites sind ein Dauerbrenner: Immer wieder werden sie falsch hochgeladen. Entweder ist die Dateigröße zu hoch, die Abmessungen sind für den Einsatz ungeeignet (oft zu groß), oder das falsche Dateiformat wurde gewählt. Was auch oft falsch gemacht wird: die Dateinamen und die Alttexte fehlen, zwei wichtige Punkte für das SEO und für die Barrierefreiheit. Website-Bilder müssen vor dem Hochladen optimiert werden. In diesem Artikel beschreibe ich die sechs häufigsten Fehler und wie du sie für deine Website mit WordPress vermeiden kannst.

Website-Bilder optimieren: 6 häufige Fehler und wie du sie vermeidest

Fehler 1

Das Bild hat eine zu hohe Pixeldichte

Hat dein Foto mehr als 2.000 Pixel Seitenbreite?

Die meisten Fotos, die du vom Handy oder der Kamera aufnimmst, haben eine ziemlich hohe Pixeldichte. Die Breite der Fotos beträgt oft mehr als 4.000 Pixel. Diese Pixelzahl brauchst du nur, wenn du das Foto ausdrucken möchtest. Für eine Website reichen kleinere Pixelzahlen.

Aber Achtung: Die Pixeldichte ist abhängig vom Einsatzort auf deiner Website. Wenn du nur ein kleines Begleitbild zum Text brauchst, reichen 300 bis 900 Pixel in der Breite. Fotos für dein Herobild brauchen andere Maße. Herobilder oder auch Headerbilder sind die Fotos, die man am Kopf vieler Webseiten sieht und die oft über die ganze Breite des Displays laufen. Diese Bilder sollten mindestens 1.920 Pixel breit sein, damit das Bild auf großen Monitoren nicht unscharf (pixelig) wird.

Für die Texte reichen kleine Bilder, für den Header ganz oben auf den Seiten brauchst du breitere Formate mit höheren Pixelzahlen.

Für jeden Einsatzort auf deiner Website solltest du die richtige Größe parat haben. Und jedes Bild sollte nur so breit sein, wie es tatsächlich angezeigt wird, um Ladezeiten zu optimieren.

Die Größe der Bilder hängt auch von der Layoutbreite deiner Seiten ab.

Wie komme ich zur richtigen Pixelbreite?

Angenommen, du hast wie ich eine Layoutbreite von 1.120 Pixel und dein Bild soll über diese ganze Breite der weißen Fläche gehen. Dann muss dein Bild 1.120 Pixel breit sein, wenn es nicht verpixelt sein soll. Meine Bilder sind schmaler, wie du siehst, weil ich einen „inneren“ Abstand zu den Texten und zu den Bildern eingebaut habe. Auf beiden Seiten dieser weißen Fläche ist ein Abstand von 70 Pixel.

Das heißt:

1120 Pixel – 2 x 70 Pixel = 980 Pixel.

Die Bilder auf dieser Seiten brauchen also nur eine Breite von 980 Pixel.

Die Ausnahme: das Headerbild oder auch Herobild

Das Headerbild ist das breite Bild (auch Herobild genannt), das über die gesamte Displaybreite geht. Für das Headerbild wählst du 1.920 Pixel in der Breite.

Die Höhe des Headerbildes kannst du so wählen, wie du es haben möchtest. Ich verwende meistens Panoramaformate, also z.B. 1980 x 600 Pixel.

Für Bilder im Text wählst du zwischen 1080 und 250 Pixel Seitenbreite. Je nachdem, wie groß die Bilder angezeigt werden sollen.

Das heißt im Endeffekt: Wenn du ein und dasselbe Motiv mehrfach in unterschiedlichen kleinen und großen Breiten auf deiner Website darstellst, dann solltest du das Bild in unterschiedlichen Größen in WordPress parat haben.

Übrigens: WordPress selber legt von jedem Bild, das du in die Mediathek lädst, drei unterschiedliche Größen an. Das hat den Effekt, dass für jeden Zweck und jedes Display die richtige Bildgröße dem Besucher der Seite angezeigt wird. Und nicht etwa ein 1080 breites Bild, wenn nur 150 Pixel gebraucht werden.

Allerdings sind die voreingestellten Größen in WordPress nicht mehr zeitgemäß und passen nicht zu den modernen Themes. Deshalb kannst du hier die Größen für deine Zwecke einstellen. Das machst du in WordPress im Dashboard unter > Einstellungen > Medien.

Und noch etwas: Aus SEO-Sicht sind eher größere Bilder optimal. Hier musst du also den Kompromiss finden zwischen Dateigröße und Ladezeit.

Speicher die richtige Größe der Datei:

Eine kleine Dateigröße ist bei großen Headerbildern nicht ganz einfach. Aber es kommt auch auf das Motiv an. Je detailreicher ein Motiv ist, je stärker die Farbtiefe, desto größer kann die Datenmenge ausfallen. Schwarzweiß-Bilder sind meist kleiner als Farbbilder desselben Motivs.

Mehr als 150 KB sollte ein Bild jedoch nicht haben. Und damit wären wir bei dem Fehler, den ich am häufigsten beobachte:

Fehler 2:

Das Bild hat eine unnötig hohe Dateigröße

Ist dein Foto mehr als 200 KB oder sogar 1 MB groß?

Selbst wenn du die Pixelzahl reduziert hast: Meistens hast du danach immer noch eine relativ hohe Dateigröße. Willst du also deiner Website Beine machen, muss du nochmal an deine Bilder ran: Die Bytes müssen verringert werden. Das nennt sich Komprimierung. So kann ein Foto mit ehemals 330 KB auf 70 KB gebracht werden. Das macht im Endeffekt bei vielen Fotos auf der Seite wertvolle Sekunden aus, die die Website schneller lädt.

Fehler 3:

Das Dateiformat ist ungünstig oder ungeeignet

Ist jpg immer das richtige Dateiformat für mein Bild?

Beim Dateiformat hast du die Qual der Wahl. Einige Programme zeigen dir beim Speichern deiner Bilder gleich eine ganze Anzahl an möglichen Formaten an: JPG, Tiff, PNG, ICO, PICS, PICT, RAW, EPS, PSD, BMP, heic, Gif, Webp, SVG, PDF… Aber was unübersichtlich aussieht, ist recht einfach.

Du musst nur wissen, welche Formate dafür geeignet sind, auf Internetseiten dargestellt zu werden, also welche Formate von einem Browser gelesen werden können. Außerdem müssen die Formate auf verschiedenen Betriebssystemen ausgetauscht werden können.

Und damit wird die Wahl schon enger:

JPG,
PNG,
GIF,
Webp
SVG

sind die einzigen 5 Formate, die du dir für deine Website merken musst. Da du in der Regel nur Fotografien auf deine Website lädst, kommen für dich überwiegend JPG und Webp infrage.

JPG und Webp

sind die Formate für Fotografien. Warum? Weil sie einen hohen Farbumfang haben (über 16 Millionen Farben). Anders als PNG, GIF oder SVG. Das GIF kann nur 256 Farben abbilden.

Das JPG hat allerdings Inzwischen ausgedient und wird immer mehr vom moderneren Webp verdrängt. Der Grund ist einfach: Das Webp kann bei gleicher Qualität stärker komprimiert werden als das JPG. Das heißt: Wenn bei einer maximalen Darstellungsqualität des Fotos das JPG eine Größe von 200 KB hat, kommt das Webp auf gerade mal 30 KB (als Beispiel). Die geringere Dateigröße hat unmittelbaren Einfluss auf die Ladezeit der Website. Und ist damit ein Rankingfaktor (wichtig also für dein SEO).

PNG

Das PNG brauchst du, wenn dein Bild eine Transparenz hat.

Transparenzen bei Bildern – was ist das nun wieder? Das ist schnell erklärt:

Ich erkläre es am Beispiel von JPGs. Die haben immer einen weißen, rechteckigen Hintergrund. Wenn du also ein rundes Motiv hast, wird es auf einem rechteckigen, weißen Feld dargestellt. Da dein Foto normalerweise ein rechteckiges Motiv ist, siehst du den Hintergrund nicht. Das siehst du erst, wenn du das Motiv ausschneidest. Beim Freistellen nämlich. Es gibt Programme – oder auch Online-Tools – mit denen du Motive freistellen kannst, also ohne Hintergrund.

Dumm nur: Wenn du dieses freigestellte Motiv als JPG speicherst, ist der Hintergrund hinter dem freigestellten Motiv: ein weißer Kasten. Du siehst es am Beispiel der Fotoreihe unten: das verwelkte Blattmotiv. Vom Originalfoto hab ich das Blatt freigestellt. So nennt man das, wenn man den Hintergrund ausschneidet. Als JPG kann ich das Blatt nur mit einem weißen Kasten als Hintergrund speichern.

Das PNG dagegen kann ich vor einem beliebigen Hintergrund stellen, ohne weißen Kasten um das Blatt. (Im Beispiel hier hab ich das Blatt vor einem anderen Hintergrund gesetzt und als JPG gespeichert, da das PNG zu groß ist. Aber der Effekt sollte deutlich sein.)

GIF

Das GIF brauchst du nur, wenn du eine Animation auf deiner Website zeigen möchtest. Das kann eine winkende Katze sein oder ein Bild mit einem blinkenden Text – kennst du bestimmt von diesen nervigen Werbebannern. Das sind GIFs.

SVG

Als letztes hast du noch das SVG. Das ist eine Besonderheit, weil es kein Rasterformat ist (wie JPG, GIF, PNG oder Webp), sondern ein Vektorformat. Vektoren bilden Grafiken immer messerscharf ab, Pixel gibt es nicht. Denn ein SVG besteht aus mathematisch berechneten Kurven.

Das SVG eignet sich deshalb besonders für dein Logo.

Zusammenfassung: Welche Formate setzt du wann ein?

• Deine Fotos speicherst du als JPG oder besser: als WebP ab.
• Bilder mit Transparenzen speicherst du als PNG ab. (Ausnahme: WebP kann auch Transparenzen).
• Dein Logo speicherst du als SVG (allerdings muss es vorher in einem Vektorprogramm erstellt werden, ansonsten speicherst du es als PNG ab).
• Hast du animierte Bilder? Die speicherst du als GIF ab.

Fehler 4:

Das Bild hat keinen websicheren Dateinamen

Falsche Zeichen innerhalb des Dateinamens können verheerende Folgen haben: Die Bilder werden vom Server, Betriebssystem oder Browser nicht erkannt. Dann können sie nicht angezeigt werden. Und dein Besucher sieht nichts. Deshalb musst du sehr genau darauf achten, welche Zeichen du im Dateinamen anwendest.

Hier die Grundregeln für richtige Dateinamen:

• Keine Umlaute (ö, ü, ä, auch nicht das ß)
• Keine Sonderzeichen (außer Binde- oder Unterstrich)
• Keine Leerzeichen
• Keine Großbuchstaben

Beispiel für einen falschen Dateinamen:

Schneiderin Müller-nimmt Maß.jpg

Fallen dir die 4 Fehler auf?

Lösung: 3 x Großbuchstaben, 2 x Leerzeichen, 1 Umlaut und 1 ß sind falsch.

Dies ist die richtige Schreibweise:

schneiderin-mueller-nimmt-mass.jpg

Der Grund ist, dass diese Schreibweise der kleinste gemeinsame Nenner ist für alle Betriebssysteme und Programme, um das Bild wirklich anzeigen zu können. Nicht alle Systeme und Programme können z.B. mit Großbuchstaben oder Leerzeichen etwas anfangen. Ergebnis: Einigen Benutzern wird dein Bild nicht gezeigt.

Wenn du auf Nummer sicher gehen willst, achtest du also auf diese Schreibregeln für Dateinamen.

Fehler 5

Der Dateiname ist zu generisch

Leider werden Bilder immer wieder mit dem Dateinamen hochgeladen, wie er aus der Kamera kommt. Also als Beispiel: IMG_3519.jpg.

Das ist fatal, aus zwei Gründen: Du wirst mit diesem Dateinamen niemals das richtige Foto wiederfinden, wenn du es später suchst.

Und: Der richtige Dateiname hat durchaus Relevanz auf deiner Website. Es hat zwar nichts mit der Ladezeit deiner Website zu tun. Und neuesten SEO-Erkenntnissen zufolge ist der Dateiname eines Bildes eher unwesentlich für eine gutes Ranking. Das aber trifft vor allem zu, wenn das Bild keinen Alt-Titel hat. Fehlt der Alt-Titel, dann ist der Dateiname wieder relevanter.

SEO-Experten raten dennoch, der URL des Bildes (also dem Dateinamen) Keywords aus dem umliegenden Text zu geben. By the way: Auch die Nähe zum umliegenden Text ist für das SEO wichtig. Je kleiner der Abstand zwischen Bild und dem umliegenden Text mit Keyword ist, desto eher wird das Bild von Google berücksichtigt.

Um im obigen Beispiel zu bleiben: Nehmen wir an, es geht auf einer Website um das Atelier einer Schneiderin, Im Text soll die Arbeit der Schneiderin geschildert werden. In dem Zusammenhang bietet sich ein Foto an, das die Schneiderin vielleicht beim Maßnehmen zeigt. In dem Fall sind die Keywords sinnvoll, die im Dateinamen enthalten sind. Also hier: schneiderin-mueller-nimmt-mass.jpg

Ich sehe den Dateinamen vor allem für mich wichtig. Wenn ich nämlich auf meinem Desktop ein bestimmtes Bild suche, brauche ich nur ein Schlagwort eingeben. Eine Bezeichnung wie img-2537.jpg hilft mir wenig, das Selfie vom letzten Waldspaziergang zu finden.

Fehler 6:

Ohne Alt-Text wirkt das Bild verloren

Dieser Punkt gehört nicht mehr zu den Vorbereitungen, denn du kannst ihn erst umsetzen, wenn du das Bild in WordPress hochgeladen hast. Erst in der Mediathek von WordPress vergibst du dem Bild einen Alt-Text.

Der Alttext ist aus 2 Gründen wichtig: Zum einen kann das Bild so von blinden Menschen gelesen werden. Der Screenreader liest den Alt-Text vor – und der Mensch hört so, was sich auf dem Bild befindet.

Der andere Grund ist: Der Alt-Text in Verbindung mit dem umliegenden Text deiner Website und einem Keyword im Text und im Alt-Text liefert einen kleinen Schub in Richtung SEO.

Diese Bildbreiten und Dateigrößen sind optimal für deine Website

Website-Bilder optimieren: Tools, mit denen du deine Bilder für die Website bearbeitest

Bildoptimierung per App

Es gibt unterschiedlich Möglichkeiten, Bilder zu beareiten: Online oder mit einer App.

Ich arbeite mit dem Programm Photoshop von Adobe. Damit kann ich alle Fliegen mit einer Klappe schlagen:

• das Bild zuschneiden,
• die Pixelzahl reduzieren,
• die Dateigröße reduzieren (komprimieren)
• als JPG oder PNG abspeichern und schließlich
• den richtigen Dateinamen vergeben.

Zugegeben, die wengsten Laien arbeiten mit Photoshop, denn es ist ein teures Profiprogramm. Aber das ist auch nicht nötig, denn es gibt andere Programme:

• Gimp – das ist soweit ich weiß sogar kostenlos
• Grafic Converter – ein sehr gutes Programm, mit dem ich gelegentlich arbeite. Das gibt es allerdings nur für Apple-Geräte
• Affinity Photo

Daneben gibt es jede Menge Apps für das Smartphone. Dies erwähne ich nur der Vollständigkeit halber, denn das Bearbeiten von Bildern auf dem Handy finde ich sehr mühsam – kann aber für dich eine Alternative sein.

Bildoptimierung per Online-Tool

Gute Möglichkeiten der Bildbearbeitung sind einige Online-Tools.

Das meiner Meinung nach beste Online-Tool heißt iLoveIMG. Ich hab’s selbst ausprobiert:

• Ausschneiden,
• Pixel reduzieren,
• Dateigröße verringern,
• in jpg oder webp konvertieren,
• Bild drehen –

fast alles ist möglich. Du kannst das Bild sogar mit Text versehen – etwa als Wasserzeichen oder als kleine Botschaft.

Tipp: Mit diesen Plugins optimierst du die Bilder für WordPress während des Uploads

Wie oben erwähnt kannst du alle Arbeiten zur Bildoptimierung vor dem Upload auf dem Desktop oder dem Handy machen.

Aber WordPress wäre nicht WordPress, wenn es nicht auch dafür ein Plugin gäbe. Mit dem richtigen Plugin kannst du während des Hochladens die Bilder zuschneiden, auf das richtige Pixelmaß bringen, die Dateigröße optimieren und einen Dateinamen vergeben. Alles in einem Aufwisch. Dafür eignet sich

Shortpixel Optimizer – automatische Bildoptimierung

Bonus: So behältst du die Übersicht über deine Bilder – meine 3 besten Tipps.

Website-Bilder optimieren: Mit Ordnung geht’s los

Ordnung auf dem PC:

Ordnung? Was hat das mit Bildoptimierung zu tun? Naja, erstmal nichts. Ordnung hilft dir aber, immer sofort die richtigen Bilder zu finden. Das spart Zeit und Nerven.

Damit kein Bilderwust und Kuddelmuddel entsteht, finde ich es innvoll, eine gute Ordnerstruktur für deine Bilder schon auf dem PC anzulegen. Ich sortiere meine Bilder für die Website zum Beispiel nach Einsatz:

• für den Header,
• für Beiträge,
• für Anleitungen,
• private Fotos,
• Selfies usw.

Sinnvoll kann auch die Sortierung nach Pixelgröße sein.

Wenn man möchte, kann man noch Unterordner erstellen, um die Bilder z.B. nach Ausrichtung zu sortieren (Hochformat, Querformat). Was auch immer du für Ordner anlegst: Eine gute Struktur ist die halbe Miete.

Für die Verwaltung von Bildern gibt es natürlich auch Tools, wie Photoshop Lightroom von Adobe.

Ordnung in der Mediathek von WordPress

WordPress bietet leider keine Bildverwaltung. Die Mediathek in WordPress ist meiner Meinung nach ziemlich grottig. Es gibt nur zwei Möglichkeiten der „Ordnung“: Entweder man ordnet per Voreinstellung die Bilder nach Monaten (sie werden dann in monatsbasierten Ordnern im System abgelegt). Oder man läd alle Bilder zusammen in der Mediathek. So oder so wird man sich schon nach kurzer Zeit einen Wolf suchen, wenn man ein konkretes Bild finden möchte.

Deshalb empfehle ich Plugins, die dir das Auffinden von Bildern erleichtert. Es gibt Plugins, die die Bilder innerhalb von WordPress ordnen. So kann man die Bilder nach unterschiedlichen Themen sortieren und behält den Überblick.

Ein gutes Plugin zur Bilderverwaltung in WordPress ist:
Real Media Library

Und falls deine Mediathek bereits ein gewisses Maß an Unordnung erreicht hat, gibts auch dafür Plugins:
Enable Media Replace

Damit kannst du Bilder ersetzen und alte löschen, ungenutzte Bilder finden und löschen und vieles mehr.