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 der erste große Hebel, um die Ladezeit einer Webseite 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 Webseiten notiert.
Kurzanleitung
Workflow Bildbearbeitung vor dem Upload:
- Bild bearbeiten, zuschneiden, skalieren (z.B. mit Adobe Photoshop)
- Auflösung Panorama-Bilder: 2000 x Höhe (schmal: 700, mitttel: 1000, fullscreen: 1333) px
- Auflösung Beitrags-Bilder: 1200 x 800 px (3:2)
- Dateiname Bsp. Beitragsbilder: Originalname_1200x800.jpg
- Das skalierte Bild komprimieren z.B. über https://www.iloveimg.com/compress-image/
Bildverkleinerung zwischen 50-70%! Danach sollten Beitragsbilder < 100 kb, schmale Panoramabilder < 200 kb sein. - Komprimierte Datei umbenennen in Originalname_1200x800_c.jpg
- Danach in die WordPress Mediathek hochladen
- Wichtig: Bildbeschreibung (Urheberangabe) und ALT-Text (Alternativtext: Was ist zu sehen? + SEO Keyword) ergänzen.
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-70% verkleinern und das üblicherweise bei nur auf sehr guten Monitoren sichtbaren Qualitätsverlusten.
Kostenlose Komprimierungsdienste sind z.B.
iloveimg.com: https://www.iloveimg.com/compress-image/
Squoosh: https://squoosh.app
Sie können mehrere Fotos gleichzeitig hochladen und mit einem Klick komprimieren lassen. Einstellungen sind keine vorzunehmen. Die Dateien werden automatisch heruntergeladen und befinden sich dann in dem in Ihrem Browser angegebenen Download-Ordner. Dort empfehle ich, die komprimierten Dateien umzubenennen, z.B. in Originalname_1200x800_c.jpg. So wissen Sie später immer, welches die komprimierte Datei ist.
Diese komprimierte Datei laden Sie nun hoch in Ihre WordPress Mediathek.
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!
