Bilder, die Sie auf Ihrer Website einbinden wollen, müssen Sie vor dem Upload in die WordPress Mediathek bearbeiten. Die minimale Bearbeitung umfasst dabei die Skalierung auf die benötigte Auflösung sowie die Komprimierung mit Hilfe eines Komprimierungs-Tools. Zuvor können Bearbeitungen zur Bildverbesserung notwendig sein. Warum ist das wichtig?
Wie Sie Bilder für die Verwendung auf Ihrer Website vorbereiten
Die Ladezeit einer Website ist ein wichtiges Kriterium für das Ranking der Seite in Suchmaschinen wie Google. Neben vielen anderen Faktoren wirkt sich die Größe der eingesetzten Bilder und Grafiken hierauf besonders stark aus und ist ein erster großer Hebel, um die Ladezeit einer Website signifikant zu verkürzen. Denn, lädt eine Seite länger als 3 Sekunden, sind viele Nutzer bereits wieder gegangen, bevor sie Ihre Inhalte gesehen haben.
Falls Sie also noch unskalierte oder unkomprimierte Bilder in Ihrer WordPress Mediathek haben, lohnt sich die Überarbeitung und ein erneutes Hochladen. Hierfür habe ich für Sie nachfolgend meinen eigenen Workflow bei der Bildvorbereitung für Websites zusammengefasst.
Kurzanleitung: Workflow Bildbearbeitung vor dem Upload
- Bild bearbeiten, zuschneiden, skalieren (z.B. mit Adobe Photoshop)
- Auflösung Panorama-Bilder: z.B. 2000 x Höhe (schmal: z.B. 700, fullscreen: z.B. 1333) px
- Auflösung Beitrags-Bilder: z.B. 1200 x 800 px (3:2)
- Dateiname Bsp. Beitragsbilder: Originalname_1200x800.jpg
- Das skalierte Bild komprimieren und in das neue Bildformat .webp umwandeln, z.B. mit der Online-App Squoosh.
Bildverkleinerung zwischen 50-80%! Danach sollten Beitragsbilder < 100 kb, schmale Panoramabilder < 200 kb sein. - Die komprimierte Datei heißt dann Originalname_1200x800.webp
- Danach in die WordPress Mediathek hochladen
- Wichtig: In der Mediathek für jedes Bild das Feld Alternativer-Text mit Was ist zu sehen? + SEO Keyword und das Feld Beschriftung mit der Urheberangabe ergänzen.
Spuoosh Online-Bildkomprimierung: https://squoosh.app
Im Detail:
Bild bearbeiten, zuschneiden, skalieren
Welches Bildbearbeitungsprogramm Sie verwenden, ist nicht entscheidend, Standardbearbeitungen wie Helligkeits- und Kontrast- oder Farbanpassungen sowie Zuschneiden, wenn Sie nur einen Bildausschnitt verwenden wollen und anschließendes Skalieren auf die benötigte Auflösung, können die meisten Programme. Kamerabilder haben als .jpg bei einer Kameraauflösung von etwa 6000×4000 px (3:2) eine Größe von rund 10 MB.
Für eine Webseite benötigen Sie diese hohen Auflösungen nicht und können die Datei daher bedenkenlos herunterskalieren. Die o.g. Auflösungen sind Vorschläge und können sich ggf. bei Ihrer Website unterscheiden. Ich verwende meist 2000×700 px für Panoramabilder, 1200×800 px für Beitragsbilder (s.o).
Speichern Sie Ihre bearbeitete Bilddatei unter einem neuen Namen (behalten Sie das Original unverändert) und wählen Sie dabei eine Qualitätsstufe von 80-90 %.
Ein Dateiname mit Bezug zur Originaldatei hat später viele Vorteile. Ich empfehle daher etwas wie Originalname_1200x800.jpg. Ein Beitragsbild dieser Auflösung dürfte nun je nach Motiv eine Größe von 200-400 kB haben.
Sammeln Sie all Ihre Website Bilder in einem entsprechenden Projektordner.
Bild komprimieren
Eine Dateigröße von mehreren hundert kB ist für eine Website noch zu groß, wenn diese schnell geladen werden soll – und das soll sie. Moderne Komprimierungsverfahren können eine nach obigem Muster bearbeitete Bilddatei noch einmal um 50-80% verkleinern und das üblicherweise bei nur auf sehr guten Monitoren sichtbaren Qualitätsverlusten. Verwenden Sie das moderne .webp Bildformat.
Mit dem online Komprimierungsdienst Squoosh können Sie Ihre .jpg oder .png Bilder direkt beim Komprimieren in .webp umwandeln. Das ist zu empfehlen.
Die komprimierte Datei laden Sie nun hoch in Ihre WordPress Mediathek.
Spuoosh Online-Bildkomprimierung: https://squoosh.app
Zum Schluss: Urheberangabe und Alternativtext setzen
Um dem Urheberrecht zu genügen, ist bei allen Inhalten Dritter die Urheberangabe am Werk zwingend erforderlich. (Siehe Beitragsbild dieses Beitrages) Selbstverständlich ist bei jeder Nutzung von Inhalten Dritter auch die Erlaubnis dafür (Lizenz) notwendig. Bei selbst erstellten Inhalten brauchen Sie beides nicht, können aber trotzdem den Urheber angeben. Ergänzen Sie in der Mediathek die Urheberangabe des Bildes im Feld „Beschriftung“ („Caption“).
Falls Ihre Website dies Feld nicht automatisch auswertet und am Bild korrekt anzeigt, kontaktieren Sie mich gerne, dann ergänzen wir, wenn möglich, diese Funktion in Ihrer Website.
Der Alternativtext zu einem Online-Bild hat zwei wichtige Funktionen. Zunächst dient er der Erläuterung des Bildinhaltes. Alle modernen Browser können Texte und auch die Alternativtexte zu Bildern vorlesen. Dies ermöglicht auch sehbehinderten Menschen die Internetnutzung. Des Weiteren wertet Google die Alternativtexte Ihrer Bilddateien aus. Sie sollten sie daher immer inhaltlich sinnvoll setzen. Beschreiben Sie kurz, was auf dem Bild zu sehen ist (für die Vorlesefunktion). Kombinieren Sie diese Beschreibung wenn möglich mit dem wichtigsten Keyword für diesen Beitrag (SEO Ranking).
Mehr Infos zur Suchmaschinenoptimierung.
Wenn Sie diesen Workflow bei jedem Bild Ihrer Website anwenden, haben Sie einen wichtigen Schritt für eine schnelle Ladezeit Ihrer Seite und für Ihr Ranking bei Suchmaschinen gemacht. Gratulation!
Haben Sie Fragen?