Haben Sie jemals ein beeindruckendes Foto mit hoher Auflösung auf Ihre WordPress-Website hochgeladen, nur um festzustellen, dass es enttäuschend klein oder unscharf aussieht? Es ist eine frustrierende Erfahrung, besonders wenn Sie detaillierte Arbeiten wie Fotografie, Kunst oder Produktbilder präsentieren müssen.
Seit Version 5.3 verkleinert WordPress automatisch große Bilder, um die Geschwindigkeit der Website zu verbessern, was eine großartige Funktion ist. Es kann sich jedoch wie ein Hindernis anfühlen, wenn die Bildqualität für Ihr Portfolio oder Ihren Online-Shop unerlässlich ist.
Bei WPBeginner haben wir genau dieses Problem bei unseren eigenen Projekten gelöst. Wir haben gelernt, dass Sie sich nicht zwischen schönen Bildern und einer schnellen Website entscheiden müssen.
In diesem Leitfaden zeigen wir Ihnen vier einfache Möglichkeiten, Bilder in voller Größe in WordPress anzuzeigen, ohne Ihre Website zu verlangsamen.
Wann sollten Sie Vollbild-Bilder in WordPress anzeigen?
Ein Beispiel dafür, wann Sie möglicherweise Bilder in voller Größe in WordPress anzeigen müssen, ist, wenn Sie ein Fotografie-Portfolio oder einen Grafikdesign-Shop betreiben. Wenn Sie Ihre Arbeiten als digitale Downloads verkaufen, möchten Sie möglicherweise große Bilder anzeigen, um potenziellen Kunden deren wahre Qualität zu zeigen.
Selbst wenn Sie einen WooCommerce-Shop für physische E-Commerce-Produkte betreiben, müssen Sie möglicherweise dennoch einige Bilder in voller Größe anzeigen. Sie können ein Produkt-Thumbnail-Bild verwenden, auf das Benutzer dann klicken können, um die Originalgröße des Bildes anzuzeigen und in die Details des Artikels hineinzuzoomen.
Allerdings können große Bilder viele Probleme verursachen. Sie können Ihre Website verlangsamen, was sich dann negativ auf Ihre Suchmaschinenoptimierung (SEO) auswirken kann.
Aus diesem Grund verkleinert WordPress große Bilder beim Hochladen automatisch. Wenn ein Bild größer als 2560 Pixel in der Höhe und/oder Breite ist, skaliert WordPress es proportional auf eine kleinere Größe herunter und behält dabei die ursprünglichen Bildabmessungen bei.
Die meisten WordPress-Hosting-Anbieter begrenzen auch die Dateigröße, die Sie in die Mediathek hochladen können. Dies kann ein Hindernis sein, wenn Sie viele große Bilder anzeigen möchten.
Wenn Sie das Größenlimit ändern möchten, lesen Sie unseren Leitfaden zur Erhöhung der maximalen Dateiuploadgröße in WordPress.
Nun sehen wir uns an, wie Sie Vollbild-Bilder auf Ihrer WordPress-Website anzeigen können. Wir haben 4 Methoden dafür. Einige funktionieren möglicherweise besser für einzelne Bilder, während andere für mehrere besser geeignet sind. Verwenden Sie einfach die unten stehenden Links, um direkt zu Ihrer bevorzugten Methode zu gelangen:
- Methode 1: Verwenden Sie die Vollbild-Bild-URL (am besten für einzelne Bilder)
- Methode 2: Bildskalierung in WordPress deaktivieren (empfohlen für mehrere Dateien)
- Methode 3: Bildskalierung mit einem Plugin deaktivieren (Für absolute Anfänger)
- Methode 4: Vollbreite WordPress-Bilder in einem Lightbox-Fenster öffnen (am besten für Galerien)
- Häufig gestellte Fragen zu Vollbild-Bildern
- Bonus: Optimieren Sie Ihre Bilder für bessere Geschwindigkeit und SEO
Methode 1: Verwenden Sie die Vollbild-Bild-URL (am besten für einzelne Bilder)
Wenn Sie nur ein oder zwei große Bilder auf Ihrer Website anzeigen möchten, können Sie diese einfach über die ursprünglichen Bild-URLs hinzufügen.
Wenn Sie ein Bild hochladen, das die maximalen Abmessungen überschreitet, skaliert WordPress dieses Bild, um eine kleinere Version zu erstellen. Das Originalbild in größerer Größe bleibt jedoch erhalten.
Gehen Sie zuerst im WordPress-Dashboard zu Medien » Mediathek. Stellen Sie sicher, dass Sie Ihre Ansicht auf die Listenansicht ändern.
Bewegen Sie danach Ihre Maus über Ihr großes Bild. Suchen Sie nach demjenigen, dessen Dateiname auf „-scaled“ endet.
Wenn die Schaltfläche 'URL kopieren' erscheint, klicken Sie darauf.
Wenn Sie dies getan haben, können Sie die Bild-URL in die Adressleiste Ihres Browsers einfügen und '-scaled....' vom Ende der Bild-URL löschen. Achten Sie darauf, das Bildformat (.png, .jpg, .gif usw.) nicht zu entfernen.
Wenn die URL des skalierten Bildes also http://example-website.local/wp-content/uploads/2024/03/example-image-scaled.jpg lautet, dann ist Ihre ursprüngliche Bild-URL http://example-website.local/wp-content/uploads/2024/03/example-image.jpg.
Wenn Sie diese URL besuchen, sehen Sie das Bild in seinen ursprünglichen Abmessungen.
Jetzt können Sie das Bild überall auf Ihrer Website hinzufügen. Da wir das Bild über einen Link hinzufügen, müssen Sie es einbetten, anstatt es aus der Mediathek auszuwählen.
Öffnen Sie dazu den Gutenberg-Blockeditor für den Beitrag oder die Seite, auf der Sie das Bild verwenden möchten. Klicken Sie dann auf das Symbol '+ Block hinzufügen', um einen neuen Block hinzuzufügen. Hier können Sie den Bildblock auswählen.
Klicken Sie anschließend auf „Von URL einfügen“.
Sie können dann einfach die URL des vollständigen oder großen Bildes in das Feld einfügen und die Eingabetaste auf Ihrer Tastatur drücken.
Wenn Sie bereit sind, live zu gehen, klicken Sie einfach auf 'Veröffentlichen' oder 'Aktualisieren'. Sie können diese Seite oder diesen Beitrag nun besuchen, um das Bild in voller Größe in Aktion zu sehen.
Um weitere Vollbild-Bilder hinzuzufügen, wiederholen Sie einfach den oben beschriebenen Vorgang.
Methode 2: Bildskalierung in WordPress deaktivieren (empfohlen für mehrere Dateien)
Wenn Sie vorhaben, mehrere große Bilder anzuzeigen, ist die Deaktivierung der automatischen Skalierungsfunktion der beste Ansatz. Sie können dies zwar tun, indem Sie die functions.php-Datei Ihres Themes bearbeiten, aber diese Methode kann riskant sein und Ihre Website beschädigen, wenn Sie einen Fehler machen.
Deshalb empfehlen wir stattdessen die Verwendung des kostenlosen WPCode Plugins. Wie wir in unserem vollständigen WPCode-Testbericht erklären, ist dies der sicherste Weg, Code-Snippets hinzuzufügen, und sie werden bei einem Theme-Update nicht gelöscht.
So verwenden wir es: Bei WPBeginner verwenden wir WPCode, um alle benutzerdefinierten Snippets auf unseren Websites zu verwalten. Es ermöglicht uns, schnell und sicher neue Funktionen hinzuzufügen, ohne das Risiko, unsere Website durch einen Tippfehler in einer Theme-Datei zu beschädigen. Dies ist genau das Tool, das wir für Aufgaben wie diese verwenden.
Zuerst müssen Sie das Plugin installieren und aktivieren. Für diese Methode reicht die kostenlose Version von WPCode aus.
Nach der Aktivierung gehen Sie zu Code Snippets » Snippet hinzufügen. Wählen Sie hier 'Benutzerdefinierten Code hinzufügen (Neues Snippet)' und klicken Sie auf 'Snippet verwenden'.
Geben Sie nun einen Titel für das benutzerdefinierte Code-Snippet ein. Dies dient nur zu Ihrer Information. Öffnen Sie anschließend das Dropdown-Menü „Code-Typ“ und wählen Sie „PHP-Snippet“ aus.
Fügen Sie im Code-Editor den folgenden Code-Schnipsel hinzu:
add_filter( 'big_image_size_threshold', '__return_false' );
Scrollen Sie als Nächstes zum Abschnitt „Einfügung“. Stellen Sie sicher, dass der Speicherort auf „Überall ausführen“ gesetzt ist, damit der Code auf Ihrer gesamten Website funktioniert.
Wenn Sie bereit sind, scrollen Sie zum oberen Bildschirmrand und klicken Sie auf den Umschalter „Inaktiv“, um ihn in „Aktiv“ zu ändern. Klicken Sie abschließend auf „Snippet speichern“, um den Code live zu schalten.
Von nun an verwendet WordPress die Originalabmessungen für jedes große Bild, das Sie hochladen, und gibt Ihnen Zugriff auf die Vollbildversion.
Methode 3: Bildskalierung mit einem Plugin deaktivieren (Für absolute Anfänger)
Wenn Ihnen die Code-Methode zu einschüchternd ist, können Sie die Bildskalierung mit Perfect Images deaktivieren. Dieses kostenlose Plugin ermöglicht es Ihnen, zusätzliche Bildgrößen in WordPress zu erstellen, Ihre Mediendaten zu aktualisieren und vieles mehr.
Zuerst müssen Sie das Perfect Images Plugin installieren und aktivieren. Weitere Details zur Installation eines Plugins finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.
Nach der Aktivierung gehen Sie zu Meow Apps » Perfect Images und aktivieren Sie das Kontrollkästchen 'Deaktivieren' neben 'Image Threshold'.
WordPress wird nun keinem Bild mehr das Attribut „-scaled“ hinzufügen, sodass Sie große Mediendateien hochladen können und WordPress sie standardmäßig in voller Größe anzeigt.
Methode 4: Vollbreite WordPress-Bilder in einem Lightbox-Fenster öffnen (am besten für Galerien)
Die letzte Option ist das Hinzufügen eines vollwertigen Bild-Lightbox zu Ihrer Website. Dies ist perfekt, wenn Sie eine Bildergalerie, einen Slider oder ein Fotoportfolio erstellen.
Diese Methode ermöglicht es Ihnen, beim ersten Laden der Seite kleinere Miniaturbilder anzuzeigen. Besucher können dann auf eine beliebige Miniaturansicht klicken, um das Vollbildbild in einem Popup anzuzeigen.
Beachten Sie nur, dass Sie die Skalierung von Bildern vorher mit einer der oben genannten Methoden deaktivieren müssen. Andernfalls zeigt Ihre Lightbox nur die verkleinerte Version Ihrer Bilder an.
Sobald Sie das Skalieren deaktiviert haben, ist es an der Zeit, eine Galerie zu erstellen. Wir empfehlen die Verwendung von Envira Gallery. Wie wir in unserem vollständigen Envira Gallery-Test erklären, ist es das beste Bildgalerie-Plugin für WordPress aufgrund seiner Leistungsfähigkeit und Benutzerfreundlichkeit.
Nach der Installation und Aktivierung von Envira können Sie unserer Schritt-für-Schritt-Anleitung folgen, wie Sie eine Galerie mit einem Lightbox-Effekt in WordPress hinzufügen.
Eine weitere großartige Option ist NextGEN Gallery. Wir fanden dieses Plugin ausgezeichnet für professionelle Fotografen oder Künstler, die erweiterte Funktionen benötigen, um ihre Arbeiten professionell anzuzeigen und zu verkaufen.
Häufig gestellte Fragen zu Vollbild-Bildern
Bei WPBeginner erhalten wir häufig Fragen zur Verwaltung von Bildern in WordPress. Hier sind einige der häufigsten Fragen zur Anzeige in voller Größe.
Wird die Anzeige von Bildern in voller Größe meine Website verlangsamen?
Ja, große Bilddateien können Ihre Seitenladezeiten erhöhen, was sich negativ auf die Benutzererfahrung und das SEO auswirken kann. Deshalb ist es sehr wichtig, Ihre Bilder für das Web zu optimieren, bevor Sie sie hochladen, auch wenn Sie sie in voller Größe anzeigen.
Was ist der einfachste Weg, ein einzelnes Vollbild anzuzeigen?
Die einfachste Methode ist die Verwendung der direkten URL des Originalbilds. Wenn WordPress eine skalierte Version erstellt, behält es die Originaldatei, die Sie dann mit dem Bildblock einbetten können.
Ist es besser, ein Plugin oder Code zu verwenden, um die Skalierung von Bildern zu deaktivieren?
Für die meisten Benutzer, insbesondere für Anfänger, ist die Verwendung eines Plugins wie WPCode die sicherste Option. Das direkte Hinzufügen von Code zu Ihren Theme-Dateien kann Ihre Website beschädigen, wenn es nicht korrekt durchgeführt wird, während ein Plugin dies in einer sicheren Umgebung handhabt.
Kann ich eine Miniaturansicht anzeigen, die beim Klicken das Bild in voller Größe öffnet?
Absolut. Die Verwendung eines Lightbox-Galerie-Plugins wie Envira Gallery ist der beste Weg, dies zu tun. Besucher sehen kleinere, schnell ladende Thumbnails und können auf die hochauflösende Version in einem Popup klicken.
Bonus: Optimieren Sie Ihre Bilder für bessere Geschwindigkeit und SEO
Die Anzeige von Bildern in voller Größe kann großartig sein, um Ihre Arbeit zu präsentieren, aber große Grafiken können die Ladezeiten Ihrer Website verlangsamen und sich negativ auf Ihre SEO auswirken.
Aus diesem Grund empfehlen wir dringend, Ihre Bilder für die Leistung zu optimieren. Ein Plugin wie EWWW Image Optimizer kann helfen, indem es Ihre Dateien komprimiert, um sie kleiner und schneller zu laden.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Bilder in voller Größe in WordPress anzeigen. Für weitere Tipps zur Verwaltung Ihrer Mediendateien und zur Verbesserung Ihrer Website können Sie unsere anderen Anleitungen erkunden:
- So optimieren Sie Bilddateien ganz einfach für das Web, ohne Qualitätsverlust
- Leitfaden für Anfänger zur Bild-SEO – Bilder für Suchmaschinen optimieren
- Bilder in WordPress einfach per Lazy Load laden
- Möglichkeiten, Bilddiebstahl in WordPress zu verhindern
- Text über einem Bild in WordPress hinzufügen
- Großartige WordPress-Plugins zur Verwaltung von Bildern (aktualisiert)
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Jiří Vaněk
Der Nachteil der Anzeige eines großen Bildes ist offensichtlich. Es verbraucht viele Daten, insbesondere für Personen mit mobilen Geräten, und das Bild wird sowieso auf die Anzeigegröße angepasst. Ich habe mich daran gewöhnt, stattdessen Galerien zu verwenden. Wenn ich ein Bild in voller Größe anzeigen möchte, füge ich eine Galerie in den Beitrag ein, auch wenn es nur ein Bild ist. Auf diese Weise gibt es im Artikel eine Miniaturansicht, auf die jeder klicken kann, um das Bild in voller Größe anzuzeigen. Ich finde es praktisch, und der Benutzer kann wählen, ob er das Bild in voller Größe sehen möchte oder nicht. Die besten Werkzeuge dafür sind meiner Meinung nach Elementor oder Envira Gallery.
Mohammad Sharfuddin
Ich habe auch gesehen, dass Bilder automatisch um mindestens 15 % an allen Ecken beschnitten werden, wenn sie als Bildblock in einen Blogbeitrag eingefügt werden. Gibt es eine Methode, dies zu verhindern?
Dilip Waghmode
Ich habe Bilder mit einer Größe von 10-14 MB auf die Website hochgeladen.
Und WordPress hat die Bilder in einer maximalen Größe von 3-4 MB übernommen.
Damit der Benutzer das Bild in Originalgröße, z. B. 10 MB, herunterladen kann.
Bitte lassen Sie es mich wissen
Danke
WPBeginner Support
Es würde davon abhängen, welche Plugins Sie auf Ihrer Website haben, die die Bildgröße ändern könnten, aber Sie könnten die integrierte Bildkomprimierung deaktivieren, indem Sie unserer Anleitung unten folgen:
https://www.wpbeginner.com/wp-tutorials/how-to-increase-or-decrease-wordpress-jpeg-image-compression/
Admin