Tipps, Tools und wie Sie die Größe von Bilddateien reduzieren können, ohne die Qualität zu beeinträchtigen

von Rokaiya Yeasmin Munni am Juni 13, 2018

Bilder sind für Ihre Website von entscheidender Bedeutung. Sie bieten visuelle Hinweise für Benutzer und stärken Ihre Markenidentität – und Produktfotos sind ein wesentlicher Bestandteil der Erfahrung eines Online-Käufers.

Wenn Ihre Bilder für SEO optimiert sind, können sie außerdem viel neuen Traffic generieren (und den Umsatz steigern!) Insbesondere wenn Sie einen Online-Shop oder ein Fotografie-Portfolio haben, sind Bilder der entscheidende Grund, warum Benutzer Ihre Website überhaupt besuchen, oder? Schlechte Bilder sind einfach keine Option.

Inhaltsverzeichnis

• So reduzieren Sie die Bildgröße in Photoshop
• Kostenlose Web-Tools zum Bearbeiten von Bildern und zum Reduzieren der Dateigröße
• Web-Tools zum Komprimieren von Bildern und zum Reduzieren der Dateigröße
• Weitere Tools zum Komprimieren von Bildern und zum Reduzieren der Dateigröße
• Plugins, die die Bildgröße in Ihrem CMS reduzieren
• Outsourcing Ihrer Bildgrößenanpassungsanforderungen
• Das Endergebnis

Wenn Sie jedoch zu große Bilder auf Ihre Website hochladen, können diese die Ladezeit der Seite verlangsamen und wiederum zu höheren Absprungraten und Umsatzverlusten beitragen. Wenn Sie jemals die Größe eines Bildes reduziert haben, sind Sie sich wahrscheinlich des Risikos bewusst, die Bildqualität zu beeinträchtigen.

Es gibt jedoch Möglichkeiten, die Bildgröße zu reduzieren und die Qualität zu erhalten. Hier ist wie:

So reduzieren Sie die Bildgröße in Photoshop

Für dieses Tutorial haben wir Adobe Photoshop CC 2017 verwendet. Die genauen Schritte können für andere Versionen von Photoshop variieren.

Bestimmen Sie zunächst Ihr ideales Bildseitenverhältnis und ob Ihr Bild zugeschnitten werden muss — dies hängt davon ab, um welche Art von Foto es sich handelt und wo es auf Ihrer Website verwendet wird (Hauptproduktbild, Produktminiaturansicht, Homepage-Banner usw.)

Wenn Sie ein Bild für eine Miniaturansicht zuschneiden, können Sie nach Auswahl des Zuschneidewerkzeugs ganz einfach ein Seitenverhältnis von 1:1 in der oberen linken Ecke auswählen.

Als nächstes ist es an der Zeit, die Größe und Komprimierungsqualität Ihres Bildes zu ändern.

Datei > Export > Für Web speichern (Legacy)

Und hier kommt der schwierige Teil – tatsächlich die Größe eines Bildes zu ändern und es zu komprimieren.

Im Fenster Für Web speichern sind mehrere Funktionen zu beachten.

