Was du jetzt über WordPress Bildgrößen und TinyPNG wissen musst.

Bildgrößen bei WordPress und TinyPNG
JohannaVon Johanna|16. März 2023

Formate, Tipps und Anwendungshinweise

Bilder und Fotos dürfen natürlich auf keiner Webseite und Social Media Plattform fehlen – das Internet lebt ja von Fotos, Videos, Grafiken und Inspirationen. Bilder bei WordPress einzufügen ist daher natürlich absolut keine Schwierigkeit, aber um so wichtiger für deine Webseite und deinen Außenauftritt. Wichtig ist trotzdem, die richtige Bildgröße zu verwenden, um auch die passende Qualität gewährleisten zu können.

 

Denn es ist wichtig zu wissen, wie Bildgrößen bei WordPress funktionieren und wie du benutzerdefinierte Bildgrößen hinzufügen und verwenden kannst. Die richtige Bildgröße und -Qualität steigert außerdem auch die Wertigkeit deiner Blogbeiträge und das einfachere Teilen dieser auf.

1. Die WordPress Standard Bildgrößen

Die richtige Bildgröße bei WordPress zu hinterlegen ist für deine Webseite entscheidend, denn die falsche Größe bedeutet in der Konsequenz eine unscharfe, schlechtere Qualität und eine lange Ladezeit deiner Webseite. Ein Handybild eines aktuellen Iphone 14 Pro umfasst beispielsweise im ProRAW Format ca. 48MB. So große Fotos in deine WordPress-Mediathek einzubinden, würde deine Webseite unheimlich langsam machen.

Deshalb kannst du deine WordPress Bildgrößen auch selbst einstellen. Was einige vielleicht nicht wussten ist, dass von WordPress automatisch vier Bildgrößen beim hochladen erstellt werden.

 

Gleichzeitig sind im WordPress standardisierte Bildgrößen hinterlegt, die du aber jederzeit verändern kannst. Diese Bildgrößen sehen wie folgt aus:

  • Thumbnail-Vorschau Größe: 150 x 150 Pixel
  • Mittlere Bildgrößen: 300 x 300 Pixel
  • Große Bildgrößen: 1024 x 1024 Pixel

 

Aber warum legt WordPress überhaupt Bildgrößen fest?

Durch das Hinterlegen von standardisierten Bildgrößen stellt WordPress sicher, dass deine Bilder an den verschiedenen Stellen in den richtigen Formaten ausgestrahlt werden. Die Bildgröße entscheidet dabei, wie viel Platz das Bild auf deiner Seite einnimmt, deswegen ist es beispielsweise auch wichtig deine Bildgrößen an die Vorgaben deines Themes anzupassen. Außerdem musst du deine Bildgrößen nicht mehr manuell anpassen. Willst du also ein Bild oder eine Grafik für verschiedene Stellen benutzen, musst du nicht selbst darauf achten, dass das Bild für den Platz die angemessene Größe besitzt. Das macht WordPress automatisch im Hintergrund für dich.

Die Standard Grafikgrößen für WordPress
Die Voreinstellungen der WordPress Grafikgrößen.

Wie kannst du deine Bildgrößen bei WordPress anpassen?

Wenn du möchtest, kannst du die WordPress Standard-Bildgrößen auch verändern. Dazu klickst du in deinem WordPress Dashboard auf Einstellungen und dann auf Medien (s. Bild oben). Hierüber gelangst du zu der Übersicht, in der alle Bildgrößen aufgelistet sind. Gib nun einfach deine präferierten neuen Bildmaße ein, speichern und schon bist du fertig.

 

Ab sofort werden alle Bilder die du in deine WordPress Mediathek hochlädst in den neuen Maßen ausgespielt.

2. Wann macht es Sinn die WordPress Bildgrößen zu verändern?

Die standardisierten WordPress Bildgrößen zu verändern muss nicht immer sinnvoll sein.

