{"id":197032,"date":"2024-10-22T05:52:07","date_gmt":"2024-10-22T05:52:07","guid":{"rendered":"https:\/\/www.bluehost.com\/blog\/wordpress-bildgroessen-vollstaendige-anleitung-zur-optimierung-ihrer-bilder\/"},"modified":"2025-05-15T17:52:20","modified_gmt":"2025-05-15T17:52:20","slug":"wordpress-bildgroessen-vollstaendige-anleitung-zur-optimierung-ihrer-bilder","status":"publish","type":"post","link":"https:\/\/www.bluehost.com\/blog\/de\/wordpress-bildgroessen-vollstaendige-anleitung-zur-optimierung-ihrer-bilder\/","title":{"rendered":"WordPress Bildgr\u00f6\u00dfen: Vollst\u00e4ndige Anleitung zur Optimierung Ihrer Bilder"},"content":{"rendered":"\n
Die Verwaltung von Bildern in WordPress ist entscheidend f\u00fcr eine gut funktionierende und visuell ansprechende Website. Ein wichtiger Aspekt dabei ist das Verstehen und Optimieren von Bildgr\u00f6\u00dfen. Von der Handhabung der WordPress-Standardbildgr\u00f6\u00dfen bis hin zur Erstellung neuer benutzerdefinierter Bildgr\u00f6\u00dfen – wenn Sie wissen, wie Sie Ihre Bilder anpassen und verwalten k\u00f6nnen, wird Ihre Website reibungslos funktionieren und professionell aussehen. <\/p>\n\n
In diesem Leitfaden erfahren Sie alles, was Sie \u00fcber die Handhabung von WordPress-Bildern wissen m\u00fcssen, einschlie\u00dflich der \u00c4nderung von Standard-Bildgr\u00f6\u00dfen, der Erstellung von benutzerdefinierten Abmessungen, der Neugenerierung von Thumbnails und der Optimierung Ihrer Bilder f\u00fcr Performance und SEO. Tauchen wir ein in die Details der Arbeit mit Bildern in WordPress und wie man sicherstellt, dass sie f\u00fcr die besten Ergebnisse optimiert sind. <\/p>\n\n
Verst\u00e4ndnis der WordPress-Bildgr\u00f6\u00dfen<\/h2>\n\n
Wenn Sie Bilder in Ihre WordPress-Mediathek hochladen, generiert WordPress automatisch mehrere verschiedene Bildgr\u00f6\u00dfen f\u00fcr jedes vorgestellte Bild. Mit dieser Funktion kann Ihre Website je nach Kontext, in dem das Bild angezeigt wird, die am besten geeignete Gr\u00f6\u00dfe verwenden, was sowohl die Leistung als auch das Erscheinungsbild verbessert. <\/p>\n\n
Was sind die Standard-Bildgr\u00f6\u00dfen von WordPress?<\/h3>\n\n
Standardm\u00e4\u00dfig erstellt WordPress die folgenden Bildgr\u00f6\u00dfen, wenn Sie ein Bild hochladen:<\/p>\n\n
\n
Gr\u00f6\u00dfe der Vorschaubilder<\/strong>: 150×150 Pixel<\/li>\n\n\n\n
Volle Gr\u00f6\u00dfe<\/strong>: Das hochgeladene Originalbild<\/li>\n<\/ul>\n\n
Diese Standard-Bildgr\u00f6\u00dfen werden an verschiedenen Stellen auf Ihrer Website verwendet, z. B. f\u00fcr Bilder, die in Galerien und Beitrags-Thumbnails angezeigt werden. Diese Gr\u00f6\u00dfen helfen WordPress dabei, Bilder korrekt darzustellen. Sie k\u00f6nnen jedoch an Ihre spezifischen Bed\u00fcrfnisse angepasst werden, sei es aus \u00e4sthetischen oder Leistungsgr\u00fcnden. Die Anpassung dieser Gr\u00f6\u00dfen ist einfach und gew\u00e4hrleistet eine bessere Konsistenz Ihrer Inhalte. <\/p>\n\n
Jede WordPress-Standardbildgr\u00f6\u00dfe spielt eine Rolle dabei, wie die Bilder in den verschiedenen Bereichen Ihrer Website angezeigt werden:<\/p>\n\n
\n
Die Thumbnail-Gr\u00f6\u00dfe wird in Galerien oder Widget-Bereichen verwendet.<\/li>\n\n\n\n
Die mittlere Gr\u00f6\u00dfe eignet sich gut f\u00fcr inhaltsinterne Grafiken in Blogbeitr\u00e4gen.<\/li>\n\n\n\n
Das Gro\u00dfformat kann f\u00fcr Bilder in voller Breite verwendet werden.<\/li>\n\n\n\n
Die volle Gr\u00f6\u00dfe gew\u00e4hrleistet, dass Sie bei Bedarf das urspr\u00fcngliche, unver\u00e4nderte Bild anzeigen k\u00f6nnen.<\/li>\n<\/ul>\n\n
Diese vordefinierten Gr\u00f6\u00dfen tragen dazu bei, ein einheitliches Erscheinungsbild aufrechtzuerhalten und die Geschwindigkeit der Website zu verbessern, indem die f\u00fcr den jeweiligen Kontext am besten geeignete Bildgr\u00f6\u00dfe angezeigt wird.<\/p>\n\n
Wie man die WordPress-Bildgr\u00f6\u00dfen \u00e4ndert<\/h2>\n\n
Gehen Sie folgenderma\u00dfen vor, um die Standard-Bildgr\u00f6\u00dfen von WordPress zu \u00e4ndern:<\/p>\n\n
\n
Melden Sie sich in Ihrem WordPress-Dashboard an.<\/li>\n\n\n\n
Navigieren Sie zu Einstellungen > Medien.<\/li>\n<\/ul>\n\n<\/figure>\n\n
\n
Hier finden Sie Einstellungen f\u00fcr die Gr\u00f6\u00dfe der Miniaturansicht, mittlere Gr\u00f6\u00dfe und gro\u00dfe Gr\u00f6\u00dfe. Passen Sie diese Gr\u00f6\u00dfen nach Bedarf an. <\/li>\n<\/ul>\n\n<\/figure>\n\n
\n
Klicken Sie anschlie\u00dfend auf \u00c4nderungen speichern.<\/li>\n<\/ul>\n\n<\/figure>\n\n
Es ist wichtig zu beachten, dass sich die \u00c4nderung dieser Einstellungen nur auf zuk\u00fcnftige Uploads auswirkt. Wenn Sie die \u00c4nderungen auf bereits hochgeladene Bilder anwenden m\u00f6chten, m\u00fcssen Sie die Miniaturbilder neu generieren, was wir sp\u00e4ter erkl\u00e4ren werden. Die Anpassung der Standardbildgr\u00f6\u00dfe tr\u00e4gt dazu bei, die Einheitlichkeit zu wahren, insbesondere bei verschiedenen Bildtypen, wie z. B. vorgestellten Bildern oder Bildern f\u00fcr Blogbeitr\u00e4ge. <\/p>\n\n
Die Standardbildgr\u00f6\u00dfen entsprechen m\u00f6glicherweise nicht den Anforderungen jeder Website. Es gibt F\u00e4lle, in denen Sie benutzerdefinierte Bildgr\u00f6\u00dfen ben\u00f6tigen, z. B. f\u00fcr einen Slider, eine Galerie oder bestimmte Post-Layouts. Benutzerdefinierte Gr\u00f6\u00dfen k\u00f6nnen die Leistung der Website optimieren, ein responsives Design gew\u00e4hrleisten und Ihnen eine bessere Kontrolle dar\u00fcber geben, wie Ihre Bilder auf verschiedenen Ger\u00e4ten und in verschiedenen Kontexten angezeigt werden. <\/p>\n\n
Hinzuf\u00fcgen von benutzerdefinierten Bildgr\u00f6\u00dfen<\/h3>\n\n
Sie k\u00f6nnen eine eigene Bildgr\u00f6\u00dfe hinzuf\u00fcgen, indem Sie die Datei functions.php Ihres Themes \u00e4ndern. So geht’s: <\/p>\n\n
\n
Gehen Sie in Ihrem WordPress-Dashboard zu Erscheinungsbild > Theme-Editor.<\/li>\n<\/ol>\n\n<\/figure>\n\n
\n
\u00d6ffnen Sie die Datei functions.php.<\/li>\n<\/ul>\n\n<\/figure>\n\n
3. F\u00fcgen Sie den folgenden Code hinzu, um eine neue benutzerdefinierte Bildgr\u00f6\u00dfe zu erstellen:<\/p>\n\n
custom-size-name“ ist die eindeutige Kennung f\u00fcr Ihre neue Gr\u00f6\u00dfe.<\/li>\n\n\n\n
800 ist die Breite und 600 ist die H\u00f6he.<\/li>\n\n\n\n
true sorgt daf\u00fcr, dass das Bild auf genau diese Ma\u00dfe zugeschnitten wird.<\/li>\n<\/ul>\n\n
Nach dem Speichern der Datei erstellt WordPress neue Bilder in dieser Gr\u00f6\u00dfe, wenn Sie ein Bild hochladen. Um diese benutzerdefinierte Bildgr\u00f6\u00dfe in Ihrem Theme anzuzeigen, verwenden Sie: <\/p>\n\n
M\u00f6glicherweise m\u00f6chten Sie f\u00fcr bestimmte Zwecke benutzerdefinierte Bildgr\u00f6\u00dfen, wie z. B.:<\/p>\n\n
\n
Hervorgehobene Bilder:<\/strong> Eine Gr\u00f6\u00dfe von etwa 1200×630 Pixeln eignet sich gut f\u00fcr Blogbeitr\u00e4ge und ist auch ideal f\u00fcr die Freigabe in sozialen Medien.<\/li>\n\n\n\n
Logo-Bilder:<\/strong> Logos sind in der Regel am besten 200×100 Pixel gro\u00df, damit sie klar sind, ohne zu gro\u00df zu sein.<\/li>\n\n\n\n
Hintergrundbilder:<\/strong> Vollbild-Hintergr\u00fcnde sollten mindestens 1920×1080 Pixel gro\u00df sein, damit sie auf gro\u00dfen Bildschirmen scharf dargestellt werden.<\/li>\n<\/ul>\n\n
Die Verwendung dieser benutzerdefinierten Bildgr\u00f6\u00dfen verbessert sowohl die Leistung als auch die Benutzerfreundlichkeit, da unn\u00f6tige Bildmengen reduziert werden und gleichzeitig ein hochwertiges Erscheinungsbild erhalten bleibt.<\/p>\n\n
Neugenerierung von Miniaturansichten und benutzerdefinierte Bildgr\u00f6\u00dfe<\/h2>\n\n
Warum die Regeneration von Miniaturbildern notwendig ist<\/h3>\n\n
Wenn Sie die Standardbildgr\u00f6\u00dfen \u00e4ndern oder neue benutzerdefinierte Bildgr\u00f6\u00dfen hinzuf\u00fcgen, passt WordPress die Gr\u00f6\u00dfe der bereits hochgeladenen Bilder nicht automatisch an. Um Ihre neuen Bildgr\u00f6\u00dfen auf vorhandene Bilder anzuwenden, m\u00fcssen Sie die Miniaturbilder neu generieren. <\/p>\n\n
Wie man Miniaturansichten regeneriert<\/h3>\n\n
Am einfachsten lassen sich die Miniaturbilder mit dem Plugin „Regenerate Thumbnails“ neu generieren. So geht’s: <\/p>\n\n
\n
Gehen Sie zu Plugins, f\u00fcgen Sie ein neues Plugin hinzu und installieren und aktivieren Sie dann das Plugin Regenerate Thumbnails.<\/li>\n<\/ul>\n\n<\/figure>\n\n
\n
Gehen Sie zuWerkzeuge > Miniaturansichten neu generieren.<\/strong><\/li>\n<\/ul>\n\n<\/figure>\n\n
\n
Klicken Sie auf Vorschaubilder f\u00fcr alle Anh\u00e4nge neu generieren, um die Gr\u00f6\u00dfe der vorhandenen Bilder an die neuen Gr\u00f6\u00dfen anzupassen.<\/li>\n<\/ul>\n\n<\/figure>\n\n
Dieser Schritt ist wichtig, um sicherzustellen, dass die Gr\u00f6\u00dfe aller Bilder auf Ihrer Website entsprechend den aktualisierten Einstellungen angepasst wird, insbesondere wenn Sie benutzerdefinierte Bildgr\u00f6\u00dfen f\u00fcr neue Layouts oder Designanforderungen hinzugef\u00fcgt haben.<\/p>\n\n
Manuelle Methode zur Regeneration von Miniaturbildern<\/h3>\n\n
Wenn Sie kein Plugin verwenden m\u00f6chten, k\u00f6nnen Sie die Thumbnails auch manuell mit WP-CLI, einem Kommandozeilen-Tool, neu generieren. Der Befehl lautet: <\/p>\n\n
wp media regenerate<\/code><\/p>\n\n
Diese Methode ist ideal f\u00fcr Benutzer, die mit WP-CLI vertraut sind, denn sie erm\u00f6glicht es ihnen, alle Bilder auf die neuen Bildgr\u00f6\u00dfen zu aktualisieren, ohne zus\u00e4tzliche Plugins zu installieren.<\/p>\n\n
Die Auswahl der besten Bildformate f\u00fcr WordPress<\/h2>\n\n
Die Wahl des richtigen Formats f\u00fcr Ihre WordPress-Bilder ist wichtig, um sowohl die Bildqualit\u00e4t als auch die Leistung der Website zu optimieren. Hier finden Sie einen \u00dcberblick \u00fcber die am h\u00e4ufigsten verwendeten Bilddateiformate: <\/p>\n\n
\n
JPEG: <\/strong>Am besten geeignet f\u00fcr Fotos und Bilder mit vielen Farben und bietet ein gutes Gleichgewicht zwischen Qualit\u00e4t und Dateigr\u00f6\u00dfe.<\/li>\n\n\n\n
PNG:<\/strong> Ideal f\u00fcr Bilder, die Transparenz erfordern, z. B. Logos oder Icons.<\/li>\n\n\n\n
GIF: <\/strong>Geeignet f\u00fcr einfache Animationen oder Bilder mit wenigen Farben.<\/li>\n\n\n\n
WebP:<\/strong> Ein neueres Format, das eine hohe Komprimierung bei minimalem Qualit\u00e4tsverlust bietet, aber nicht von allen Browsern unterst\u00fctzt wird.<\/li>\n<\/ul>\n\n
Durch die Wahl des richtigen Formats wird sichergestellt, dass Ihre Bilder schnell geladen werden, ohne dass die Qualit\u00e4t darunter leidet, vor allem, wenn Sie besondere Bilder und andere wichtige visuelle Elemente auf Ihrer Website anzeigen m\u00f6chten.<\/p>\n\n
Optimierung der Bildgr\u00f6\u00dfen f\u00fcr die Leistung<\/h2>\n\n
Warum Bildoptimierung wichtig ist<\/h3>\n\n
Die Optimierung der Bildgr\u00f6\u00dfen ist entscheidend f\u00fcr die Verringerung der Dateigr\u00f6\u00dfen und die Verbesserung der Ladezeiten, was sich direkt auf die Leistung Ihrer Website und die Nutzererfahrung auswirkt. Gro\u00dfe, unkomprimierte Bilder k\u00f6nnen die Ladegeschwindigkeit einer Seite verlangsamen und sich negativ auf die Suchmaschinenoptimierung und die Nutzerbindung auswirken. <\/p>\n\n
Wie man Bilder optimiert<\/h3>\n\n
Um Ihre WordPress-Bilder zu optimieren, sollten Sie diese Best Practices befolgen:<\/p>\n\n
\n
Komprimieren Sie Bilder vor dem Hochladen:<\/strong> Verwenden Sie Tools wie TinyPNG oder JPEG-Optimizer, um die Dateigr\u00f6\u00dfe ohne Qualit\u00e4tsverlust zu reduzieren.<\/li>\n\n\n\n
Verwenden Sie Plugins zur Bildoptimierung:<\/strong> Plugins wie Smush oder ShortPixel k\u00f6nnen Bilder beim Hochladen automatisch komprimieren und sicherstellen, dass sie f\u00fcr das Web optimiert sind.<\/li>\n\n\n\n
\u00c4ndern Sie die Gr\u00f6\u00dfe der Bilder entsprechend:<\/strong> Vermeiden Sie das Hochladen von \u00fcbergro\u00dfen Bildern. Wenn Ihr Beitrag ein Bild erfordert, das nur 800 Pixel breit ist, laden Sie keine Bilder hoch, die 2000 Pixel breit sind. <\/li>\n<\/ul>\n\n
Wenn Sie diese Schritte befolgen, optimieren Sie die Bildgr\u00f6\u00dfen auf Ihrer WordPress-Website und sorgen f\u00fcr schnellere Ladezeiten und eine bessere Gesamtleistung.<\/p>\n\n
Empfohlene Bildgr\u00f6\u00dfen f\u00fcr verschiedene WordPress-Abschnitte<\/h2>\n\n
Die Wahl der richtigen Bildgr\u00f6\u00dfe f\u00fcr die verschiedenen Bereiche Ihrer Website ist entscheidend f\u00fcr ein ansprechendes Erscheinungsbild.<\/p>\n\n
\n
Blog-Beitr\u00e4ge:<\/strong> In Blog-Beitr\u00e4gen eingebettete Bilder sollten in der Regel zwischen 600 und 800 Pixel breit sein.<\/li>\n\n\n\n
Hervorgehobene Bilder:<\/strong> Wie bereits erw\u00e4hnt, ist eine Gr\u00f6\u00dfe von 1200×630 Pixeln f\u00fcr die meisten Featured Images gut geeignet.<\/li>\n\n\n\n
Logo-Bilder:<\/strong> Logos sind in der Regel etwa 200×100 Pixel gro\u00df.<\/li>\n\n\n\n
Freigabe in sozialen Medien:<\/strong> Um sicherzustellen, dass die Bilder beim Teilen in sozialen Medien richtig angezeigt werden, sollten Sie ein Seitenverh\u00e4ltnis von 16:9 und eine Gr\u00f6\u00dfe von etwa 1200×630 Pixel w\u00e4hlen.<\/li>\n\n\n\n
Galerien und Schieberegler:<\/strong> Bei Galerien oder Schiebereglern \u00fcber die gesamte Breite sollten die Bilder mindestens 1000-1200 Pixel breit sein, um eine hohe Qualit\u00e4t zu gew\u00e4hrleisten.<\/li>\n<\/ul>\n\n
Diese empfohlenen Bildgr\u00f6\u00dfen sorgen f\u00fcr ein einheitliches, professionelles Erscheinungsbild Ihrer WordPress-Website.<\/p>\n\n
Optimierung von WordPress-Bildern f\u00fcr SEO<\/h2>\n\n
![\"Zu](\"https:\/\/www.bluehost.com\/de-de\/blog\/wp-content\/uploads\/2024\/10\/WP-dashboard-1-1024x526.png\")
<\/figure>\n\n![\"Medieneinstellungen](\"https:\/\/www.bluehost.com\/de-de\/blog\/wp-content\/uploads\/2024\/10\/WP-dashboard-media.webp\")
<\/figure>\n\n![\"Klicken](\"https:\/\/www.bluehost.com\/de-de\/blog\/wp-content\/uploads\/2024\/10\/Save-changes.webp\")
<\/figure>\n\n![\"Zum](\"https:\/\/www.bluehost.com\/de-de\/blog\/wp-content\/uploads\/2024\/10\/Appearance.webp\")
<\/figure>\n\n![\"Öffnen](\"https:\/\/www.bluehost.com\/de-de\/blog\/wp-content\/uploads\/2024\/10\/edit-themes.webp\")
<\/figure>\n\n![\"Installieren](\"https:\/\/www.bluehost.com\/de-de\/blog\/wp-content\/uploads\/2024\/10\/new-plugins.webp\")
<\/figure>\n\n![\"Zu](\"https:\/\/www.bluehost.com\/de-de\/blog\/wp-content\/uploads\/2024\/10\/Tools.webp\")
<\/figure>\n\n![\"Klicken](\"https:\/\/www.bluehost.com\/de-de\/blog\/wp-content\/uploads\/2024\/10\/regenrate.webp\")
<\/figure>\n\n