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

Entdecken Sie die Grundlagen der WordPress-Bildgrößenanpassung in diesem leicht verständlichen Einsteigerhandbuch. Erfahren Sie, wie WordPress automatisch Miniatur-, Mittel- und Großbildversionen erstellt, warum diese Größen für das Aussehen und die Leistung Ihrer Website wichtig sind und wie WP Media Folder Ihnen hilft, den Überblick zu behalten.

 Diese Anleitung erklärt die Standard-Bildgrößen von WordPress (Miniaturansicht, mittel, groß), warum sie existieren und wie Sie sie an Ihr Theme anpassen können. Außerdem erfahren Sie, wie das WP Media Folder Plugin Ihnen bei der Verwaltung Ihrer Bilder hilft. Auch ohne technische Kenntnisse ist die Anleitung leicht verständlich. Sie erfahren aber genau, wie WordPress mit Bildgrößen umgeht und wie Sie diese anpassen.

Übersicht über die Standardbildgrößen von WordPress

Wenn Sie ein Bild in WordPress hochladen, werden automatisch mehrere Versionen dieses Bildes erstellt, die an verschiedenen Stellen auf Ihrer Website angezeigt werden. Standardmäßig generiert WordPress:

• Miniaturansicht : eine quadratische Version mit 150 × 150 Pixeln. Wird häufig in Blog-Vorschaulisten, Widgets und Galerien verwendet.
• Mittel : Eine Version, die so skaliert ist, dass die längste Seite 300 Pixel misst. Wenn Ihr Bild höher als breit ist, kann es 300 Pixel hoch und schmaler sein oder umgekehrt.
• Groß : Eine Version, bei der die längste Seite 1024 Pixel misst. Gut geeignet für ausgewählte Bilder in voller Breite oder Überschriften von Blogbeiträgen.
• Vollständig : die genaue Datei, die Sie hochgeladen haben, unverändert.

WordPress wählt die optimale Größe je nach Anzeigeort des Bildes. Ein kleines Vorschaubild in einer Beitragsliste wird in einer Größe von 150 × 150 Pixeln angezeigt; ein hervorgehobenes Bildbanner kann eine maximale Größe von 1024 Pixeln verwenden. Dieses System optimiert Ladegeschwindigkeit, Bandbreitennutzung und Darstellung auf allen Geräten und Bildschirmgrößen.

Warum WordPress diese Größen automatisch generiert

• Um sicherzustellen, dass die Bilder angemessen in die Designbereiche passen (z. B. nicht vergrößert oder unscharf sind).
• Um die Dateigröße zu reduzieren und die Seitenladeleistung zu verbessern, insbesondere auf Mobilgeräten
• Zur Vereinfachung des Arbeitsablaufs für Inhaltsersteller – keine manuelle Größenanpassung erforderlich.

Wenn Ihr hochgeladenes Bild kleiner ist als die von WordPress generierte Größe (z. B. ein 800 Pixel breites Foto), erstellt WordPress nur Größen bis zu den vom Bild unterstützten Abmessungen – die große Größe wird also die Originalgröße nicht überschreiten.

Best Practices für die Verwendung von Standardbildgrößen

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

Miniaturansichten

Verwenden Sie diese Option für Galerieraster, Blogbeitragsvorschauen, Widgets oder Seitenleistenlisten. Verwenden Sie die Miniaturbildgröße nicht für große Anzeigebereiche, da diese sonst verpixelt erscheinen.

Für dieses Beispiel haben wir eine mit dem WP Media foldererstellte Galerie verwendet.

Mittel

Ideal für Inline-Bilder in Blogbeiträgen oder kleineren Bannern. Diese bieten ein gutes Gleichgewicht zwischen Klarheit und Dateigröße.

Große Größe

Verwenden Sie diese Option für Bilder in voller Breite, hervorgehobene Überschriften, Schieberegler oder Vollbildbereiche. Vermeiden Sie die Verwendung von Originalen in voller Größe, es sei denn, dies ist unbedingt erforderlich (z. B. bei qualitativ hochwertigen Fotos), da diese sperrig sein und den Seitenaufbau verlangsamen können.

Das Hochladen sehr großer Originaldateien (z. B. mit einer Breite von mehreren Tausend Pixeln oder hochauflösenden TIFF- oder PNG-Bildern) wird nicht empfohlen. Sie benötigen mehr Speicherplatz und können Ihre Website oder Ihren Medienverarbeitungsserver verlangsamen. Laden Sie Bilder idealerweise in einer Größe hoch, die in etwa der maximalen Anzeigebreite Ihres Designs entspricht (z. B. 1200 Pixel breit, wenn Ihr Inhaltsbereich 1200 Pixel groß ist).

So passen Sie die Bildabmessungen für Ihr Design an

Standardmäßig verwendet WordPress die Größen unter „Einstellungen > Medien“ , aber Sie können diese Größen anpassen oder neue Größen entsprechend den Anforderungen Ihres Designs hinzufügen.

Ändern der Standardabmessungen über die Admin-Bildschirme

