Bilder optimieren für WordPress – wie du in 5 Schritten die Bilder für deine Website verkleinerst.

Wieso eigentlich WordPress? Egal, wie und womit du deine Website machst: Wir möchten auf unserer Website schöne Bilder haben. Bilder sagen mehr als 1.000 Worte. Ohne Fotos wirkt deine Website nackt, sie ist eine öde Textwüste.

Alles schön und gut: Aber wird mit vielen Bildern nicht die Website unnötig schwer und langsam? Und was ist mit der Suchmaschinenoptimierung?

Stimmt. Damit du die richtigen Entscheidungen triffst und weißt, was du vor dem Hochladen deiner Bilder wissen musst, zeige ich dir hier die wichtigsten Faktoren für die Bildbearbeitung:

• Die Bildgröße – wieviel Pixel darf eine Bildseite haben?
• Die Dateigröße – wieviel KB darf das Bild haben?
• Der Dateiname – muss ein Keyword enthalten sein?
• Das Bildformat – jpg, png oder doch gif?

Warum ist es so wichtig, Bilder für WordPress zu optimieren?

Bilder verkürzen die Ladezeit deiner Website

Je mehr Bilder auf deiner Seite sind, desto größer wird die Datenmenge deiner Seiten. Und das führt dazu, dass deine Seite eine lange Ladezeit hat. Das ist besonders doof für die Besucher deiner Website, die mit dem Handy im Internet sind. Und weil 80 Prozent aller Internetnutzer mit dem Smartphone online sind, kommst du an diesem Punkt nicht vorbei.

Die kurze Ladezeit ist nicht nur ein netter Service für deine Besucher. Google findet schnelle Website genauso klasse. Nicht nur das: Langsame Websites wertet Google ab und deine Website erhält ein schlechtes Ranking. Anders gesagt: Wenn du daran interessiert bist, dass du auf Google irgendwo auf Seite 1 bist, dann solltest du eine möglichst schnelle Website haben.

Dein Bild sollte „lesbar“ sein

Dieser Punkt ist wichtiger, als du denkst. Aus zwei Gründen:
Blinde Menschen können deine Bilder nicht erkennen. Aber sie können sich von einem Screenreader den Inhalt der Bilder vorlesen lassen, wenn du sie richtig beschreibst.

Der andere Grund:
Der Bot von Google kann nur das lesen, was als Text irgendwo auf einer Website steht. Trotz aller künstlichen Intelligenz: Den Inhalt von Bildern kann Google nur begrenzt erkennen. Aber Google kann sehr gut den Dateinamen und den sogenannten Alt-Text lesen, der im Quellcode jeder Webseite lesbar ist.

Zusammenfassung:

• Mit optimierten Bilder verkürzt du die Ladezeit der Website
• Dein Bild soll von Menschen und von Google gefunden werden.

Schritt 1: Verkleinere das Bild auf die richtigen Pixelmaße

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 Pixelzahl ist abhängig vom Einsatzort auf deiner Website. Wenn du nur ein kleines Begleitbild zum Text brauchst, reichen 300 bis 600 Pixel in der Breite. Anders Bilder für dein Herobild. Herobilder oder auch Headerbilder sind die Fotos, die man am Kopf vieler Webseiten sieht und die über die ganze Breite des Displays laufen. Die sollten mindestens 1.920 Pixel breit sein, damit das Bild auf großen Monitoren nicht unscharf (pixelig) wird.

Schritt 2: Verringere die 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.

Schritt 3: Wähle das richtige Dateiformat

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.

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. Da dein Foto normalerweise ein rechteckiges Motiv ist, siehst du den Hintergrund nicht. Das siehst du erst, wenn du das Motiv ausschneidest. Beim Freistellern 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 abspeicherst, 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 abgespeichert, 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 Werbebanner. 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 (hier kannst du mehr lesen über Raster- und Vektorformate).

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

Zusammenfassung: Welche Formate setzt du wann ein?

• Deine Fotos speicherst du als JPG oder WebP ab.
• Bilder mit Transparenzen speicherst du als PNG ab.
• 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.

Schritt 4: Gib dem Bild den richtigen 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:

Schneider 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:

schneider-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.

Der richtige Dateiname ist auch für Google wichtig

Der richtige Dateiname hat 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, 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.

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.

Schritt 5: Nach dem Upload: Gib dem Bild einen Alt-Text.

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

So wählst du die richtige Pixel-Breite

Oben hab ich‘s schon erwähnt: 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 von der Layoutgröße deiner Seiten ab.

Was ist die Layoutgröße?

Die Layoutgröße ist die Breite deiner Website. Genauer: Die Breite, innerhalb derer deine Inhalte wie Texte und Bilder dargestellt werden. Und diese Breite kannst du einstellen. Wo? In WordPress bzw. im Theme deiner WordPress-Installation stellst du das Layout ein.

Bei mir beträgt die Breite des Layouts 1.120 Pixel. Die weiße Fläche, auf der dieser Text steht, den du gerade liest, ist 1.120 Pixel breit.

Wie komme ich jetzt zur Bildbreite?

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.

So einfach ist das 😉

Das Headerbild

Das Headerbild ist das breite Bild (auch Herobild genannt), das über die gesamte Displaybreite geht.

Hier im Beispiel die Website von Carmen Putschky. 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.

Tipp: Mit diesen Tools optimierst du deine Bilder vor dem Upload.

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

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 konvertieren,
Bild drehen –

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

Und hier der Link zu iLoveimg:

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.

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.

Constanze Straub

Constanze Straub ist Webdesignerin und Expertin für visuelle Kommunikation. Seit 2 Jahren zeigt sie BeraterInnen und Kreativen, wie sie ihre Website erfolgreich selber machen. Wenn Constanze Straub nicht am Mac sitzt oder an der Staffelei steht, heizt sie mit dem Fahrrad durch die Natur oder schmeißt silbergraue Stahlkugeln auf den Boulebahnen in und um Lüneburg.