So ändern Sie die Größe und komprimieren große Bilder in großen Mengen (und optimieren sie)

Möchten Sie wissen, wie Sie große Bilder in großen Mengen skalieren und komprimieren können, ohne an Qualität zu verlieren? Sie sind auf der richtigen Seite. Sehen wir uns an, wie Sie Zeit sparen können, während Sie Ihre Fotos optimieren und die Leistung Ihrer Website steigern.

Bei der Bildkomprimierung wird das Gewicht eines Bildes reduziert, indem seine Größe verringert wird, ohne die Qualität zu stark zu beeinträchtigen. In diesem Artikel erfahren Sie, warum es wichtig ist, die Größe von Bildern zu ändern und zu komprimieren, und wie Sie dies einfach und ohne Qualitätsverlust tun können.

Tauchen wir ein!

Warum große Bilder auf eine kleinere Größe komprimieren?

Einer der größten Trends im Webdesign ist derzeit, große und schöne Bilder auf Ihrer Website zu haben. Aber wenn es um die Webleistung geht, sind diese großen Bilder oft die Hauptursache für die Verlangsamung Ihrer Website. Bei falscher Implementierung haben diese Bilder wahrscheinlich eine große Datei, was zu höheren HTTP-Anforderungen für Ihren Browser führt.

Hier sind einige Vorteile, die Sie erhalten können, wenn Sie große Fotos komprimieren:

• Komprimierte Bilder erhöhen die Geschwindigkeit , was laut Google zu einer optimalen Benutzererfahrung führt. Google PageSpeed ​​Insights empfiehlt die richtige Größe von Bildern (insbesondere für Mobilgeräte), das Zurückstellen von Offscreen-Bildern (durch Lazy Loading) und die Verwendung eines Next-Gen-Formats wie WebP, wenn Sie die Ladezeit verbessern möchten.

• Indem Sie die Größe der Bilder ändern und komprimieren, können Sie die Seitengröße reduzieren und die von Google definierten Leistungskennzahlen erhöhen , einschließlich der Core Web Vitals. Die Optimierung Ihrer Bilder bedeutet auch eine Verkürzung der Zeit, die die Besucher warten müssen, bevor sie mit Ihrer Website interagieren (Metrik Time To Interactive) und eine verbesserte wahrgenommene Geschwindigkeit (Metriken First Contentful Paint und Largest Contentful Paint).

• Kleinere Bilddateigrößen verbrauchen weniger Bandbreite – Ihre Netzwerke und Browser werden dies sicherlich zu schätzen wissen! Die Optimierung von Bildern kann oft zu einigen der größten Byte-Einsparungen und Leistungsverbesserungen für Ihre Website führen: Je weniger Byte ein Browser herunterladen muss, desto weniger Bandbreiten-Konkurrenz – was eine schnellere Ladezeit bedeutet.

• HTTP-Anfragen für große HD-Bilder können sich ebenfalls negativ auf die Leistung auswirken, weshalb Sie weniger HTTP-Anfragen stellen sollten, um Ihre WordPress-Site zu beschleunigen.

Das Komprimieren von Bildern ist notwendig, um die Leistung zu steigern, aber andererseits möchten Sie keine unscharfen Bilder für Ihre Website, oder? Das Ziel ist es, ein Ergebnis zu erzielen, das Qualität und Optimierung ausbalanciert, wie in unserem Beispiel unten:

Keine Komprimierung JPEG – 400 KB	Kompression (Qualität unverändert) JPEG – 170 KB

Das bringt uns zum nächsten Teil: Wie reduziert man die Bildgröße, ohne an Qualität zu verlieren?

So ändern Sie die Größe und komprimieren von Bildern in großen Mengen (PNG und JPEG)

Die beiden wichtigsten Dinge, die Sie berücksichtigen sollten, sind die Art der Komprimierung, die Sie verwenden möchten (verlustbehaftet oder verlustfrei) und das Dateiformat (PNG, JPEG, PDFs usw.). Unten sehen Sie, wie sich Formate auf die Bildgröße auswirken können:

Um das Beste aus Ihren PNG- und JPEG-Bildern herauszuholen, stehen viele Tools zur Verfügung. Einige helfen Ihnen dabei, all diese Arbeit für sich selbst zu erledigen (z. B. ein WordPress-Plugin), während andere Sie Ihre eigenen Optimierungen durchführen lassen (z. B. Photoshop).

