Anfängerleitfaden zu WordPress-Bildgrößen (+ Best Practices)

Entdecken Sie die Essentials der WordPress-Bildgrößen in diesem einfachen Anfängerleitfaden. Erfahren Sie, wie WordPress automatisch Miniatur-, Mittel- und Großbildversionen erstellt, warum diese Größen für das Aussehen und die Leistung Ihrer Site wichtig sind und wie WP Media Folder Ihnen helfen kann, organisiert zu bleiben.

 Dieser Leitfaden erklärt die standardmäßigen WordPress-Bildgrößen (Thumbnail, mittel, groß), warum sie existieren und wie man sie für Ihr Theme anpassen kann. Wir werden auch sehen, wie das WP Media Folder -Plugin dabei helfen kann, Ihre Bilder zu verwalten. Wenn Sie nicht technisch versiert sind, ist dies dennoch leicht zu verstehen. Aber Sie werden genau erfahren, wie WordPress Bildgrößen handhabt und wie man sie anpasst.

Überblick über die Standardbildgrößen von WordPress

Wenn Sie ein Bild in WordPress hochladen, erstellt es automatisch mehrere Versionen dieses Bildes, um es an verschiedenen Stellen auf Ihrer Website zu verwenden. Standardmäßig generiert WordPress:

• Vorschaubild: eine quadratische Version mit 150 × 150 Pixel. Wird häufig in Blog-Vorschau-Listen, Widgets und Galerien verwendet.
• Mittel: eine skalierte Version, bei der die längste Seite 300 Pixel beträgt. Wenn Ihr Bild höher als breit ist, könnte es 300 Pixel hoch und eine geringere Breite sein oder umgekehrt.
• Groß: eine Version, bei der die längste Seite 1024 Pixel beträgt. Gut für Bilder in voller Breite oder Blog-Beitrags-Header.
• Vollständig: die exakte Datei, die Sie hochgeladen haben, unverändert.

WordPress wählt die optimale Größe für die Bereitstellung je nachdem, wo das Bild angezeigt wird. Ein kleines Vorschaubild in einer Beitragsliste wird in einer Größe von 150 × 150 geliefert; ein Banner mit einem hervorgehobenen Bild könnte eine maximale Größe von 1024px verwenden. Dieses System optimiert die Ladegeschwindigkeit, die Bandbreitennutzung und das Erscheinungsbild auf verschiedenen Geräten und Bildschirmgrößen.

Warum WordPress diese Größen automatisch erzeugt

• Um sicherzustellen, dass Bilder in Designbereiche passend skaliert werden (z.B. nicht hochskaliert oder unscharf).
• Um die Dateigröße zu reduzieren und die Ladeleistung zu verbessern, insbesondere auf mobilen Geräten
• Um den Workflow für Content-Ersteller zu vereinfachen – keine manuelle Größenänderung erforderlich.

Wenn Ihr hochgeladenes Bild kleiner ist als die Größe, die WordPress erzeugt (zum Beispiel ein 800 Pixel breites Foto), wird WordPress nur Größen bis zu den Dimensionen erstellen, die das Bild unterstützt – die große Größe wird also die ursprüngliche Größe nicht überschreiten.

Bewährte Praktiken für die Verwendung von Standardbildgrößen

Hier sind einige häufige Anwendungsfälle für jede Standardgröße:

Miniaturansichten

Verwenden Sie es für Rastergalerien, Blog-Beitrags-Vorschauen, Widgets oder Seitenleistenlisten. Verwenden Sie die Miniaturansicht nicht für einen großen Anzeigebereich; es wird pixelig erscheinen.

Für dieses Beispiel haben wir eine Galerie verwendet, die mit WP Media foldererstellt wurde.

Mittel

Ideal für Inline-Bilder in Blogbeiträgen oder kleinere Banner. Diese finden eine gute Balance zwischen Klarheit und Dateigröße.

Große Größe

Verwenden Sie sie für Bilder über die gesamte Breite, hervorgehobene Überschriften, Slider oder Vollbildbereiche. Vermeiden Sie die Verwendung von Originalbildern in voller Größe, es sei denn, dies ist unbedingt erforderlich (z. B. hochauflösende Fotos), da diese viel Speicherplatz beanspruchen und das Laden der Seite verlangsamen können.

Das Hochladen sehr großer Originaldateien (zum Beispiel Tausende Pixel in der Breite oder hochauflösende TIFF- oder PNG-Bilder) wird nicht empfohlen. Sie benötigen mehr Speicherplatz und können Ihre Website oder Ihren Medienverarbeitungsserver verlangsamen. Idealerweise laden Sie Bilder hoch, die in etwa der maximalen Anzeigebreite Ihres Themes entsprechen (zum Beispiel 1200px breit, wenn Ihr Inhaltsbereich 1200px ist).

So passen Sie die Bildabmessungen für Ihr Theme an

Standardmäßig verwendet WordPress die Größen in Einstellungen > Medien, aber Sie möchten diese Größen möglicherweise anpassen oder neue hinzufügen, um den Anforderungen Ihres Themes gerecht zu werden.

Ändern der Standardabmessungen über die Administrationsbildschirme

Gehen Sie zu Ihrem WordPress-Dashboard > Einstellungen > Medien. Hier können Sie die Pixelabmessungen für Thumbnail, Mittel und Groß ändern. Nachdem Sie Änderungen vorgenommen haben, speichern Sie. Zukünftige Uploads werden die neuen Einstellungen verwenden.

