Aktion: 25% auf vServer im 1. Jahr

Nur noch 68 Stück verfügbar!

Promocode
vS25
Status

/

/

WordPress Tipps & Tricks: Bilder optimieren

WordPress Tipps & Tricks: Bilder optimieren

Veröffentlicht am 24. Mai 2023
  4 Min. Lesezeit
  Aktualisiert am 11. November 2024

WordPress ist das weltweit wohl meistverwendete Content Management System (CMS). Auch wir haben schon diverse Websites mit WordPress erstellt. In der losen Beitrags-Serie "WordPress Tipps & Tricks" geben wir unsere Erfahrungen aus der Anwendung weiter.

Teil 2: Das solltest du beim Einsatz von Bildern auf deiner WordPress-Seite beachten

Symbolbild für Wordpress-Tipps zu Permalinks. Eine Glühbirne mit Wordpress-Logo startet wie eine Rakete, daneben grafische Darstellungen für die Bildbearbeitung und Bildkomprimierung.

Inhalt

Ob auf einem Blog, der Unternehmensseite oder im Onlineshop – Bilder bringen Abwechslung, Emotionen und auch Struktur auf deine Website. Ein schönes, zu den Seiteninhalten passendes Bild auf der Startseite vermittelt einen positiven ersten Eindruck. Bilder in Blogbeiträgen können die geschriebenen Inhalte unterstützen. Produkt- und Anwendungsbilder im Onlineshop helfen Usern bei der Kaufentscheidung.

Der positive Effekt von Bildern kann aber zunichte gehen, wenn du beim Einsatz nicht einige Regeln beachtest. Denn Bilder gehören auch zu den schwersten Komponenten einer Website und haben daher direkten Einfluss auf deine Ladezeiten. Stell dir deshalb zuerst folgende zwei Fragen, bevor du ein Bild auf einer deiner Seiten einfügst:

  • Passt das Bild inhaltlich zum Text? Du solltest nie ein Bild einfügen, nur damit da ein Bild ist. Wenn es nur ein Bild gibt, das für deinen Inhalt relevant ist, brauchst du kein Zweites. Hier gilt die bekannte Regel: weniger ist manchmal mehr.
  • Bietet das Bild den Website-Besuchern einen Mehrwert? Ein gutes Headerbild etwa fasst den Inhalt eines Beitrags visuell zusammen, eine Infografik oder ein Screenshot ist vielfach verständlicher als lange Erklärungen in Textform. Aber brauchen User wirklich Produktfotos aus allen möglichen Blickwinkeln, um sich für oder gegen das Produkt zu entscheiden?

Tipp: Was aus Webdesign-Sicht bei der Bildwahl zu beachten ist, hat unsere Grafikerin Anja in ihrem ultimativen Webdesign-Guide bereits erklärt.

Bring dein Bild ins richtige Format

Du hast dich also für ein Bild entschieden, das auf deine Website gehört. Hochladen, veröffentlichen, fertig? Ganz so einfach ist das leider nicht. Zunächst solltest du dein Bild ins richtige Format bringen. Das heißt zum einen, dass es von den Proportionen und Seitenverhältnissen her gut in deine Seite passt, andererseits sind aber auch das Dateiformat und die Auflösung wichtig. Du solltest deshalb all deine Bilder vor dem Upload noch bearbeiten.

Tipp: Es gibt mittlerweile zahlreiche gute kostenlose Bildbearbeitungs-Softwares, die auch für Grafik-Laien geeignet sind. In unserem letzten Blogbeitrag findest du 8 Gratis-Tools im Test.

Hier eine Übersicht, welche Bearbeitungsschritte sinnvoll sind für optimalen Pagespeed:

  1. Bildgröße für Anzeigeformat anpassen: Ist dein Originalbild 6000×3500 Pixel groß, auf der Website soll es aber nur auf 1200×700 Pixel dargestellt werden? Dann verkleinere das Bild vor dem Upload aufs Zielformat.
  2. Auflösung anpassen: Für die Verwendung im Web brauchst du keine druckfähige Auflösung von 300 dpi. 72 dpi sind im Online-Bereich ausreichend.
  3. JPG-Dateien verwenden: Speichere deine bearbeiteten Bilder als JPG-Dateien ab. Diese haben die kleinere Dateigröße als PNG-Dateien. PNG solltest du nur verwenden, wenn du einen transparenten Hintergrund benötigst.
  4. Umwandlung in WebP-Dateien: Für noch bessere Ladezeiten ist eine Umwandlung deiner Bilder ins WebP-Format empfehlenswert. WebP ist ein von Google entwickeltes Bildformat, das die Dateigröße weiter verringert, ohne Verlust der Bildqualität. Die Umwandlung von Bildern in dieses Format ist nicht ganz so einfach, deshalb rate ich zu einem WordPress-Plugin wie Imagify oder ShortPixel.
    Eine Alternative zur Konvertierung in WebP ist die zusätzliche Komprimierung der JPG-Datei. Ein praktisches Tool hierfür ist TinyJPG.

Alt-Texte nicht vernachlässigen

