Du hast ein passendes Bild für Deine Webseite gefunden oder selbst fotografiert und möchtest es jetzt in WordPress hochladen. Genau an dieser Stelle passiert häufig ein Fehler: Das Bild wird direkt vom Smartphone, von der Kamera oder aus einer Bilddatenbank in die Mediathek geladen.
Technisch funktioniert das. Sinnvoll ist es aber nicht immer.
Ein Foto kann mehrere Tausend Pixel breit und mehrere Megabyte groß sein, obwohl es auf Deiner Webseite vielleicht nur in einem Inhaltsbereich angezeigt wird. Dadurch überträgst Du mehr Daten als nötig. Gleichzeitig stellen sich weitere Fragen:
➡️ Solltest Du JPG, PNG oder WebP verwenden?
➡️ Wie stark darfst Du ein Bild komprimieren?
➡️ Was gehört in den Dateinamen?
➡️ Wann braucht ein Bild überhaupt einen Alt-Text?
In diesem Artikel zeige ich Dir einen einfachen Ablauf, mit dem Du Bilder für Deine Webseite optimieren kannst, bevor Du sie in WordPress verwendest. Dafür brauchst Du kein kostenpflichtiges Bildbearbeitungsprogramm und kein Premium-Plugin. Wir arbeiten mit kostenlosen Möglichkeiten und mit Funktionen, die WordPress bereits mitbringt.
Wenn Du noch gar kein passendes Bild hast, lies zuerst meinen Artikel https://bigbiggerbusiness.de/kostenlose-bilder-webseite/. Dort geht es darum, wo Du Bilder findest, worauf Du bei Nutzungsrechten achten solltest und wie Du passende Motive auswählst.
Warum solltest Du Bilder vor dem Hochladen optimieren?
Bilder gehören häufig zu den größten Dateien einer Webseite. Ein hochauflösendes Foto von einer Kamera oder einem modernen Smartphone enthält wesentlich mehr Bildinformationen, als für viele Darstellungen im Browser nötig sind.
Stell Dir vor, Dein Foto ist 6000 Pixel breit. Auf Deiner Webseite wird es in einem Bereich dargestellt, der auf einem normalen Bildschirm deutlich schmaler ist. Dann muss der Browser unter Umständen eine sehr große Datei laden, obwohl nur ein Teil dieser Auflösung tatsächlich gebraucht wird. Das kann unnötig Datenvolumen verbrauchen und die Ladezeit erhöhen. Google weist ebenfalls darauf hin, dass Bilder häufig einen großen Anteil an der Seitengröße haben und empfiehlt, Qualität und Ladegeschwindigkeit gemeinsam zu berücksichtigen.
Optimierung bedeutet deshalb nicht:
„Mach jedes Bild so klein wie möglich.“
Das Ziel lautet vielmehr:
“Das Bild soll für seinen Einsatzzweck groß genug und optisch sauber sein, aber nicht unnötig viele Daten übertragen.”
Dafür schauen wir uns vier Dinge an:
➡️ die Abmessungen in Pixeln
➡️ das Dateiformat
➡️ die Dateigröße beziehungsweise Kompression
➡️ die Informationen rund um das Bild, insbesondere Dateiname und Alt-Text
Wichtig: Pixelgröße und Dateigröße sind nicht dasselbe
Bevor wir ein Bild bearbeiten, müssen wir zwei Begriffe auseinanderhalten. Sie werden gerade von Anfängern schnell verwechselt.
Die Bildabmessung beschreibt, wie viele Pixel ein Bild breit und hoch ist. Ein Bild kann zum Beispiel 1920 × 1080 Pixel oder 1200 × 675 Pixel groß sein.
Die Dateigröße beschreibt dagegen, wie viel Speicherplatz die Datei benötigt. Sie wird beispielsweise in Kilobyte (KB) oder Megabyte (MB) angegeben.
Ein Bild mit 1200 × 675 Pixeln kann je nach Dateiformat, Bildinhalt und Kompression sehr unterschiedlich groß sein. Deshalb reicht es nicht, nur auf die Pixelzahl oder nur auf die KB-Zahl zu schauen. Du optimierst im Idealfall beides: zuerst die Abmessungen passend zum Einsatzzweck und anschließend die Dateigröße durch ein geeignetes Format und eine vernünftige Kompression.
Schritt 1: Überlege zuerst, wo das Bild eingesetzt wird
Es gibt nicht die eine perfekte Bildgröße für jede Stelle Deiner Webseite. Ein kleines Bild in einem Blogbeitrag hat andere Anforderungen als ein großflächiges Headerbild. Deshalb solltest Du nicht mit einer pauschalen Regel wie „Jedes Webseitenbild muss 1200 Pixel breit sein“ arbeiten.
Frage Dich stattdessen:
➡️ Wo wird das Bild angezeigt?
➡️ Wie groß erscheint es dort ungefähr?
➡️ Muss es auf großen Bildschirmen über die gesamte Breite gehen?
➡️ Wird es nur als kleines Vorschaubild verwendet?
➡️ Wird das Bild auf dem Smartphone anders zugeschnitten?
Ein Hero- oder Headerbild darf in der Regel größer vorbereitet werden als ein kleines Bild, das neben einem Text steht. Ein Thumbnail wiederum braucht keine Abmessungen wie ein vollflächiges Hintergrundbild. Für den Anfang ist eine einfache Regel hilfreicher als starre Zahlen:
Bereite ein Bild ungefähr für die Größe vor, in der Du es tatsächlich brauchst, und plane etwas Reserve für scharfe Darstellungen ein. Lade nicht automatisch das größtmögliche Original hoch. WordPress kann beim Upload verschiedene Bildgrößen erzeugen und moderne Webseiten können dem Browser unterschiedliche Varianten eines Bildes anbieten. Das ist sinnvoll. Es ändert aber nichts daran, dass Du nicht jede unbearbeitete 10- oder 20-Megabyte-Originaldatei in Deine Mediathek legen musst.
Beispiel: Du möchtest ein Foto auf Deiner Startseite verwenden
Du hast ein Foto mit Deinem Smartphone aufgenommen. Die Datei ist 4032 × 3024 Pixel groß und hat 4,6 MB. Auf Deiner Startseite soll das Foto neben einem Text stehen und ungefähr die Hälfte des Inhaltsbereichs einnehmen. Dafür brauchst Du keine 4032 Pixel Breite. Du könntest das Bild z.B. zunächst auf 800 bis 1200 Pixel Breite verkleinern. Anschließend komprimierst Du es mit Squoosh und prüfst die Qualität.
Hat das fertige Bild beispielsweise 150 KB und sieht weiterhin scharf und sauber aus, hast Du bereits ein gutes Ergebnis. Du musst nicht versuchen, es zwanghaft noch kleiner zu bekommen.
Merke Dir
Ein normales Bild auf Deiner Webseite muss nicht mehrere Megabyte groß sein. Für viele Bilder innerhalb einer Seite sind etwa 100 bis 200 KB ein guter Orientierungsbereich. Große Bilder dürfen mehr benötigen. Entscheidend ist immer, wie groß das Bild tatsächlich auf Deiner Webseite angezeigt wird und ob die Qualität nach der Kompression noch stimmt.
Schritt 2: JPG, PNG oder WebP: Welches Format brauchst Du?
Das Dateiformat beeinflusst sowohl die Qualität als auch die Dateigröße. Für normale Webseiten musst Du nicht jedes verfügbare Bildformat kennen. Für den Alltag reichen zunächst drei Formate: JPG bzw. JPEG, PNG und WebP.
JPG/JPEG
JPG eignet sich besonders für Fotos und Bilder mit vielen Farbverläufen. Durch die verlustbehaftete Kompression können Dateien deutlich kleiner werden. Wird allerdings zu stark komprimiert, entstehen sichtbare Artefakte und Details gehen verloren.
PNG
PNG ist besonders dann sinnvoll, wenn Du Transparenz benötigst oder eine Grafik bestimmte scharfe Kanten erhalten soll. Für große Fotos kann PNG dagegen unnötig große Dateien erzeugen.
WebP
WebP ist ein modernes Bildformat und kann bei guter visueller Qualität kleinere Dateien ermöglichen. Es wird von modernen Browsern breit unterstützt und eignet sich sowohl für Fotos als auch für verschiedene Grafiken. Für viele normale Webseitenfotos ist WebP deshalb eine gute Wahl. Trotzdem gilt: WebP ist kein Selbstzweck. Ein sauber optimiertes JPG kann ebenfalls vollkommen in Ordnung sein.
Eine einfache Entscheidungshilfe:
Entscheidend ist nicht, dass Du zwanghaft jedes Bild in dasselbe Format umwandelst. Entscheidend ist das Verhältnis aus Qualität, Funktion und Dateigröße.
Schritt 3: Bilder kostenlos verkleinern und komprimieren
Du brauchst für die grundlegende Bildoptimierung kein Photoshop und auch kein kostenpflichtiges WordPress-Plugin. Eine kostenlose Möglichkeit ist Squoosh unter https://squoosh.app/.
Squoosh läuft im Browser und verarbeitet die Bilder nach Angaben des Anbieters lokal auf Deinem Gerät. Du kannst damit unter anderem die Bildabmessungen verändern, verschiedene Ausgabeformate testen und die Kompression einstellen.
So gehst Du vor:
- Öffne Squoosh.
- Ziehe Dein Bild in das Browserfenster oder wähle die Datei aus.
- Prüfe zunächst die ursprünglichen Abmessungen und die Dateigröße.
- Aktiviere bei Bedarf die Größenänderung und passe die Breite beziehungsweise Höhe an.
- Wähle auf der Ausgabeseite ein passendes Format, zum Beispiel WebP.
- Passe die Qualitätsstufe an.
- Vergleiche das Original mit der optimierten Version.
- Achte besonders auf Gesichter, Schrift, feine Linien und kontrastreiche Kanten.
- Speichere die optimierte Datei erst, wenn die Qualität für Deinen Einsatzzweck sauber aussieht.
Das Praktische daran: Du kannst direkt sehen, wie sich Deine Einstellungen auf das Bild auswirken und genau das ist wichtiger als eine pauschale Zahl.
Wie klein sollte Deine Bilddatei werden?
Wenn Du gerade erst anfängst, helfen Dir konkrete Richtwerte mehr als die Aussage „komprimiere das Bild so stark wie möglich“.
Kompression bedeutet nicht automatisch schlechte Qualität Bei der Kompression werden Bilddaten so gespeichert, dass die Datei weniger Platz benötigt. Bei verlustbehafteten Verfahren können dabei Bildinformationen entfernt werden. Das klingt zunächst negativ. In der Praxis ist eine moderate Kompression für Webseiten aber vollkommen normal. Die Kunst besteht darin, den Punkt zu finden, an dem die Datei kleiner wird, der Unterschied für den Betrachter aber kaum oder gar nicht auffällt.
Schritt 4: Vergib einen verständlichen Dateinamen
Bevor Du das Bild in WordPress hochlädst, solltest Du den Dateinamen prüfen. Dateien direkt aus Kameras oder Smartphones heißen häufig z.B.:
IMG_4837.jpg
DSC_1024.jpg
Solche Namen helfen weder Dir bei der späteren Organisation noch geben sie einen sinnvollen Hinweis auf den Bildinhalt. Ich empfehle Dir kurze, beschreibende Dateinamen und nutze Dateinamen als einen leichten Hinweis auf das Thema eines Bildes. Ein sinnvoller Dateiname könnte beispielsweise lauten:
wordpress-einstellungen-dashboard.webp
oder:
bilder-webseite-komprimieren.webp
Der Dateiname sollte beschreiben, was auf dem Bild zu sehen ist bzw. wofür es steht. Er muss nicht zu einem künstlichen SEO-Satz werden. Vermeide deshalb Dateinamen wie:
bilder-webseite-optimieren-bilder-webseite-seo-webdesign-wordpress.webp
Das bringt Deinem Besucher nichts und wirkt auch aus SEO-Sicht nicht sinnvoll. Praktisch sind kurze Begriffe, Kleinbuchstaben und Bindestriche zwischen den Wörtern. Umlaute und unnötige Sonderzeichen würde ich im Dateinamen vermeiden.
Schritt 5: Lade das optimierte Bild in WordPress hoch
Erst jetzt kommt das Bild in Deine WordPress-Mediathek. Wenn Du mit WordPress arbeitest, kannst Du die vorbereitete Datei über „Medien“ beziehungsweise direkt beim Bearbeiten Deiner Seite hochladen. Nach dem Upload solltest Du nicht sofort zum nächsten Schritt springen. Kontrolliere das Bild dort noch einmal:
➡️ Ist die richtige Datei hochgeladen?
➡️ Ist die Darstellung scharf?
➡️ Passt der Ausschnitt?
➡️ Funktioniert das Bild auf Desktop, Tablet und Smartphone?
➡️ Wird Text über dem Bild noch gut lesbar dargestellt?
➡️ Ist das Bild wirklich an der Stelle nötig?
Gerade der letzte Punkt wird häufig vergessen. Ein optimiertes Bild ist technisch besser als ein riesiges Original. Ein unnötiges Bild bleibt aber trotzdem ein unnötiges Bild.
Schritt 6: Alt-Text richtig verstehen
Beim Alt-Text entsteht besonders viel Verwirrung, weil Barrierefreiheit und SEO häufig miteinander vermischt werden. Ein Alt-Text ist in erster Linie eine Textalternative für ein Bild. Er soll relevante Informationen oder die Funktion vermitteln, wenn ein Mensch das Bild nicht sehen kann.
Die W3C Web Accessibility Initiative unterscheidet unter anderem zwischen informativen, dekorativen und funktionalen Bildern. Der passende Alt-Text hängt deshalb nicht nur davon ab, was auf dem Bild zu sehen ist, sondern davon, welche Aufgabe das Bild im konkreten Zusammenhang erfüllt. Das ist wichtig.
Ein Alt-Text ist nicht einfach eine Bildunterschrift, ebenso auch kein Platz für eine Liste Deiner Keywords und auch nicht jedes Bild braucht einen ausgeschriebenen beschreibenden Alt-Text.
Informative Bilder
Wenn ein Bild Informationen vermittelt, die für das Verständnis relevant sind, sollte der Alt-Text diese Information kurz und sinnvoll wiedergeben.
Beispiel:
Du hast auf Deiner Webseite ein Bild, das die verschiedenen Größen Deiner handgefertigten Kerzen nebeneinander zeigt. Die Größenunterschiede sind für den Kunden wichtig.
Wenig hilfreich:
„Kerzen“
Besser:
„Drei handgefertigte Kerzen in unterschiedlichen Größen“
Noch hilfreicher, wenn die Größen für die Auswahl wichtig sind:
„Drei handgefertigte Kerzen mit 10, 15 und 20 cm Höhe“
Der entscheidende Punkt ist: Der Alt-Text richtet sich danach, welche Information das Bild im jeweiligen Zusammenhang vermittelt. Wenn die unterschiedlichen Größen für den Inhalt wichtig sind, sollten sie auch im Alt-Text vorkommen. Sind die Kerzen dagegen nur ein dekoratives Stimmungsbild, wäre diese ausführliche Beschreibung unnötig.
Dekorative Bilder
Ein Bild kann ausschließlich zur Gestaltung dienen, ohne zusätzliche Information zu vermitteln. In diesem Fall empfiehlt W3C einen leeren Alt-Wert, also technisch alt="". Dadurch können unterstützende Technologien das dekorative Bild ignorieren. Das ist etwas anderes als ein fehlendes Alt-Attribut. In WordPress bzw. in Deinem Page Builder musst Du deshalb prüfen, wie ein dekoratives Bild technisch ausgegeben wird. Nur das Eingabefeld leer zu lassen, führt je nach Umsetzung nicht automatisch in jeder Situation zum gewünschten HTML-Ergebnis.
Funktionale Bilder
Wenn ein Bild selbst eine Funktion hat, z.B. als Link oder Schaltfläche, sollte die Textalternative die Funktion bzw. das Ziel vermitteln und nicht nur das Aussehen des Bildes beschreiben. Ein verlinktes Logo, das zur Startseite führt, braucht z.B. eine sinnvolle zugängliche Bezeichnung für dieses Ziel. Das ist ein anderer Fall als ein rein dekoratives Foto.
Schreibe den Alt-Text für Menschen, nicht für eine Keyword-Dichte.
Google verwendet Alt-Texte zusätzlich, um den Bildinhalt im Zusammenhang mit der Seite besser zu verstehen. Das bedeutet aber nicht, dass Du Dein Hauptkeyword in jeden Alt-Text einbauen solltest. Verwende im Alt-Text nicht unnötig viele Suchbegriffe. Wenn Du z.B. immer wieder Begriffe wie „Massage“, „Ayurveda“, „Entspannung“ und „Massage Stuttgart“ einfügst, obwohl sie das Bild gar nicht beschreiben, hilft das weder dem Nutzer noch ist es für die Suchmaschinenoptimierung sinnvoll.
Dein wichtigstes Suchwort darf natürlich im Alt-Text vorkommen, wenn es tatsächlich zum Bild und zum Inhalt passt. Du solltest es aber nicht künstlich einbauen.
Die bessere Frage lautet:
Welche Information würde fehlen, wenn dieses Bild nicht sichtbar wäre?
Wenn die Antwort lautet „keine“, weil das Bild nur dekorativ ist, braucht es keinen beschreibenden Alt-Text. Wenn eine Information fehlen würde, beschreibst Du genau diese Information so kurz wie möglich und so ausführlich wie nötig.
Beispiel:
Auf der Webseite eines Cafés wird mit einem Foto gezeigt, dass Gäste auch draußen im Innenhof sitzen können. Diese Information wird im dazugehörigen Text nicht erwähnt.
Möglich:
„Außenbereich des Cafés mit Sitzplätzen im Innenhof“
Nicht sinnvoll:
„Café gemütlich Kaffee trinken bestes Café Außenbereich Terrasse“
Der zweite Text beschreibt nicht sinnvoll, welche Information das Bild vermittelt. Stattdessen werden verschiedene Suchbegriffe aneinandergereiht.
Weiteres Beispiel:
Du hast neben einem Absatz ein Foto von einem Schreibtisch mit Laptop und Kaffeetasse. Es vermittelt keine zusätzliche Information, sondern lockert nur das Layout auf. Dann kann das Bild dekorativ sein. In diesem Fall ist ein leerer Alt-Wert sinnvoller als „Laptop mit Kaffeetasse auf Schreibtisch“, wenn diese Beschreibung für den Inhalt überhaupt keine Bedeutung hat.
Alt-Text und Dateiname erfüllen nicht dieselbe Aufgabe. Auch diese beiden Dinge solltest Du nicht verwechseln. Der Dateiname hilft unter anderem bei Deiner Organisation und kann Suchmaschinen einen kleinen Hinweis auf das Bildthema geben. Der Alt-Text beschreibt dagegen die relevante Information oder Funktion des Bildes im jeweiligen Kontext. Deshalb müssen Dateiname und Alt-Text nicht identisch sein.
Beispiel:
Dateiname: ferienwohnung-wohnzimmer.webp
Alt-Text: „Wohnzimmer der Ferienwohnung mit Schlafsofa und Zugang zum Balkon“
Der Dateiname benennt das Bild allgemein und sorgt dafür, dass Du die Datei später leichter zuordnen kannst. Der Alt-Text beschreibt genauer, welche Information das Bild an dieser Stelle der Webseite vermittelt. Beide Angaben sind sinnvoll, erfüllen aber unterschiedliche Aufgaben.
Was ist mit Titel und Bildunterschrift in WordPress?
Beim Hochladen eines Bildes zeigt WordPress mehrere Felder. Das führt schnell dazu, dass Anfänger glauben, jedes Feld müsse ausgefüllt werden.
Das ist nicht nötig.
Alt-Text: Wird nach Funktion und Kontext des Bildes vergeben.
Bildunterschrift: Ist sichtbarer Text unter einem Bild. Nutze sie, wenn der Leser eine zusätzliche Erklärung, Quelle oder Einordnung direkt am Bild benötigt.
Titel: WordPress kann einen Medientitel führen. Er ersetzt den Alt-Text nicht und muss nicht zwanghaft mit SEO-Begriffen gefüllt werden.
Beschreibung: Kann in bestimmten WordPress-Kontexten genutzt werden, ist aber für ein normales Bild im Blogbeitrag nicht automatisch erforderlich.
Fülle also nicht jedes Feld aus, nur weil es vorhanden ist.
Typische Fehler beim Optimieren von Webseitenbildern
Fehler 1: Das Original wird direkt hochgeladen
Ein Smartphonefoto kann mehrere Tausend Pixel breit und mehrere Megabyte groß sein. Wenn Du es unverändert in WordPress hochlädst, obwohl es auf Deiner Webseite viel kleiner dargestellt wird, schleppst Du unnötig viele Bilddaten mit. Bewahre deshalb das Original separat auf und erstelle eine Kopie für Deine Webseite. Diese kannst Du passend zum Einsatzzweck verkleinern und anschließend komprimieren. So bleibt Dir das hochauflösende Original erhalten und auf Deiner Webseite verwendest Du nur die Größe, die Du tatsächlich benötigst.
Fehler 2: Es wird nur auf die KB-Zahl geschaut
Die Dateigröße ist wichtig, sollte aber nicht Dein einziges Ziel sein. Wenn Du ein Bild immer weiter komprimierst, nur um z.B. unbedingt unter 100 KB zu kommen, kann die Qualität sichtbar leiden. Nutze die Richtwerte aus diesem Artikel deshalb als Orientierung und nicht als feste Grenze. Schau Dir immer gemeinsam die Abmessungen, das Dateiformat, die Dateigröße und die sichtbare Qualität an. Wenn ein Bild mit 150 KB deutlich besser aussieht als mit 90 KB, musst Du es nicht auf Biegen und Brechen weiter verkleinern.
Fehler 3: PNG wird für jedes Bild verwendet
PNG ist nicht automatisch das beste Format, nur weil die Bildqualität gut ist. Gerade bei Fotos können PNG-Dateien deutlich größer werden als nötig. Überlege deshalb, um welche Art von Bild es sich handelt. Für ein normales Foto eignen sich beispielsweise JPG oder WebP häufig besser. PNG ist vor allem dann interessant, wenn Du Transparenz benötigst.
Fehler 4: WebP wird als Pflicht betrachtet
WebP kann Dir dabei helfen, die Dateigröße zu reduzieren und gleichzeitig eine gute Bildqualität zu erhalten. Trotzdem ist ein Bild nicht automatisch optimal vorbereitet, nur weil die Datei auf .webp endet. Auch ein WebP-Bild kann unnötig große Abmessungen oder eine hohe Dateigröße haben. Kontrolliere deshalb auch hier die Pixelmaße, die Kompression und die sichtbare Qualität.
Fehler 5: Jedes Bild bekommt einen Alt-Text für Suchmaschinen
Ein Alt-Text sollte nicht mit möglichst vielen Suchbegriffen gefüllt werden. Seine wichtigste Aufgabe besteht darin, die relevante Information oder Funktion eines Bildes zu vermitteln, wenn das Bild nicht gesehen werden kann. Überlege deshalb zuerst, welche Aufgabe das Bild an dieser Stelle Deiner Webseite hat. Ist eine Information wichtig, beschreibst Du diese verständlich im Alt-Text. Ist das Bild ausschließlich dekorativ, benötigt es keinen beschreibenden Alt-Text.
Fehler 6: Dateiname und Alt-Text werden gleichgesetzt
Dateiname und Alt-Text erfüllen unterschiedliche Aufgaben. Deshalb solltest Du nicht einfach Deinen Dateinamen kopieren und in das Feld für den Alt-Text einfügen. Der Dateiname beschreibt das Bild eher allgemein und hilft Dir auch bei der Organisation Deiner Dateien. Beim Alt-Text kommt dagegen der Zusammenhang hinzu: Welche relevante Information vermittelt genau dieses Bild an dieser Stelle Deiner Webseite?
Fehler 7: Die mobile Darstellung wird vergessen
Auf Deinem Computer kann ein Bild perfekt aussehen und auf dem Smartphone plötzlich ganz anders wirken. Je nach Darstellung wird das Motiv möglicherweise zugeschnitten, eine wichtige Person verschwindet teilweise aus dem Bild oder darüberliegender Text ist schlecht lesbar. Kontrolliere Deine fertige Seite deshalb nicht nur am Computer. Schau Dir auch die Darstellung auf Tablet und Smartphone an und prüfe, ob das Motiv weiterhin so zu sehen ist, wie Du es geplant hast.
Fehler 8: Für die Grundoptimierung wird sofort ein kostenpflichtiges Tool gekauft
Für die grundlegende Optimierung Deiner Bilder musst Du nicht sofort Photoshop kaufen oder ein kostenpflichtiges WordPress-Plugin installieren. Für den Anfang reichen kostenlose Möglichkeiten aus. Mit Squoosh kannst Du beispielsweise Bilder verkleinern, komprimieren und in ein anderes Format umwandeln. Erst wenn Du später sehr viele Bilder regelmäßig bearbeiten musst, kann sich ein kostenpflichtiges Werkzeug oder eine automatische Lösung lohnen.
Checkliste: Ist Dein Bild bereit für die Webseite?
- Habe ich das hochauflösende Original separat gespeichert?
- Weiß ich, wo und in welcher Größe das Bild auf meiner Webseite eingesetzt wird?
- Sind die Pixelabmessungen für diesen Einsatzzweck sinnvoll?
- Habe ich ein geeignetes Format gewählt?
- Ist die Datei komprimiert, ohne sichtbar schlechte Qualität?
- Hat die Datei einen kurzen und verständlichen Namen?
- Habe ich entschieden, ob das Bild informativ, funktional oder dekorativ ist?
- Ist der Alt-Text sinnvoll formuliert, falls einer benötigt wird?
- Habe ich keine Keywords künstlich in den Alt-Text gestopft?
- Sieht das Bild auf Desktop, Tablet und Smartphone gut aus?
Wenn Du diese Punkte beantworten kannst, bist Du für die meisten normalen Bilder auf einer selbst aufgebauten Webseite bereits sehr gut vorbereitet.
Häufig gestellte Fragen
Wie groß sollte ein Bild für eine Webseite sein?
Es gibt keine einzige Pixelgröße, die für jedes Bild richtig ist. Die benötigten Abmessungen hängen davon ab, wie groß das Bild tatsächlich dargestellt wird. Ein kleines Vorschaubild braucht weniger Pixel als ein großflächiges Headerbild. Bereite das Bild für seinen konkreten Einsatzzweck vor und vermeide unnötig große Originaldateien.
Wie viele KB darf ein Webseitenbild haben?
Auch dafür gibt es keine universelle Grenze. Ein kleines Bild kann sehr klein sein, während ein großes detailreiches Foto mehr Daten benötigt. Entscheidend ist, unnötige Pixel zu vermeiden, ein geeignetes Format zu wählen und anschließend so zu komprimieren, dass die Qualität für die Darstellung erhalten bleibt.
Ist WebP immer besser als JPG?
Nicht automatisch. WebP kann häufig kleinere Dateien bei guter Qualität liefern und ist für viele Webseitenbilder eine gute Wahl. Ein gut optimiertes JPG kann aber ebenfalls sinnvoll sein. Vergleiche Dateigröße und sichtbare Qualität, statt nur nach der Dateiendung zu entscheiden.
Brauche ich für jedes Bild einen Alt-Text?
Nein. Ob ein Bild einen beschreibenden Alt-Text braucht, hängt von seiner Funktion ab. Informative Bilder benötigen eine sinnvolle Textalternative. Rein dekorative Bilder sollten so umgesetzt werden, dass sie von assistiven Technologien ignoriert werden können, typischerweise mit einem leeren alt-Attribut.
Soll mein SEO-Keyword im Alt-Text stehen?
Nur wenn es natürlich zur relevanten Bildinformation gehört. Der Alt-Text sollte nicht als Platz für Keywords missbraucht werden. Schreibe ihn für den Zweck des Bildes und für Menschen, die die visuelle Information nicht sehen können.
Muss ich ein kostenpflichtiges Plugin zur Bildkompression installieren?
Für den Einstieg nicht. Du kannst Deine Bilder bereits vor dem Upload kostenlos verkleinern und komprimieren, beispielsweise mit Squoosh. Ein Plugin kann später für Automatisierung interessant werden, ist für diesen grundlegenden Workflow aber keine Voraussetzung.
Kann WordPress meine Bilder nicht automatisch optimieren?
WordPress erzeugt beim Upload verschiedene Bildgrößen und kann dem Browser passende Varianten bereitstellen. Trotzdem ist es sinnvoll, keine unnötig riesigen Ausgangsdateien hochzuladen. Deine Vorbereitung und die automatische Bildverarbeitung in WordPress ergänzen sich.
Fazit: Optimiere Bilder passend zum Zweck statt nach starren Zahlen
Wenn Du Bilder für Deine Webseite optimieren möchtest, brauchst Du keine komplizierte Technik und kein kostenpflichtiges Programm. Der wichtigste Schritt ist, nicht einfach das Original hochzuladen. Überlege zuerst, wo das Bild verwendet wird. Passe dann die Abmessungen an, wähle ein geeignetes Dateiformat und komprimiere die Datei so weit, dass die Qualität weiterhin stimmt. Vergib anschließend einen verständlichen Dateinamen und entscheide beim Einbau, welche Funktion das Bild erfüllt.
Beim Alt-Text gilt besonders: Schreibe nicht für eine Suchmaschine, sondern vermittle die Information, die ein Mensch ohne das Bild benötigt. Ist das Bild rein dekorativ, ist ein beschreibender Alt-Text dagegen nicht sinnvoll. Mit diesem Ablauf bekommst Du kleinere, besser organisierte und zugänglichere Bilddateien, ohne Geld für zusätzliche Software ausgeben zu müssen.
Wenn Du noch keine passenden Bilder hast, dann lies vorher meinen Artikel „Kostenlose Bilder und Videos für Deine Webseite“. Dort erfährst Du, wo Du kostenloses Bildmaterial findest und worauf Du bei der Auswahl und Nutzung achten solltest. Wenn Deine Bilder vorbereitet sind, baue sie in Deine Seitenstruktur ein und prüfee die Darstellung auf unterschiedlichen Geräten.
