Möchten Sie Bilder auf Ihre WordPress-Site hochladen, sind sich aber nicht sicher, welche Größen oder Dateitypen die Bilder haben sollten? Sind Sie mit dem Prozess der Größenänderung und Komprimierung von Bildern für das Web nicht vertraut? In diesem Artikel erkläre ich, warum die Verwendung der richtigen Bildgröße für Ihre Website wichtig ist, und zeige Ihnen, wie Sie Ihre Bilder mit dem kostenlosen Bildbearbeitungsprogramm GIMP skalieren und komprimieren.
Warum es wichtig ist, die Größe der Bilder Ihrer Website zu ändern
Beginnen wir damit, warum die Größenänderung der Bilder Ihrer Website so wichtig ist.
Laut WordPress.org, spielt die „physische Gesamtgröße“ eines Bildes eine große Rolle für die Leistung einer Website-Seite. „Die Dateigröße [eines Bildes] bestimmt die Zeit, die zum Laden Ihrer Seite benötigt wird; Je größer die Dateigröße … desto länger dauert das Laden [einer Seite]. Mit anderen Worten, das Hochladen einer großen Dateigröße auf Ihre Website verlangsamt die Leistung der Seite, zu der Sie den Inhalt hinzufügen, was normalerweise als langsamere Seitenladegeschwindigkeiten in den Analysedaten Ihrer Website angezeigt wird.
„Die Dateigröße [eines Bildes] bestimmt die Zeit, die zum Laden Ihrer Seite benötigt wird; Je größer die Dateigröße … desto länger dauert das Laden [einer Seite].
-WordPress.org
Seitenladegeschwindigkeit, auch einfach als „Geschwindigkeit Seite“, ist „wie schnell der Inhalt Ihrer Seite geladen wird“, so die SEO-Site Moz. Langsamere Seiten können zu höheren „Bounce-Raten“, eine ausgefallene Metrik, die Sitzungen darstellt, bei denen ein Website-Besucher Ihre Website verlässt, nachdem er eine einzelne Seite angesehen hat. Langsamere Seiten können auch die Zeit verkürzen, die Besucher auf den Seiten Ihrer Website verbringen, da Benutzer möglicherweise ungeduldig darauf warten, dass der Inhalt einer Seite geladen wird, und Ihre Website schneller verlassen.
Diese Messwerte sind wichtig, da Sie normalerweise möchten, dass Benutzer mehr Zeit auf Ihrer Website verbringen und sich mehr Seiten auf Ihrer Website ansehen.
Sie sind auch deshalb wichtig, weil sie eine Rolle dabei spielen, wie Ihre Website auf den Ergebnisseiten von Suchmaschinen oder „SERPs“ platziert wird. SERPs sind einfach die Ergebnisseiten, die angezeigt werden, wenn Sie ein Wort oder einen Satz in Google eingeben und die Eingabetaste drücken. Da größere Bilder auf schlechte Webdesign-Praktiken hinweisen und die Erfahrung des Benutzers auf Ihrer Website negativ beeinflussen, können Suchmaschinen wie Google dies möglicherweise tun bestrafen Ihre Website für diese größeren Bilder und Rangieren Sie Ihre Website unter anderen Websites, die eine bessere Leistung erbringen.
Je niedriger Ihre Website beispielsweise bei Google rankt, desto weniger Traffic erhält Ihre Website und desto mehr Traffic geht an Ihre Konkurrenten, die in den Suchergebnissen über Ihnen ranken.
Indem Sie die Dateigröße Ihrer Bilder auf Ihrer Website reduzieren, können Sie Ihre verbessern Geschwindigkeit Seite und damit andere Metriken wie verbessern Absprungrate funktioniert Zeit auf Seitee, um letztendlich Ihre Platzierungen in Suchmaschinen zu verbessern.
Beachten Sie, dass es viele andere wichtige Variablen gibt, die in die Suchrankings einfließen, sodass das Korrigieren Ihrer Bilder nur ein Teil eines Solids ist SEO (Suchmaschinenoptimierung) Strategie. Es ist jedoch sicherlich sehr wichtig, dass Sie Ihrer Website dabei helfen, auf Orten wie Google einen höheren Rang einzunehmen, um den Traffic Ihrer Website zu erhöhen.
So ändern Sie die Größe von Bildern für WordPress in GIMP
Wie ändert man also die Größe von Bildern für WordPress richtig?
Sie können die Dateigröße eines Bildes verringern, indem Sie einfach die Gesamtgröße des Bildes mit verringern Skalierung funktioniert Zuschneiden bevor Sie es auf Ihre Website hochladen. Außerdem können Sie anwenden, was „Kompression“ zu Ihrem Bild hinzufügen, um es weiter zu verkleinern.
GIMP, der kostenlose Open-Source-Fotoeditor, kann all diese Aufgaben erledigen und gleichzeitig in empfohlene Dateiformate der „nächsten Generation“ exportieren, um die Dateigröße Ihrer Bilder weiter zu verringern und die Leistung Ihrer Website zu verbessern.
Skalieren Sie Ihr Bild
Um mit diesem Vorgang zu beginnen, öffnen Sie das Bild, das Sie auf Ihre Website hochladen möchten, in GIMP. Sie können dies tun, indem Sie Ihr Bild von Ihrem Computer in das Bildfenster von GIMP ziehen und dort ablegen, oder Sie können einfach zu Datei>Öffnen gehen, wenn Sie sich in GIMP befinden.
Wenn Sie die Methode Datei>Öffnen verwenden, navigieren Sie im angezeigten Dialogfeld „Bild öffnen“ zum Speicherort des Bilds auf Ihrem Computer und doppelklicken Sie auf die Bilddatei, sobald Sie sie gefunden haben, um sie in GIMP zu öffnen (oder klicken Sie auf die Schaltfläche „Öffnen“ in der unteren rechten Ecke des Dialogfensters).
Ganz oben im GIMP-Fenster befindet sich eine Funktion namens „Titelleiste“ (roter Pfeil im Bild oben). Hier sehen Sie die aktuellen Abmessungen Ihres Bildes (vergrößerter grüner Kasten auf dem Foto). Mein Bild hat die Größe 1920×1280 – wobei die erste Zahl, 1920, die Breite meines Bildes (in Pixel) und die zweite Zahl, 1280, die Höhe meines Bildes darstellt. Die endgültigen Bildabmessungen, die Sie für Ihr Bild verwenden möchten, hängen davon ab, wo in WordPress Sie das Bild verwenden möchten, sowie davon, welches Thema Sie verwenden.
Für dieses Tutorial skaliere ich mein Bild auf die Standardgröße von 1200 x 630 Pixel, die für Bilder von Blogbeiträgen empfohlen wird.
Vor diesem Hintergrund möchte ich als Erstes mein Bild so zuschneiden, dass das Seitenverhältnis meines Originalbilds dem Seitenverhältnis der empfohlenen Größe entspricht. Dazu greife ich zu meinem Zuschneidewerkzeug, indem ich auf meiner Tastatur Umschalt + C drücke oder in der GIMP-Toolbox auf das Zuschneidewerkzeugsymbol klicke (roter Pfeil im Bild oben).
Als Nächstes aktiviere ich in den Werkzeugoptionen für dieses Werkzeug das Kontrollkästchen neben „Fest“ (grüner Pfeil) und klicke auf das Dropdown-Menü, um „Seitenverhältnis“ (blauer Pfeil) auszuwählen.
Ich gebe „1200:630“ ein, um mein Seitenverhältnis in das Textfeld unter der Dropdown-Liste (gelber Pfeil) einzustellen. Dies entspricht dem Seitenverhältnis der empfohlenen Bildgröße, die ich für mein endgültiges Bild haben möchte.
Mit dem Zuschneidewerkzeug klicke ich jetzt und ziehe meine Maus über das Bild, um den Zuschneidebereich zu zeichnen. Wenn ich meine Maus loslasse, wird alles außerhalb des Zuschneidebereichs abgeblendet (roter Pfeil im Bild oben – vorausgesetzt, „Hervorheben“ ist in den Werkzeugoptionen aktiviert, was normalerweise standardmäßig der Fall ist).
Standardmäßig sind in meinem Zuschneidebereich die Hilfslinien als „Mittellinien“ festgelegt (gelber Pfeil im Bild oben). Ich kann diese Einstellung über das Dropdown-Menü der Hilfslinien unten in den Werkzeugoptionen ändern. Zum Beispiel ändere ich meine Hilfslinien in „Drittelregel“ (grüner Pfeil). Die verschiedenen Führungsoptionen hier basieren auf fotografischen Prinzipien, was es einfach macht, Ihre Komposition unter Verwendung dieser Prinzipien zu gestalten.
Sie können Ihre Maus über eine der Seiten oder Ecken des Zuschneidebereichs bewegen (dh den hervorgehobenen Bereich, der durch den roten Pfeil in der Abbildung oben gekennzeichnet ist), dann klicken und ziehen, um die Größe der Begrenzung des Zuschneidebereichs zu ändern. Beachten Sie, dass Sie die Größe Ihres Zuschneidebereichs immer in den Feldern „Größe“ in den Werkzeugoptionen sehen können (im Bild oben grün umrandet). Sie sollten die Gesamtgröße des Zuschneidebereichs größer als die endgültige Größe des Bildes von 1200 × 630 halten.
Sie können auch mit der Maus in die Mitte des Zuschneidebereichs (roter Pfeil) klicken und ziehen, um den Zuschnitt auf dem Bild neu zu positionieren.
Sobald Sie bereit sind, das Bild zuzuschneiden, klicken Sie einmal in den Zuschneidebereich und Ihr Bild wird zugeschnitten.
Beachten Sie, dass, wenn die Option „Beschnittene Pixel löschen“ in den Werkzeugoptionen deaktiviert ist (grüner Pfeil im Bild oben), Ihre ursprüngliche Bildgrenze immer noch mit einer gelben gepunkteten Linie (roter Pfeil) um Ihr Bild herum angezeigt wird. Sie können das Originalbild wiederherstellen und so den Zuschnitt rückgängig machen, indem Sie zu Bild> Leinwand an Ebenen anpassen gehen. Nur der Bereich Ihres Bildes innerhalb der Leinwandbegrenzung wird exportiert.
Unser Bild ist jetzt auf das gewünschte Seitenverhältnis zugeschnitten, aber wenn Sie sich noch einmal unsere Bildabmessungen in der „Titelleiste“ ansehen, sehen Sie, dass das Bild 1532 × 804 groß ist (im obigen Foto grün umrandet und vergrößert – Ihre Abmessungen werden wahrscheinlich etwas anders sein, je nachdem, wie groß Sie Ihren Zuschneidebereich auf Ihrem Bild gezeichnet haben). Wir müssen unser Bild jetzt so skalieren, dass es unseren gewünschten Abmessungen entspricht.
Gehen Sie dazu auf Bild > Bild skalieren (roter Pfeil).
Stellen Sie im angezeigten Feld „Bild skalieren“ unter „Bildgröße“ sicher, dass das Kettengliedsymbol neben den Feldern „Breite“ und „Höhe“ verknüpft ist (roter Pfeil auf dem obigen Foto). Ändern Sie dann die „Breite“ Ihres Bildes auf 1200 (grüner Pfeil). Drücken Sie die Tabulatortaste. Die Höhe des Bildes wird automatisch auf „630“ aktualisiert. Stellen Sie unter „Qualität“ sicher, dass das Dropdown-Menü „Interpolation“ (blauer Pfeil) entweder auf „NoHalo“ oder „LoHalo“ eingestellt ist, um nach der Skalierung die beste Bildqualität zu erzielen. (Weitere Informationen zur Interpolation Schauen Sie sich mein Tutorial zu diesem Thema an).
Klicken Sie auf die Schaltfläche „Skalieren“, um Ihr Bild zu skalieren (gelber Pfeil).
Überprüfen Sie nach Abschluss der Skalierung die Bildabmessungen in der Titelleiste. Sie sollten jetzt eine Bildgröße von 1200×630 sehen – genau die Größe, die wir wollen! Also was machen wir jetzt?
Komprimieren Sie Ihr Bild, indem Sie es nach WebP exportieren
Durch das Zuschneiden und Skalieren des Bildes wurde die Dateigröße reduziert, indem die Höhe des Bildes von 1920 auf 1200 Pixel und die Breite von 1280 auf 630 Pixel reduziert wurde, aber wir können die Bildgröße noch weiter reduzieren, indem wir beim Exportieren des Bildes eine Komprimierung anwenden.
Also müssen wir das Bild jetzt in ein Dateiformat exportieren, das eine Komprimierung auf das Bild anwendet, ohne die Bildqualität merklich zu verringern. Während JPEGs immer eine gute Option sind, gibt es jetzt eine noch bessere Option: WebP.
Das WebP-Format wendet eine stärkere Komprimierung als JPEG an, beeinflusst die Bildqualität jedoch weniger als JPEG. Mit anderen Worten, Sie erhalten ein besser aussehendes Bild mit einer kleineren Dateigröße. Außerdem werden WebP-Formate von allen Top-5-Webbrowsern unterstützt.
Um nach WebP zu exportieren, gehen Sie zu Datei > Exportieren als (roter Pfeil).
Klicken Sie auf einen der Ordner im Abschnitt „Orte“ (grün umrandet), um das Bild auf Ihrem Computer auszuwählen, in dem Sie Ihr Bild speichern möchten. Sie können einfach auf einen Ordner doppelklicken, um ihn aufzurufen, und neben dem Titel „In Ordner speichern“ (roter Pfeil) sehen, in welchem Ordner Sie sich befinden. Benennen Sie Ihr Bild dann nach Belieben um – stellen Sie nur sicher, dass Sie Ihren Bildnamen mit der Erweiterung „.webp“ (blauer Pfeil) beenden, um das Bild im WebP-Format zu exportieren. Wenn Sie fertig sind, klicken Sie unten rechts im Fenster auf „Exportieren“ (gelber Pfeil).
Als nächstes erscheint der Dialog „Bild als WebP exportieren“. Stellen Sie sicher, dass „Lossless“ deaktiviert ist (roter Pfeil). Normalerweise stelle ich die „Bildqualität“ auf 80 ein (blauer Pfeil – dies ist ein Prozentwert, also je niedriger der Prozentsatz, desto geringer die Bildqualität, aber desto kleiner die Bilddateigröße). Wenn Ihr Bild keine Transparenz enthält (z. B. ein Logo ohne Hintergrund), müssen Sie sich keine Gedanken über den Schieberegler „Alpha-Qualität“ machen (in einem von mir durchgeführten Experiment wurde die Alpha-Qualität tatsächlich leicht von 100 auf 90 gesenkt erhöhte die Dateigröße eines Bildes mit transparentem Hintergrund von 8.50 kb auf 8.52 kb). Die Dropdown-Liste „Quellentyp“ kann auf „Standard“ eingestellt bleiben.
Ob Sie eine der Metadatenoptionen, einschließlich Exif-Daten, ITPC-Daten und XMP-Daten, aktivieren oder deaktivieren möchten, liegt ganz bei Ihnen. Exif- und XMP-Daten sind Metadaten, die normalerweise von Ihrer Kamera zugewiesen werden und Informationen über Ihr Foto beschreiben, z. B. welches Kameramodell oder welcher Objektivtyp verwendet wurde. ITPC hingegen wird von Pressevertretern verwendet und ordnet Ihrem Bild Informationen wie Eigentum, Rechte und Lizenzen zu. Wenn Sie sich nicht sicher sind, was Sie tun sollen, lassen Sie diese Optionen einfach aktiviert.
Ebenso können Sie die Option „Farbprofil speichern“ deaktiviert lassen, da die meisten Browser automatisch den sRGB-Farbraum verwenden, um Ihr Bild anzuzeigen, was GIMP verwendet. Wenn Sie ein anderes Farbprofil verwenden, sollten Sie dies aktiviert lassen. Wenn Sie außerdem befürchten, dass das Bild in bestimmten Browsern nicht richtig angezeigt wird, fügt es nur ein paar KB zur Gesamtbildgröße hinzu, wenn Sie es aktiviert lassen.
Schließlich kann die Option „Miniaturansicht speichern“ deaktiviert bleiben, wodurch wir weitere Kilobyte sparen.
Klicken Sie auf „Exportieren“ (gelber Pfeil im Bild oben), um das Bild in das WebP-Format zu exportieren. Beim Vergleich der exportierten WebP-Datei mit einer JPEG-Datei, die dieselbe Größe hat und deren Qualität ebenfalls auf „80“ eingestellt ist, ist das WebP-Bild etwa 30 KB oder etwa 25 % kleiner als das JPEG.
Sie können sich jetzt bei Ihrer WordPress-Site anmelden und zu der Seite oder dem Beitrag navigieren, auf der Sie Ihr Bild hochladen möchten, oder einfach über die Hauptnavigation zum Abschnitt „Medien“ navigieren und Ihr Bild per Drag & Drop in die Medienbibliothek ziehen. In meinem Fall navigiere ich über die Hauptnavigation zu „Beitrag“ (roter Pfeil im Bild oben) und klicke auf „Blogbeitrag 1“ (blauer Pfeil), um diesen Blogbeitrag zu bearbeiten.
Ich öffne dann die Seitenleiste mit den Beitragseinstellungen (roter Pfeil) und scrolle nach unten zum Abschnitt „Empfohlenes Bild“ und erweitere diesen Abschnitt (blauer Pfeil). Dann klicke ich auf das Bild, um es durch mein neues Bild zu ersetzen.
Ich navigiere zur Registerkarte „Dateien hochladen“ (roter Pfeil) und kann mein Bild per Drag & Drop von meinem Computer in WordPress ziehen (blaue Pfeile).
Abschließend klicke ich auf „Vorgestelltes Bild festlegen“, um diese Änderung zu übernehmen (roter Pfeil).
Klicken Sie auf „Aktualisieren“ (roter Pfeil), um Ihre Seite mit dem neuen Beitragsbild zu aktualisieren.
Wenn ich auf „Beitrag anzeigen“ klicke (blauer Pfeil) …
… sehen Sie jetzt das neue vorgestellte Bild oben in meinem Blog.
Das war's für dieses Tutorial! Wenn Sie mehr über das Entwerfen einer WordPress-Website erfahren möchten, empfehle ich Ihnen, sich meine anzusehen Kurs WordPress 6.0 für Nicht-Programmierer! Oder, wenn Sie mehr über GIMP erfahren möchten, besuchen Sie meine GIMP 2.10 Meisterklasse auf Udemy!