1. 2- UP (und 4-UP): Dies bietet einen Side-by-Side-Vergleich des Originalbildes mit der komprimierten Datei. 4-UP generiert automatisch Optionen mit geringerer Komprimierung für zusätzlichen Vergleich.
2. Dateiformat: A.das JPEG-Format wird die meiste Komprimierung ermöglichen.
3. Komprimierungsqualität: Wählen Sie aus den Voreinstellungen niedrig, mittel, hoch, sehr hoch und maximal, abhängig von Ihren Komprimierungs- und Dateigrößenanforderungen.
4. Progressiv vs. optimiert: Progressive ist die beste Wahl, aber nicht immer mit allen Browsern kompatibel. Progressiv ermöglicht das Laden eines Bildes in mehreren Durchgängen mit zunehmender Auflösung und Qualität. Optimiert ermöglicht auch zusätzliche Komprimierung, aber Dateien sind nicht so kompatibel. Sie können eine oder beide auswählen.
5. Qualitätsregler: Skalieren Sie die Qualität schrittweise, um die Komprimierung zu erhöhen und gleichzeitig die Bildqualität zu erhalten.
6. Bildgröße: Legen Sie die Abmessungen Ihres Bildes fest. Wenn Sie die genauen Abmessungen kennen, die Sie benötigen, können Sie sie hier eingeben. Wenn Sie die Größe um einen Prozentsatz reduzieren möchten, können Sie auch den Prozentskalierer verwenden. Halten Sie die Proportionen immer eingeschränkt, indem Sie sicherstellen, dass das Sperrsymbol / der Umschalter ausgewählt ist. Dies stellt sicher, dass Ihr Bild nicht verzerrt wird, wenn Sie die Bildgröße ändern.
7. Resampling-Auswahl: Auf diese Weise „erstellt“ Photoshop Teile der Bilddaten neu, die während der Komprimierung geändert wurden. Jedes Mal, wenn Sie die Größe eines Bildes vergrößern oder verkleinern, wirkt sich dies auf den ursprünglichen Anteil des Bildes in Bezug auf Pixel pro Zoll und Abmessungen aus. Bicubic erzeugt glattere Farbverläufe, ermöglicht jedoch nicht die meiste Komprimierung. Entdecken Sie andere Optionen wie Nearest Neighbor (grundlegendste und schlechteste Detailerhaltung), Bilinear (normalerweise besser für Upsampling), Bicubic Smoother (entwickelt für Upsampling) oder Bicubic Sharper (besser für Downsampling / bewahrt Details).
8. Bilddateigröße und Downloadrate: Hier werden das Dateiformat, die aktuelle Dateigröße des optimierten Bildes und die aktuelle Downloadrate des Bildes basierend auf verschiedenen Internetgeschwindigkeiten angezeigt.

Hier gibt es keine einheitliche Option. Wenn Sie ein Bild in Photoshop verkleinern, muss jedes Bild im Allgemeinen individuell angepasst werden, um die beste Bildqualität mit der besten Komprimierung zu erzielen.

Kostenlose Web-Tools zum Bearbeiten von Bildern und zum Reduzieren der Dateigröße

Pixlr: Mit Pixlr können Sie die Größe von Fotos nach Bedarf ändern und auch bearbeiten. Die Bildbearbeitungsseite verfügt auch über ein kostenloses Vektorbearbeitungswerkzeug sowie kostenlose Schriftarten und Grafiken, die Sie verwenden können.

Canva: Mit dem kostenlosen Fotoeditor von Canva können Sie Bilder auf ihrer Website zuschneiden und in der Größe ändern. Zu den weiteren kostenlosen Bearbeitungswerkzeugen gehören das Spiegeln und Drehen von Bildern, das Anpassen der Farbe und das Hinzufügen von Filtern.

Web-Tools zum Komprimieren von Bildern und zum Reduzieren der Dateigröße

TinyJPG / TinyPNG: Auf dieser Website können Sie die Dateigröße Ihrer Bilder reduzieren. Es gibt keine Bearbeitungsfunktionen; Stattdessen konzentriert sich TinyJPG / TinyPNG auf das Komprimieren von Dateien, um letztendlich die Dateigröße zu reduzieren und unnötige Daten aus Ihrem Bild zu entfernen. Dies bewahrt auch die Qualität und wird am besten als ergänzendes Werkzeug zu anderen Bearbeitungstechniken verwendet, um die Dateigröße zu reduzieren. TinyJPG / TinyPNG sind kostenlos zu benutzen.

Bulk Web Resizer: Reduzieren Sie die Dateigröße für Bilder in großen Mengen. Auf dieser Website können Sie einen Stapel von Bildern hochladen und dann die Größe entsprechend den gewünschten Abmessungen ändern. Sie können auch die Bildqualität an Ihre Bedürfnisse anpassen (wählen Sie 100, wenn Sie die Originalqualität beibehalten möchten) und Bilder schärfen.

