So reduzieren Sie die Größe von JPEG- und anderen Bilddateien

Die Bilder, die Sie auf Ihrer Website verwenden, sind eines der wichtigsten Elemente. Sie möchten nicht nur visuell ansprechende Bilder haben, sondern auch nicht, dass diese Bilder so groß sind, dass sie die Ladezeit Ihrer Website verlangsamen. Einer der Hauptgründe für Verzögerungen bei einer Site besteht darin, dass die Größe der darin enthaltenen Bilder nicht für eine optimale Site-Performance angepasst wurde.

In diesem Artikel untersuchen wir manuelle Methoden zum Reduzieren der Bildgröße in Photoshop, einschließlich Ändern des Dateityps, Ändern der Größe und Komprimieren von Dateien mit der Funktion Für Web speichern. Wenn diejenigen, die nach etwas mehr Automatisiertem suchen, werden wir uns auch einige Plugins und webbasierte Optionen ansehen.

Abonnieren Sie unseren Youtube-Kanal

Ändern des Dateityps

„Dateigröße“ für eine Bilddatei bezieht sich auf die Anzahl der Pixel pro Zoll. Im Allgemeinen gilt: Je mehr Pixel pro Zoll, desto mehr Informationen enthält die Datei und desto größer ist sie.

Die beiden häufigsten Dateitypen für Bilder sind JPG und PNG.

• PNG – Portable Network Graphics – Dieser Dateityp wird hauptsächlich für Grafikdateien wie Logos, Symbole, Illustrationen und Text verwendet. Bei der Bearbeitung in einer Fotobearbeitungsanwendung wie Photoshop verlieren diese Dateien nicht viele Daten, wenn Sie sie bearbeiten oder komprimieren. Aus diesem Grund werden sie als „verlustfrei“ bezeichnet. Aus diesem Grund sind diese Dateien in der Regel größer.
• JPEG – Joint Photographic Experts Group – Dies ist der häufigste Dateityp, den Sie für die meisten Bilder im Internet finden. Dieser Dateityp kann Millionen von Farben verwalten, kann stark komprimiert werden, während die Qualität erhalten bleibt. Diese werden als „verlustbehaftet“ bezeichnet, da beim Komprimieren Pixel aus dem Bild entfernt werden.

Beide Dateitypen können funktionieren. Welche Sie wählen, hängt wirklich von Ihrer Website, der Anzahl und der Art der Fotos ab, die Sie verwenden möchten.

Hier ist ein Beispielfoto. Das ursprüngliche Format war eine JPG-Datei.

Ich habe den Befehl Datei>Speichern unter in Photoshop verwendet und das PNG-Format gewählt und die Speicherfunktion abgeschlossen.

Als ich den Dateityp änderte, stieg die Dateigröße von 646 MB auf 1,3 KB. Wie oben erwähnt, sind PNG-Dateien in der Regel größer, daher sollten Sie bei dieser Art von Bildern mit vielen Farben und Details besser bei der JPEG-Version bleiben, um schnellere Ladezeiten zu gewährleisten. Wenn Sie wissen, dass Ihr Bild ohne Auflösungsverlust größer skaliert werden muss, wählen Sie die PNG-Version.

Beachten Sie, dass viele andere Dateiformate verfügbar sind. Ich habe mich auf JPEG und PNG konzentriert, weil sie am beliebtesten sind.

Manuelle Größenänderung in Photoshop

In Photoshop können Sie die Funktion Bild>Bildgröße verwenden, um die Größe Ihres Bildes manuell zu ändern. Das Werkzeug sieht so aus:

Sie können die aktuelle Bildgröße und Pixelmaße oben im Werkzeug sehen. Alle Anpassungen, die Sie hier vornehmen, ändern die Größe.

Anpassen an ist eine Dropdown-Liste mit voreingestellten Größen und Pixeleinstellungen.

Wenn ich die erste Option in dieser Liste wähle, um die Abmessungen und Pixel pro Zoll (ppi) anzupassen, kann ich sehen, wie sich die Dateigröße ändert.

Sie können mit diesen Einstellungen experimentieren, um festzustellen, ob eine Standardgröße aus dem Dropdown-Menü funktioniert oder ob Sie die Optionen für Breite, Höhe oder Auflösung manuell ändern müssen, um die gewünschte Größe zu erhalten.

Für Web-Funktion speichern

Für Web speichern unterscheidet sich von Speichern unter dadurch, dass die Weboption Metadaten (Details zu Typ und Herkunft des Bildes) vor dem Speichern aus der Datei entfernt. Diese Funktion ist speziell für Bilder gedacht, die im Internet angezeigt werden, und kann daher eine sehr schnelle Möglichkeit sein, die Größe bei gleichbleibender Qualität zu ändern.