Bestehende Bilder, die bereits hochgeladen wurden, werden jedoch nicht automatisch neu generiert. Sie müssen ein Plugin zur Regenerierung von Miniaturansichten verwenden, wenn Sie die Größen später ändern.

Hinzufügen benutzerdefinierter Bildgrößen in Ihrem Theme-Code

WICHTIGER HINWEIS: Sie sollten keinen benutzerdefinierten Code anwenden, ohne vorher ein Backup zu erstellen.

Um neue Bildgrößen jenseits von Miniatur/Medium/Groß zu registrieren, können Sie Code in der functions.php-Datei Ihres Themes oder in einem benutzerdefinierten Plugin hinzufügen. Beispiel:

add_image_size( 'benutzerdefinierte-funktion', 800, 600, true ); 

Dies registriert eine neue Größe namens 'custom-feature' mit einer Breite von 800px, einer Höhe von 600px und aktiviertem Zuschnitt.

Dann können Sie es in Ihren Theme-Dateien aufrufen:

the_post_thumbnail( 'benutzerdefiniertes Merkmal' ); 

Oder in Gutenberg sehen Sie möglicherweise die neue Größe im Dropdown-Menü des Bildblocks, wenn Ihr Theme dies unterstützt.

Sie können mehrere benutzerdefinierte Größen hinzufügen. Nachdem Sie diese registriert haben, generieren Sie die Vorschaubilder für bestehende Bilder neu, damit WordPress die neuen Versionen erstellt.

Bewährte Praktiken bei der Auswahl Ihrer benutzerdefinierten Größen

• Passen Sie die Abmessungen an das Layout Ihres Themes an. Zum Beispiel die Größe des Header-Banners, die Größe des Blog-Beitragsbildes oder die Breite des Bildes im Artikel.
• Vermeiden Sie es, Bilder auf Größen zu skalieren, die viel größer sind als die Container – sie verschwenden Speicherplatz und verlangsamen das Laden.
• Verwenden Sie den Zuschnitt, wenn Sie Bilder mit konsistentem Seitenverhältnis wünschen, z. B. 16:9 oder 4:3. Setzen Sie den Zuschnitt auf true oder false, je nachdem, ob der Zuschnitt oder die proportionale Skalierung bevorzugt wird.
• Testen Sie eingefügte Bilder, nachdem Sie benutzerdefinierte Größen hinzugefügt haben, um sicherzustellen, dass sie auf Desktop und Mobilgeräten korrekt angezeigt werden.

Vorschaubilder neu erzeugen

Wenn Sie die Standardgrößen ändern oder neue Größen hinzufügen, werden für alte Bilder nicht automatisch die neuen Größen erstellt. Verwenden Sie ein Plugin wie "Regenerate Thumbnails" oder ein ähnliches, um alle Bildgrößen für frühere Uploads neu zu erstellen. Dies stellt sicher, dass Ihre Mediathek die richtigen Größen hat, die WordPress in verschiedenen Kontexten bereitstellen kann.

Zusammenfassung der besten Praktiken

• Laden Sie Bilder mit einer Größe nahe der maximalen Anzeigebreite Ihres Themes (z. B. 1200px breit) hoch. Lassen Sie WordPress kleinere Größen erstellen.
• Behalten Sie die Standardgrößen bei 150px (Miniaturansicht), 300px (mittel) und 1024px (groß) bei, es sei denn, Ihr Theme benötigt andere Werte. Ändern Sie dies unter Einstellungen > Medien.
• Fügen Sie benutzerdefinierte Größen über add_image_size() in Ihrem Theme- oder Plugin-Code für einzigartige Anzeigeflächen hinzu (z.B. Hero-Banner, Featured-Blocks).
• Nachdem Sie die Größen angepasst oder neue hinzugefügt haben, regenerieren Sie die Miniaturansichten, damit WordPress diese Größen für alte Uploads erstellt.
• Verwenden Sie das Zuschneiden, wenn ein konsistentes Seitenverhältnis erforderlich ist, oder proportionale Skalierung, wenn Sie die ursprünglichen Proportionen beibehalten möchten.

Zusätzlicher Hinweis: denken Sie an WP Media Folder wenn Sie eine ordnerbasierte Organisation, verbesserte Mediensuche/-filterung, einfachere Galerieerstellung, Medienersetzung und andere Workflow-Verbesserungen benötigen. Es funktioniert nahtlos mit Ihrem Bildgrößen-Setup.

Abschluss: Beherrschen Sie WordPress-Bildgrößen für schnelle, schöne Websites

Das Verständnis für WordPress-Bildgrößen hilft Ihnen, das richtige Bild am richtigen Ort zu verwenden. Die Größen Thumbnail, Medium und Large sind darauf ausgelegt, Qualität und Leistung zu balancieren. Sie können diese Größen anpassen oder neue hinzufügen, um sie an Ihr Theme-Layout anzupassen.WP Media Folder bringt eine Ordnerstruktur, erweiterte Verwaltung, Ersetzungswerkzeuge, Wasserzeichen und Galeriewerkzeuge auf das standardmäßige Mediensystem von WordPress.

Auch wenn Sie sich nicht als technisch versiert betrachten, sind diese Schritte einfach: Passen Sie die Einstellungen unter Medien an, installieren Sie das Regenerierungs-Plugin nach Änderungen, registrieren Sie optional benutzerdefinierte Größen in Ihrem Theme und verwenden Sie WP Media Folder , um Ihre Mediathek effizienter zu organisieren. Auf diese Weise sehen Ihre Bilder großartig aus, laden schnell und sind leicht zu verwalten.