Bilder & WordPress – Optimale Darstellung, beste Performance

17 Jan 2022 | Agenturen, Hosting, Webdesign

Bilder & WordPress – Optimale Darstellung, beste Performance

Die optimale Bilddarstellung und -größe ist von enormer Wichtigkeit für deine WordPress Seite. Ladest du zum Bespiel ein Bild im Querformat auf deine Seite und verwendest es dann in einem Element, dass für hochformatige-Bilder designt wurde, wird die Darstellung deines Bildes nicht optimal sein, entweder wird das Bild verzerrt oder abgeschnitten dargestellt. In beiden Fällen ist das Ergebnis nicht gewünscht.

Auch auf die Dateigröße der einzelnen Bilder solltest du dein Augenmerk legen. Denn große Bilder gehen zu Lasten von Ladezeit und Performance, was wiederum Auswirkungen auf die User Experience und dein Rating auf Google hat.

Daher ist es wichtig für dich zu wissen, wie Bildgrößen auf Webseiten von WordPress
funktionieren und wie du benutzerdefinierte Bildgrößen hinzufügen kannst. So kannst du den am besten geeigneten Bilddateityp in der richtigen Größe und an der richtigen Stelle verwenden.

 

So werden deine hochgeladenen Bilder in WordPress verwaltet

Wenn du Bilder in WordPress hochlädst, werden vom System aus standardmäßig folgende Bildgrößen erstellt:

Thumbnail: 150 x 150 Pixel
Mittlere Größe: 300 x 300 Pixel
Maximale Größe: 1024 x 1024 Pixel
Originalgröße: entspricht der Originalgröße des hochgeladenen Bildes

Diese Größen werden deshalb erstellt, weil WordPress an vielen Stellen standardmäßig mit diesen Bildformaten arbeitet, z.B. bei Blogbeiträgen.

Du kannst diese Standardgrößen in WordPress unter Einstellungen -> Medien ändern.

Wir raten dir jedoch davon ab und empfehlen stattdessen, die Bilder bereits in deinem gewünschten Format hochzuladen.

 

Optimale Bildgrößen für WordPress

Die optimalen Formate für deine Bilder in WordPress sind:

Thumbnail: 150 x 150 Pixel
Logobilder: 200 x 100 Pixel
Hintergrundbilder: (z.B. für den Startbereich) 1920 x 1080 Pixel
Blog: 1.200 x 630 Pixel
Produktbilder für WooCommerce: 1.000 x 1.000 Pixel – die Größe kann jedoch variieren, je nachdem wie dein Online-Shop designt ist.
Headerbild: 1.048 x 250 Pixel
Featured Image: 1.200 x 900 bzw. 900x 1.200 Pixel

 

Anpassung der Dateigrößen

Wie eingangs schon erwähnt, spielt auch die Dateigröße eine entscheidende Rolle in Punkto Performance und User Experience. Sind die Bilder sehr groß, wird deine Seite dadurch um einiges langsamer. Daher solltest du eine Dateigröße von 180 KB nicht überschreiten.

Gerade bei großen Hintergrundbildern kann dies zur Herausforderung werden. Hier gilt es die Balance zwischen Bildqualität und Dateigröße zu finden, jedoch solltest du auch bei großen Bildern darauf achten, nicht über 250 KB zu kommen. Außerdem empfehlen wir dir, nicht zu viele so große Bilder auf deiner Webseite zu verwenden.

Die Erhöhung der Ladezeit aufgrund vieler großer Bild, und die daraus entstehenden negativen Auswirkungen auf die Performance, sind übrigens Gründe dafür, warum man im Allgemeinen von Slidern wieder Abstand genommen hat.

Ladest du Bilder in deine Mediathek die viel zu groß sind, dann skaliert WordPress diese Bilder automatisch – dies solltest du aber vermeiden, da sich dies negativ die Bildqualität auswirkt.

Für die Komprimierung deiner Bilder gibt es spezielle Tools, die teils sogar kostenlos sind. Eines dieser Tools ist beispielsweise tinyPNG. Auf der Webseite von tinypng.com kannst du bis zu einem gewissen Grad kostenlos deine Bilder uploaden und diese nach erfolgreicher Komprimierung wieder downloaden. Es gibt dafür auch ein eigenes WordPress Plugin.