ImageOptim: ImageOptim kann in Ihrem Webbrowser oder über eine Mac-Anwendung verwendet werden. Um Dateien zu verkleinern, entfernt ImageOptim EXIF-Metadaten wie die GPS—Position und die Seriennummer der Kamera – Sie können jedoch bestimmte Metadaten beibehalten (was für die Optimierung Ihrer Produktfotos für SEO unerlässlich ist).

Es gibt auch eine verlustbehaftete Minimierungsoption, die laut ImageOptim zu einer möglichst geringen Dateigröße führt und gleichzeitig die Bildqualität beibehält. ImageOptim hat Preispläne, beginnend bei $ 9 / Monat für 1.000 Bildoptimierungen.

Weitere Tools zum Komprimieren von Bildern und zum Reduzieren der Dateigröße

pngquant: Dieses Tool komprimiert .PNG-Dateien, um die Dateigröße zu reduzieren. „Die Konvertierung reduziert die Dateigrößen erheblich (oft um bis zu 70%) und behält die vollständige Alphtransparenz bei. Generierte Bilder sind mit allen Webbrowsern und Betriebssystemen kompatibel „, heißt es auf der Website.

Kraken: Kraken verfügt über eine Webanwendung und eine Entwickler-API, mit der Massenbildoptimierung und Größenänderung durchgeführt werden können. Die einfache Weboberfläche ist kostenlos und Sie können Fotos per Drag & Drop verschieben oder hochladen, indem Sie die Bild-URL eingeben. Es gibt auch verschiedene Preisoptionen, je nachdem, mit wie vielen Bildern Sie arbeiten und wie oft Sie ihre Größe reduzieren müssen. Die Preise basieren auf der Gesamtzahl der GB.

Plugins, die die Bildgröße in Ihrem CMS reduzieren

Es gibt unzählige Plugins auf dem Markt, die den Größenänderungsprozess von Bildern einfacher und automatisierter machen, alles aus Ihrem CMS heraus. Hier sind nur einige:

WordPress

• WP Smush PRO
• EWWW Image Optimizer
• ShortPixel

Shopify

• Image Optimizer – Bildkomprimierung und -optimierung
• Crush.pics – Bildkompression und Optimierung
• ImageRecycle Bildkompression
• SEO Photo Optimizer
• Minifier – Bild- und Website-Optimierung

Magento

• Image Magick

Outsourcing Ihrer Bildgrößenanpassung

Wenn Sie eine sehr große Anzahl von Bildern haben, die komprimiert oder in der Größe geändert werden müssen, sollten Sie darüber hinaus Outsourcing-Optionen in Betracht ziehen. Viele Bildbearbeitungsdienste können auch andere Bearbeitungsaufgaben ausführen, z. B. Hintergrundentfernung oder Schlagschatten.

Das Endergebnis

Wenn es darauf ankommt, hängt es von Ihren spezifischen Anforderungen ab, die beste Lösung zu finden, um die Dateigröße Ihrer Bilder zu reduzieren und gleichzeitig die Qualität beizubehalten. Einmalige Bilder können mit kostenlosen Web-Tools, Anwendungen und Plugins einfach selbst bearbeitet werden. Wenn Sie jedoch Bilder in großen Mengen auf Ihre Website hochladen, ist eine robustere — und manchmal kostenpflichtige — Lösung möglicherweise für Ihr Unternehmen am sinnvollsten, insbesondere wenn Sie mehr als nur Größenänderung und Komprimierung benötigen.

Rokaiya Yeasmin Munni

Als Manager für digitales Marketing bei Clipping Path India möchte Rokaiya Einzelhändlern und Fotografen helfen, Marketingstrategien und -taktiken einzusetzen, die ihr Geschäft verbessern. Sie hat einen 19-jährigen Hintergrund in Grafikdesign, Content Management, PPC und digitalem Marketing.