Hier ist unsere Liste der bevorzugten Tools, mit denen Sie JPEG- oder PNG-Bilder in großen Mengen stark komprimieren können. Wir haben sie in zwei Kategorien eingeteilt:

• Kategorie Nr. 1 – Bildoptimierungs-Webtools und -Software zur Massenoptimierung großer PNG- und JPEG-Bilder

• Kategorie #2 – WordPress-Plugins zur Größenänderung und Komprimierung großer PNG- und JPEG-Bilder in großen Mengen

Beginnen wir mit der ersten Kategorie.

Kategorie Nr. 1 – Bildoptimierungs-Webtools und -Software zur Massenoptimierung großer PNG- und JPEG-Bilder

Hier ist unsere Auswahlliste von Software und Online-Tools, mit denen Sie die Größe mehrerer großer Bilder ändern und komprimieren können:

• Affinitätsfoto um Ihre PNG- und JPEG-Bilder stapelweise zu komprimieren.

1. Gehen Sie zu Datei > Neuer Batch-Job

2. Laden Sie alle Bilder hoch, die Sie komprimieren möchten, und wählen Sie das für Ihre Bedürfnisse am besten geeignete Format aus:

3. Definieren Sie die neue Qualität (70 ist eine gute Zahl, um eine gute Qualität zu erhalten)

• Vorschau (auf Mac) – um die Größe Ihrer Bilder in großen Mengen zu ändern ( aber sie werden nicht komprimiert ).

1. Öffnen Sie alle Bilder mit Vorschau
2. Wählen Sie sie alle aus
3. Gehen Sie zu Extras > Größe und wählen Sie neue Bildabmessungen aus

Job erledigt! Die resultierende Größe ist kleiner.

• Mass Image Compressor – ein Point-and-Shoot-Tool zum Komprimieren und Konvertieren von Stapelbildern zur Website-Optimierung.

• Gimp – das kostenlose beliebte Bildbearbeitungsprogramm für Mac und Windows. GIMP verfügt über einen sogenannten Stapelmodus, mit dem Sie Bildverarbeitung von PNG, JPEG und anderen Formaten wie GIF oder PDF durchführen können. ​​Sie müssen eine kostenlose Erweiterung namens „Batch Image Manipulation Plugin (BIMP) herunterladen und installieren. Die Schritte sind dann wirklich einfach.

• Photoshop – zum Ändern der Größe und Komprimieren Ihrer PNG- und JPEG-Bilder (beeinträchtigt die Qualität und ist relativ teuer).
  1. Öffnen Sie Adobe Photoshop, wählen Sie Datei > Skripts > Bildprozessor
  2. Klicken Sie auf Ordner auswählen, damit Sie den Ordner auswählen können, in dem sich die Bilder befinden
  3. Passen Sie die Einstellungen an, um die Größe zu reduzieren
  4. Wählen Sie eine Einstellung zwischen 1 und 12 im Feld Qualität (ich schlage vor, nicht unter 6 zu gehen).
  5. Klicken Sie auf „Aktion ausführen“

Hinweis: Photoshop kann eine steile Lernkurve sein. Wenn Sie also interessiert sind, haben wir 10 Alternativen zu Photoshop für die Bildoptimierung aufgelistet.

Wenn Sie Zeit sparen möchten, müssen Sie nicht alle Formatierungen und Komprimierungen von Hand erledigen. Glücklicherweise erledigen einige Plugins automatisch einen Teil dieser Arbeit für Sie! Das bringt uns zur zweiten Kategorie: den WordPress-Plugins.

Kategorie Nr. 2 – WordPress-Plugins zum Ändern der Größe und zum Komprimieren großer PNG- und JPEG-Bilder in großen Mengen

Sie können eines der folgenden WordPress-Plugins verwenden, um große Bilder in großen Mengen zu komprimieren, nämlich:

• Imagify (unser kostenloses Plugin)
• Optimol
• JPEG & PNG komprimieren (winziges PNG)
• EWWW
• ShortPixel
• reSmush.it

Sie alle bieten Massenoptimierung an und die meisten von ihnen konvertieren Ihre Bilder auch in das WebP-Format, wie von Google empfohlen. Für unsere Fallstudie werden wir Imagify verwenden und die Schritte hervorheben, die Sie befolgen müssen, um Ihre großen Bilder zu optimieren.