Vielfach vernachlässigt oder nur spärlich befüllt wird beim Bild-Upload das Feld für den Alt-Text. Man will ja einfach nur ein Bild auf seiner Seite. Doch Alt-Texte sind nicht einfach lästige Textfelder, die beim Bild-Upload erscheinen, sondern wichtig für die Barrierefreiheit deiner Website. Menschen, die nichts oder nur eingeschränkt sehen, können sich Webseiteninhalte inkl. Alt-Texte der Bilder vorlesen lassen. Ohne Alt-Text werden ihnen also all deine mit Bedacht ausgewählten Bilder vorenthalten. Beschreibe deshalb im Alt-Text, was auf deinen Bildern zu sehen ist.

Ein weiterer Punkt, der für Alt-Texte spricht: Suchmaschinenoptimierung! Da deine Bilder ja inhaltlich relevant sind für deine Seite, wirst du im Alt-Text automatisch wichtige Keywords erwähnen. So merken auch Suchmaschinen, dass es sich dabei um Content handelt, der für dein Kernthema relevant ist.

Einen Teil der WordPress Tipps & Tricks verpasst?

Brauchst du weitere Tipps für deine WordPress-Seite? In unserem WordPress-Guide findest du verschiedene Anleitungen übersichtlich zusammengefasst.

Inhalt

Artikel teilen

Link kopieren

Artikel teilen

Link kopieren
Picture of Cédric Juan

Developer & UX    15 Artikel

531
Kategorie
Titelbild zum Blogbeitrag von hosttech anlässlich des internationalen Caps Lock Day

AM 28. JUNI IST WORLD CAPS LOCK DAY! Keine Sorge, dieser Blogbeitrag ist NICHT komplett in Großbuchstaben geschrieben. Erfahre mehr über den kuriosen Feiertag für die Großschreibung.

Ein Mann sitzt an einem Computer-Arbeitsplatz und ist konzentriert an der Arbeit. Das Foto ist rechts überlagert von einem blauen Farbfeld, auf welchem das WordPress-Logo und die Zahl 6.8 steht.

WordPress 6.8 "Cecil" ist seit Mitte April verfügbar. Erfahre, welche Neuerungen das WordPress-Update bringt und was du für das Update deiner WordPress-Website beachten solltest.

KI-generiertes Bild eines Büroraums mit Mitarbeitern und dem hosttech-Logo

Hast du erkannt, dass dieses Blog-Bild mit KI generiert wurde? KI-generierte Bilder werden immer realistischer, manchmal können sogar geschulte Personen sie fast nicht mehr von echten Fotos unterscheiden. Wie erkennt man also, ob ein Bild KI-generiert ist? Die Technik der Bildgenerierung durch KI, wie beispielsweise DALL-E oder Midjourney, verbessert sich fortlaufend, sodass typische Fehler bald nicht mehr erkennbar sein werden. Wir zeigen dir bestimmte Merkmale und Tools, die helfen, KI-Bilder zu entlarven.

Beitragsbild zum Blog-Artikel "Was ist ein Hosting". Bild von Hosting-Servern in einem Server-Rack. Alles eher dunkel gehalten mit rotem Stimmungslicht.

Ohne Hosting keine Website – doch was steckt dahinter? In diesem Guide erklären wir dir, was Hosting ist, wie es funktioniert und warum es für deine Onlinepräsenz unverzichtbar ist. So findest du die passende Lösung für dein Webprojekt – sicher, leistungsstark und zukunftssicher.

Beitragsbild zum Blogartikel über den Welt-Passwort-Tag. Blick über die Schulter einer Frau auf ihren offenen Laptop, auf dem die Maske zum Ändern des Passworts im myhosttech Kundencenter zu sehen ist. Rechts neben dem Laptop steht eine schwarze Espressotasse mit dem hosttech-Logo drauf.

hosttech verschärft seine Passwort-Richtlinien für E-Mail, Plesk und alle weiteren mit hosttech genutzten Dienste. Damit wollen wir der zunehmenden Gefahr durch Phishing- und weitere Cyberangriffe entgegenwirken.

Blogbild zum Thema SSL-Zertifikat. Zu sehen ist ein Browser-Tab, oben steht SSL Certificate in der Suchleiste ein Schloss-Symbol und daneben der Anfang einer URL mit https://www.ssl

SSL ist ein Muss für jede moderne Website – besonders bei WordPress. Mit einem aktiven SSL-Zertifikat schützt du nicht nur die Daten deiner Besucher, sondern verbesserst auch dein Google-Ranking. Wir zeigen dir, wie du SSL ganz einfach in WordPress aktivierst und Fehler vermeidest.

Beitragsbild zum Blogartikel über den Welt-Passwort-Tag. Blick über die Schulter einer Frau auf ihren offenen Laptop, auf dem die Maske zum Ändern des Passworts im myhosttech Kundencenter zu sehen ist. Rechts neben dem Laptop steht eine schwarze Espressotasse mit dem hosttech-Logo drauf.

Jedes Jahr am ersten Donnerstag im Mai ist Welt-Passwort-Tag. Am 1. Mai 2025 ist es wieder so weit. Wir nutzen die Gelegenheit, euch mit wertvollen Passwort-Tipps zu versorgen.

myhosttech Kundencenter