Suchen Sie die Option Für Web speichern, indem Sie zu Datei> Exportieren> Für Web speichern navigieren:

Wenn sich das Fenster Save for Web öffnet, werden Sie einen weiteren Vorteil dieser Funktion bemerken. Wenn Sie oben die Registerkarte 2-up auswählen, können Sie einen Vergleich des Originalbilds Seite an Seite mit dem geänderten Bild sehen.

Verwenden Sie von hier aus die Voreinstellungen in der oberen rechten Ecke, um das JPG-Format auszuwählen und die Qualität nach Ihren Wünschen anzupassen. Nachdem Sie Änderungen vorgenommen haben, können Sie in der Bildvorschau sehen, ob Ihre neue Datei Ihren Qualitätsstandards entspricht, und Sie können die Änderung der Dateigröße überprüfen, indem Sie sich die Daten unter jedem Bild ansehen:

Beachten Sie, dass Sie die Größe auch ändern können, indem Sie die Felder Breite und Höhe in der unteren rechten Ecke verwenden. Da sich dieser Artikel speziell mit der Größenänderung befasst, werden die anderen Optionen, die im Bildschirm „Für Web speichern“ angezeigt werden, nicht behandelt, aber Sie können hier ausführlichere Informationen lesen.

WordPress Bildoptimierungstools

Photoshop ist eine großartige Option, wenn Sie die Wählscheiben selbst drehen möchten, um die Bilddateigröße selbst zu reduzieren. Wenn Sie nach etwas Automatisiertem suchen, um die Größe Ihrer Bilder zu ändern, gibt es eine Reihe von WordPress-Plugin-Optionen, die Ihnen helfen können. Hier ist eine Liste einiger beliebter Optionen und eine kurze Beschreibung ihrer Vorteile:

Imagify – Optimieren Sie alle Ihre Bilder auf einmal, ändern Sie die Größe mit Leichtigkeit und stellen Sie bei Bedarf die Originalversionen von Fotos wieder her. Es ist auch erschwinglich. Dieses Plugin kann kostenlos heruntergeladen werden und enthält 20 MB Dateispeicher. Andere Optionen sind 5 USD pro Monat für 500 MB und 10 USD pro Monat für unbegrenzten Speicherplatz.

ShortPixel – Keine Dateigrößenbeschränkung und ein API-Schlüssel für mehrere Websites ermöglichen eine hervorragende Nutzung dieses Plugins. Sie bieten auch einmalige und monatliche Pläne für Budgetflexibilität.

Optimole – Für Datenorientierte bietet Optimole ein Dashboard, in dem Sie Optimierungsstatistiken überprüfen können. Ihr kostenloser Plan ermöglicht 5.000 Besucher pro Monat und unbegrenzte Bandbreite.

Einen umfassenderen Vergleich dieser Optionen und einer Handvoll anderer finden Sie in diesem Artikel.

Webressourcen zur Bildoptimierung

Wenn Sie Zeit und/oder Geld brauchen, gibt es viele kostenlose Online-Tools zur Bildoptimierung.

Mit Compressjpg können Sie mehrere Dateien hochladen und deren Größe gleichzeitig ändern. Es verfügt auch über eine Funktion, die Fotos im iPhone HEIC-Format in JPEG konvertiert. Andere ähnliche Seiten sind Tinypng sowie Image Compressor.

Canva Pro ist eine weitere beliebte Website, die nicht nur die Größe ändert, sondern auch ermöglicht, Bilder zu entwerfen und zu animieren sowie sie für die Verwendung im Web oder in sozialen Medien zu formatieren. Sein Layout ist intuitiv und einfach zu bedienen.

Einpacken

Unterschätzen Sie nicht die Bedeutung der Optimierung Ihrer Bilder. Langsame Websites schalten nicht nur die Zuschauer ab, sie werden auch nicht in der Google-Suche gefunden. Schnell ladende, scharfe Bilder können das gewisse Extra bieten, das Ihre Website von den anderen abhebt. Eine optimierte Website sorgt dafür, dass Besucher immer wiederkommen, um mehr zu erfahren.

Verwenden Sie eine dieser Methoden, um die Größe Ihrer Bilder zu ändern? Wenn nicht, was glauben Sie, werden Sie zuerst versuchen? Sag es uns in den Kommentaren!

Ausgewähltes Bild über Prihanto Edi / shutterstock.com