Divi Theme - 10% OFF

Erhalte 10% Rabatt auf das meistverkaufte WordPress Theme.

Divi Theme - Cyber Monday Sale

Das meistverkaufte WordPress Theme!

Tage
Stunden
Minuten
Sekunden

WordPress SEO Tutorial 2024 > OnPage Optimierung

Bild Optimierung

Datei-Name

Achte immer darauf deine Bilder mit einem sinnvollen und beschreibenden Dateinamen hochzuladen. So gibst du Google einen Hinweis, was auf dem Bild dargestellt wird. Zudem besteht so die Chance in der Bildersuche zu erscheinen und so weitere Besucher für deine Website zu gewinnen.

Schlecht:

IMG123.JPG

Besser:

flugzeug-landung.jpg

„Alt“-Tags

Mit dem „alt“ Tag, kannst du Suchmaschinen mitteilen, was auf einem Bild zu sehen ist. Gebe diese Information beim Hochladen eines Bildes immer an, da Google und andere Suchmaschinen sonst nicht erkennen können, was auf dem Bild dargestellt ist und ob es zum Inhalt passt. Das Hauptkeyword deiner Seite solltest du wenn möglich in einem „alt-Tag unterbringen. Allerdings nur wenn es Sinn macht und wenn du es auch angeben würdest, wenn es keine Suchmaschine gäbe.

Schlecht:

<img src=“flugzeug-landung.jpg“ alt=““/>

Besser:

<img src=“flugzeug-landung.jpg“ alt=“Flugzeug im Landeanflug“/>

Bilder verkleinern und komprimieren

Umso größer die Seiten deiner Website sind, desto mehr Zeit wird zum Laden benötigt. – logischerweise.

Hochauflösende Fotos und Bilder verlangsamen deine Website enorm.

Um das zu verhindern müssen wir diese für unsere Website optimieren und komprimieren.

Im ersten Schritt finden wir die benötigte Breite heraus.

Wenn der Container für unseren Inhalt nur maximal 1000px breit ist, dann reicht diese Breite für unserer Bild auch aus.

So findest du die Containerbreite in Google Chrome heraus (siehe Abbildung):

  1. Gehe auf deine Website.
  2. Strg + Umschalt + I oder “Rechtsklick” > Untersuchen
  3. Strg + Umschalt + C und mit dem Cursor über den Container hovern.
  4. Die blaue Box zeigt dir beim hovern die verschiedenen Elemente an.
  5. In der schwarzen Infobox wird die Höhe x Breite angezeigt.
  6. In meinem Fall beträgt die maximale Containerbreite 805px.

Anschließend müssen wir unser vorhandenes Bild auf diese Breite einstellen.
Das geht ganz einfach mit Paint oder dem kostenlosen Bildbearbeitungsprogramm paint.net.

Google Chrome Developer Tools - Container Breite

Mit Paint:

  1. Öffne Paint
  2. Gewünschtes Bild öffnen.
  3. Größe ändern > Pixel
  4. Gewünschte Breite in Pixel eingeben. (Horizontal)
  5. Gegebenenfalls darauf achten, dass der Haken bei “Seitenverhältnis beibehalten” gesetzt ist.
  6. “Ok” klicken.
  7. Als .jpeg oder .png abspeichern.

Nun ist das Bild wahrscheinlich bereits erheblich kleiner, allerdings noch nicht klein genug. Jetzt müssen wir es noch komprimieren.

Dazu können wir z.B. den kostenlosen Online Dienst TinyJPG verwenden. Einfach das Bild per Drag ‘n’ Drop in die Ablage ziehen und komprimierte Version herunterladen.

Mit Paintnet kannst du die Komprimierung direkt beim Speicherprozess einstellen und kannst dir so die Online Komprimierung sparen.

  1. Öffne Paint.net
  2. Gewünschtes Bild öffnen.
  3. Unter dem Reiter “Bild” > “Größe ändern…” auswählen.
  4. Gewünschte Größe eingeben.
  5. Gegebenenfalls darauf achten, dass der Haken bei “Seitenverhältnis beibehalten” gesetzt ist.
  6. “Ok” klicken.
  7. Speichern unter > .jpeg oder .png als Dateiformat wählen.
  8. Gewünschte Komprimierungsqualität wählen.
  9. Fertig!

Bei den Bildern solltest du immer das richtige Maß der Komprimierung finden. Nicht nur eine langsame Seite, sondern auch zu stark komprimierte Bilder wirken sich negativ auf die Nutzererfahrung aus.

Finde den goldenen Mittelweg. 🙂

Kapitel 2.4

Mobile Optimierung

Gefällt dir das Tutorial?

Dann gebe meiner Anleitung doch eine positive Bewertung. 😉

1/5 – (2 votes)

Oder teile es mit deinen besten Freunden! Ich würde mich sehr freuen!

Hast du noch weitere Fragen, Tipps oder sonstige Anregungen? Schreibe mir ganz einfach einen Kommentar! 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Tutorial weiterempfehlen

Das könnte dich interessieren

Top Deal des Monats!

Jetzt Divi Theme von Elegant Themes kaufen und 10% Rabatt erhalten!