Für die meisten Benutzer funktionieren die klassischen Bildgrößen sehr gut, allerdings haben manche Unternehmen andere oder erweiterte Anforderungen. So zum Beispiel Fotografen, Designer, Blogger oder Online Shops. Eine neue Bildgröße verwenden zu wollen, kann total individuell sein: benötigst du vielleicht eine neue Größe für ein Thumbnail oder für eine Produktplatzierung auf deiner Webseite?

 

Eine Veränderung macht außerdem Sinn, wenn du beispielsweise ein WordPress Theme installiert hast, welches benutzerdefinierte Größen verwendet. Durch das Verändern der standardisierten WordPress Bildgrößen kannst du sicherstellen, dass WordPress deine Bilder an die benutzerdefinierten Bildgrößen deines Themes auch wirklich automatisch anpasst.

Solltest du deine Bilder aber z.Bsp. immer manuell und gezielt in andere Größen bringen, um die Darstellung auf deiner Webseite zu verändern, kann es natürlich ebenfalls Sinn machen diese Bildgrößen bei WordPress zu hinterlegen.

 

Sofern du aber zusätzliche Bildgrößen zu den Standardgrößen in deiner Datenbank (also z.Bsp. der functions.php-Datei) hinzufügst, sollte dir bewusst sein, dass WordPress dadurch viel mehr Bilddateien in der Datenbank deiner Seite zwischenspeichert. Auch das kann erneut zum Performance-Verlust deiner Webseite führen, da deine Webseite nun mehr Speicherplatz benötigt als normal.


! Kostenloser Speedtest (CTA-Box) - 04/22 - /blog/

Wie schnell ist deine WordPress Seite?

Teste jetzt kostenlos die Ladezeit deiner Webseite!

✔ Du bekommst das Testergebnis direkt per E-Mail.

Mit dem Absenden dieses Formulars stimmst du unseren Datenschutzbestimmungen zu.


3. Die Dateigröße von Bildern optimieren

Nicht nur die Bildgrößen sind wichtig, sondern auch die Dateigröße von Bildern. Viel zu große Dateien verursachen auf Dauer langsame Ladezeiten von Webseiten. Das bedeutet, dass deine Nutzer länger warten müssen, bis deine Bilder auf deiner Webseite vollständig geladen sind.

 

Bevor du also die Bilder in deiner Mediathek hochlädst, empfehlen wir dir, die Dateigröße zu überprüfen und gegebenenfalls zu reduzieren. Für WordPress empfiehlt es sich, eine Dateigröße von maximal 150 KB oder weniger zu verwenden – zumindest wenn es sich um Fotos und Bilder handelt.

Um die Dateigröße zu verändern bzw. zu verringern gibt es verschiedene Plugins und Tools, wie zum Beispiel TinyPNG.

TinyPNG kannst du sowohl als kostenloses Plugin bei WordPress verwenden, als auch ganz einfach über deinen Internet Browser.

Wenn du das Plugin in deinem WordPress installierst, bringt das allerdings Vorteile mit sich, wie zum Beispiel das automatische komprimieren deiner Bilder beim hochladen in die Mediathek. Dadurch sparst du dir den extra Schritt, alle Bilder händisch noch einmal im Browser hochzuladen und komprimieren zu müssen. Wenn du aber auf die schnelle die Dateigröße einzelner Fotos anpassen möchtest, ist die Browser-Version aber natürlich auch eine super Lösung.

Neben der kostenlosen Browser und WordPress Plugin Version, gibt es aber auch noch drei verschiedene „Pro“-Tarife, die sich in den Features und Möglichkeiten unterscheiden, beispielsweise im Speicherplatz, wie viele Webseiten enthalten sind uvm.

 

Preise: kostenlos bei WordPress / ab 15$ pro Monat.

TinyPNG Panda winkt dir zu
Michael, Marketing

Micha – Mediengestalter