Gehe zu deinem WordPress-Dashboard > Einstellungen > Medien. Hier kannst du die Pixelmaße für Miniaturansicht, Mittel und Groß ändern. Speichere die Änderungen. Zukünftige Uploads verwenden dann die neuen Einstellungen.

Bereits hochgeladene Bilder werden jedoch nicht automatisch neu generiert. Wenn Sie die Größe später ändern, müssen Sie ein Plugin zur Miniaturbild-Regeneration verwenden.

Hinzufügen benutzerdefinierter Bildgrößen zu Ihrem Designcode

WICHTIGER HINWEIS: Sie sollten keinen benutzerdefinierten Code anwenden, ohne vorher eine Sicherungskopie zu erstellen.

Um neue Bildgrößen über thumbnail/medium/large hinaus zu registrieren, können Sie Code in die functions.php-Datei Ihres Designs oder in ein benutzerdefiniertes Plugin einfügen. Beispiel:

add_image_size( 'benutzerdefinierte Funktion', 800, 600, true ); 

Dadurch wird eine neue Größe mit dem Namen „Custom-Feature“ mit einer Breite von 800 Pixeln, einer Höhe von 600 Pixeln und aktiviertem Zuschneiden registriert.

Dann können Sie es in Ihren Designdateien aufrufen:

the_post_thumbnail( 'benutzerdefinierte Funktion' ); 

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

Sie können mehrere benutzerdefinierte Größen hinzufügen. Nach der Registrierung werden die Miniaturansichten für vorhandene Bilder neu generiert, damit WordPress die neuen Versionen erstellt.

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

• Passen Sie die Abmessungen an das Layout Ihres Designs an. Beispielsweise die Größe des Header-Banners, die Größe des vorgestellten Blog-Beitrags oder die Breite des Bilds im Artikel.
• Vermeiden Sie es, die Größe von Bildern auf eine Größe zu ändern, die viel größer ist als die von Containern. Dadurch wird Speicherplatz verschwendet und das Laden verlangsamt.
• Verwenden Sie das Zuschneiden, wenn Sie Bilder mit einem einheitlichen Seitenverhältnis wünschen, z. B. 16:9 oder 4:3. Setzen Sie das Zuschneiden auf „true“ oder „false“, je nachdem, ob Sie Zuschneiden oder proportionale Skalierung bevorzugen.
• Testen Sie eingefügte Bilder nach dem Hinzufügen benutzerdefinierter Größen, um sicherzustellen, dass sie auf Desktop-PCs und Mobilgeräten korrekt angezeigt werden.

Miniaturansichten neu generieren

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

Zusammenfassung der Best Practices

• Laden Sie Bilder hoch, deren Größe der maximalen Anzeigebreite Ihres Designs nahekommt (z. B. 1200 Pixel). Lassen Sie WordPress kleinere Größen erstellen.
• Behalten Sie die Standardgrößen bei 150 Pixel (Miniaturansicht), 300 Pixel (mittel) und 1024 Pixel (groß), sofern Ihr Design keine anderen Werte erfordert. Ändern Sie diese unter „Einstellungen“ > „Medien“.
• Fügen Sie über add_image_size() in Ihrem Design- oder Plugin-Code benutzerdefinierte Größen für einzigartige Anzeigebereiche hinzu (z. B. Hero-Banner, vorgestellte Blöcke).
• Nachdem Sie die Größen angepasst oder neue hinzugefügt haben, generieren Sie die Miniaturansichten neu, damit WordPress diese Größen für alte Uploads erstellt.
• Verwenden Sie das Zuschneiden, wenn ein konsistentes Seitenverhältnis erforderlich ist, oder die 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, eine verbesserte Mediensuche/-filterung, eine einfachere Galerieerstellung, Medienaustausch und andere Workflow-Verbesserungen benötigen. Es funktioniert nahtlos mit Ihrem Bildgrößen-Setup.

Zusammenfassung: Meistern Sie die Bildgrößen von WordPress für schnelle, schöne Websites

Das Verständnis der WordPress-Bildgrößen hilft Ihnen, das richtige Bild am richtigen Ort zu präsentieren. Miniaturansicht, mittlere und große Größe bieten ein ausgewogenes Verhältnis von Qualität und Leistung. Sie können diese Größen anpassen oder neue hinzufügen, um sie an Ihr Designlayout anzupassen. WP Media Folder bietet Ordnerstruktur, erweiterte Verwaltung, Ersetzungstools, Wasserzeichen und Galerie-Tools zusätzlich zum Standard-Mediensystem von WordPress.

Auch wenn Sie kein Technik-Experte sind, sind diese Schritte ganz einfach: Passen Sie die Einstellungen unter „Medien“ an, installieren Sie das Regenerations-Plugin nach Änderungen, registrieren Sie optional benutzerdefinierte Größen in Ihrem Theme und nutzen Sie WP Media Folder , um Ihre Medienbibliothek effizienter zu organisieren. So sehen Ihre Bilder toll aus, laden schnell und sind einfach zu verwalten.