So komprimieren Sie große Bilder ohne Qualitätsverlust mit Imagify

Mit Imagify können Sie in großen Mengen die Größe ändern und komprimieren, ohne WordPress jemals verlassen zu müssen. Werfen wir einen Blick auf das Dashboard von Imagify, damit Sie das Look-and-Feel der Massenoptimierungsfunktion aus dem Menü Medien > Massenoptimierung erhalten:

Nachdem Sie das Imagify-Plugin aktiviert haben, wählen Sie einfach Ihre Komprimierungsstufe und klicken Sie auf die Schaltfläche „ IMAGIF'EM ALL “.

Das ist die Art von Einsparungen, die Sie erzielen können, wenn Sie die Massenoptimierungsfunktion von Imagify verwenden: fast 87 %!

Lassen Sie uns jetzt eine Vorher-Nachher-Show durchführen, damit Sie sehen können, warum Sie Ihre Bilder mit Imagify optimieren sollten.

Komprimieren großer Bilder in großen Mengen: Ein Schaufenster

Ich werde zwei Szenarien der Massenoptimierung für meine Bilder auf Mobilgeräten ausführen:

• Szenario 1 – Leistungsergebnisse mit JPEG-Bildern (ohne Imagify)
• Szenario 2 – Ergebnisse der Massenbildoptimierung mit WebP-Bildern und aggressivem Optimierungsmodus (mit Imagify)

Hier sind die Tools und Metriken, die ich berücksichtigen werde:

Werkzeuge:
Google PageSpeed ​​Insights und WebPageTest

Metriken:

• Dateigröße jedes Fotos
• Größte zufriedene Farbe
• Seitengröße
• HTTP-Anfragen
• Ladezeit

Szenario 1 – Leistungsergebnisse mit JPEG-Bildern (ohne Imagify)

1. 9 Bilder, die im JPEG-Format bereitgestellt werden
2. Bilder sind nicht optimiert

Hier sind die Bildoptimierungs-Flags, die ich nach der Durchführung des PageSpeed ​​Insights-Audits erhalten habe:

Unten finden Sie die Inhaltsaufschlüsselung meiner Seite. Bilder sind für 60 % der Anfragen und 81,5 % der gesamten Bytes verantwortlich:

Szenario 2 – Ergebnisse der Massenbildoptimierung mit WebP-Bildern und aggressivem Optimierungsmodus (mit Imagify)

• Dieselben 9 Bilder, die mit Imagify in das WebP-Format konvertiert wurden
• Massenoptimierte Bilder mit Imagify

Lassen Sie uns unsere Bilder in großen Mengen optimieren und sie mit Imagify in WebP konvertieren:

Gleich nach ein paar Klicks hat Imagify durchschnittlich 55 % unserer Dateigröße eingespart:

Unsere Leistungskennzahlen sind auch in besserer Verfassung :

Imagify löste auch die von PageSpeed ​​Insights gemeldeten Leistungsprobleme :

Dank der Massenoptimierungsfunktion von Imagify können wir nur positive Ergebnisse sehen:

• Alle meine Bilder sind komprimiert: Sie haben eine kleinere Größe und wir haben keine Kompromisse bei der Qualität gemacht.
• Mein Core Web Vital (LCP) war mit einem Score von 3,6 s in Orange, aber mit Imagify bewegte es sich mit 1,6 s in den grünen Bereich.
• Die Ladezeit meiner Seite sank von 3,7 s auf 2,1 s.
• Nur 43 % der Anfragen kommen jetzt von Bildern (ohne Imagify waren es 60 %).
• Bilder nehmen 26,5 % des gesamten Byte-Inhalts ein (gegenüber 82 % zuvor).

Einpacken

Mit dem Imagify-Plug-in konnten wir große Bilder schnell in großen Mengen direkt vom WordPress-Dashboard aus skalieren und komprimieren. Wir brauchten zwei Klicks, um alle unsere Bilder automatisch zu optimieren, und es sparte durchschnittlich 60 % unserer Dateigröße! Darüber hinaus kann Imagify Ihre WordPress-Bilder in WebP konvertieren, das von Google empfohlene Format der nächsten Generation.

Lassen Sie sich durch eine langsame Websiteleistung keine Conversions kosten. Beginnen Sie noch heute kostenlos mit der Massenoptimierung Ihrer Bilder mit Imagify!