Bei ElegantWeb hast du übrigens in den meisten Hosting-Paketen die Komprimierung deiner Bilder durch ein ausgezeichnetes Profitool, kostenlos inkludiert.

 

Richtige Bildtypen & Bildauflösung

Es gibt unterschiedliche Dateiformate, die du auf deiner WordPress Seite verwenden kannst. Hier für dich ein Überblick über die beiden meist genutzten Formate und deren Verwendung:

JPEG (JPG): Dieser Dateityp hat normalerweise die kleinste Dateigröße für Fotos und eignet sich daher ausgezeichnet für Hintergrundbilder und Produktbilder.

PNG: Der Vorteil von PNG´s besteht darin, dass hier transparente Hintergründe verwendet werden können. Daher verwendet man dieses Dateiformat z.B. für Logos, Icons, Grafiken, Musterelemente u.ä. Die Dateigröße ist hier meist höher als bei JPEG.

Die Bildauflösung ist neben der Dateigröße ebenfalls wichtig für einen optimale Darstellung. Wir empfehlen eine Auflösung von 72 dpi (Dots per Inch).

 

Fazit:

Schöne Bilder unterstützen dich dabei, deine Geschichte zu erzählen und helfen deinen Besuchern, sich mit deinen Inhalten anzufreunden und ihr Interesse zu wecken.
Damit die Darstellung deiner Bilder optimal ist und die Ladezeit deiner Webseite nicht explodiert, solltest du dabei darauf achten, dass du die optimalen Dateiformate und -größen wählst.

Übrigens spielt auch ein professionelles Hosting eine wichtige Rolle für schnelle Ladezeiten und ein gutes Google-Rating.

Das könnte dich auch interessieren

Designtrends 2022

Designtrends 2022

Die besten Farbkonzepte für Webseiten 2022 Hast du manchmal den Eindruck, dass bestimmte Farbkombinationen von Websites die ganze Aufmerksamkeit auf sich ziehen? Wie bei jedem anderen Aspekt im Webdesign gibt es auch bei den Farbkonzepten Tends. Im Jahr 2022 sind es...

mehr lesen
Erfolgreiche Landingpages

Erfolgreiche Landingpages

Das Geheimnis hinter erfolgreichen Landingpages Eine erfolgreiche Landingpage fördert deine zielgerichtete Marketingkampagne, um dein Business mit neuen Marketing-Leads zu steigern. Zudem ermöglichen Landingpages den Traffic und auch den Erfolg von einzelnen...

mehr lesen
Webseiten Relaunch 2022

Webseiten Relaunch 2022

Endlich ist es soweit! Unser neuer Webauftritt geht online! Wir haben spannende neue Produkte, ausgeklügelte Funktionen im Design, und viel Herzblut für euch in unserer neuen Webseite vereint. Entdecke jetzt alle Neuheiten! Auch im kommenden Jahr erwarten euch wieder...

mehr lesen

Neueste Beiträge

Designtrends 2022

Designtrends 2022

Die besten Farbkonzepte für Webseiten 2022 Hast du manchmal den Eindruck, dass bestimmte Farbkombinationen von Websites die ganze Aufmerksamkeit auf sich ziehen? Wie...
Erfolgreiche Landingpages

Erfolgreiche Landingpages

Das Geheimnis hinter erfolgreichen Landingpages Eine erfolgreiche Landingpage fördert deine zielgerichtete Marketingkampagne, um dein Business mit neuen Marketing-Leads...
Happy 2022

Webseiten Relaunch 2022

Endlich ist es soweit! Unser neuer Webauftritt geht online! Wir haben spannende neue Produkte, ausgeklügelte Funktionen im Design, und viel Herzblut für euch in unserer...
Kostenlos vs. Premium

WP Hosting – Kostenlos vs. Premium

Kostenloses WordPress Hosting – Welche Unterschiede es gibt und was du darüber wissen solltest. WordPress ist seit einigen Jahren das weltweit führende Content...
Log4j

Sicherheitslücke Log4j

Aktuelle Informationen zur Sicherheitslücke Log4j In den vergangenen Tagen ist eine Sicherheitslücke in log4j aufgedeckt worden. Log4j ist ein weitverbreitetes...