Ich benutze TinyPNG gerne, weil es einfach cool ist, dass die Bilder immer zuverlässig und ohne erheblichen Qualitätsverlust komprimiert werden. Außerdem ist es zusätzlich auch noch am preiswertesten.

3. Den passenden Bildtyp auswählen

Es gibt verschiedenste Bildtypen, die heute gängig verwendet werden, wie zum Beispiel JPG, PNG oder GIF.

Die zwei gängigsten Bildtypen sind JPG (JPEG) und PNG. Der Hauptunterschied zwischen den Formaten liegt darin, dass die Komprimierung von JPG Bildern immer mit Qualitätsverlusten verbunden ist, während PNG eine verlustfreie Komprimierung verwendet.

 

JPG

Eine JPG-Komprimierung reduziert die Datei-Größe, indem Bildinformationen entfernt werden, die für unser optisches Auge weniger wichtig sind. Das verringert zwar die Dateigröße, allerdings auch die Qualität des Bildes. Das JPG-Format eignet sich daher besonders für Fotos mit vielen Farben, Farbverläufen oder Schattierungen.

 

PNG

Bei der Komprimierung von PNG-Dateien entsteht hingegen kein Qualitätsverlust. Das liegt daran, dass dabei keine Informationen aus dem Bild entfernt werden, wodurch die Dateigröße zwar prinzipiell noch höher ist als ein JPEG, die Bildqualität gleichzeitig aber erhalten bleibt. Wir empfehlen das PNG-Format daher für Grafiken, Logos und klare Bilder mit Linien, Texten oder transparenten Hintergründen.

 

WebP

WebP ist ein etwas neueres Bildformat, welches von Google entwickelt wurde, um die gängigen Bildformate JPG, PNG und GIF zu ersetzen und eine noch bessere Bildqualität bei kleineren Dateigrößen zu gewährleisten.

WebP zielt also darauf ab die gleiche Bildqualität bei kleinerer Dateigröße zu liefern. Dadurch entsteht ein besseres optisches Erlebnis auf deiner Webseite, die gleichzeitig noch schneller lädt. Die veränderten WebP Bildgrößen sind im Vergleich 25-34% kleiner als ein JPG Bild und ca. 26% kleiner als ein ähnliches PNG-Bild.

Bei WordPress kannst du das WebP Format seit der Einführung WordPress 5.8 ganz standardmäßig verwenden. Das bedeutet, du kannst deine WebP Bilder ganz normal in deiner Mediathek hochladen und du benötigst keine Drittanbieter Plugins.


‼️ Achtung

Aktuell wird der neue Bildtyp WebP von den gängigen Browsern, wie Chrome, Firefox, IOS und macOS Safari unterstützt. Bei Safari kommt es allerdings leider auf eine aktuelle Version an.

Falls der Browser eines Nutzers das WebP Format nicht unterstützt, werden deine Bilder auf deiner Webseite nicht angezeigt.


Mit der Einführung von WordPress 6.1 hat WordPress die automatische Konvertierung von Bildtypen eingeführt. In der Praxis bedeutet das, wenn ein JPEG-Bild hochgeladen wird, kann WordPress automatisch sowohl ein WebP- als auch Subgrößen des JPEG-Formates erstellen.

4. Fazit

Wie du siehst, ist es also gar nicht so kompliziert deine Bildgrößen richtig einzustellen oder anzupassen. Es gibt auch noch die Möglichkeit deine Bildgrößen in die functions.php-Datei einzutragen und diese in dein Theme zu übernehmen. Das ist allerdings in den meisten Fällen gar nicht notwendig. Du kannst dir für dich überlegen, welche Bildgrößen du wirklich benötigst und diese in deinem WordPress hinterlegen.

 

Besonders solltest du darauf achten, das deine Bilder richtig komprimiert werden, um deine Webseite nicht zu überladen und deine Performance aufrechtzuerhalten.