So optimieren Sie Bilder für das Web: Eine Schritt-für-Schritt-Anleitung für eine bessere Website-Performance

Es besteht kein Zweifel, dass Bilder für das World Wide Web von unschätzbarem Wert sind. Von der Visualisierung von Daten über die Aufteilung von Textabsätzen bis hin zur Präsentation Ihrer Portfolioarbeit sind Fotos und Grafiken ein wichtiger Bestandteil der meisten Website-Designs und helfen den Benutzern, großartige Online-Erlebnisse zu haben.

Eine großartige Optik kann jedoch Ihre Website in Mitleidenschaft ziehen. Mit höheren Auflösungen gehen größere Dateigrößen einher, was auch langsamere Ladezeiten bedeutet. AKA, Bilder sind oft die Ursache für eine schlechte Website-Performance. Und denken Sie daran, dass der ganze Sinn des Hinzufügens von Bildern zu Ihrer Website darin besteht, ein besseres Erlebnis für Ihre Benutzer zu schaffen (oder vielleicht sogar den Umsatz und die Conversions zu steigern!), was mit einer langsamen Website schwer zu erreichen ist.

Wie bringen Sie also die Leistung der Website mit dem visuellen Design in Einklang?

Indem Sie Ihre Bilder optimieren.

Es gibt viele kleine Dinge, die Sie während des Bilderstellungsprozesses tun können, um die Dateigröße zu optimieren, insbesondere im Hinblick auf Ihre Website.

In dieser Schritt-für-Schritt-Anleitung zur Bildoptimierung gehe ich auf Folgendes ein:

• Was ist Bildoptimierung?
• Warum ist Bildoptimierung wichtig?
• 7 Möglichkeiten, Bilder für das Web zu optimieren

Was ist Bildoptimierung?

Im Allgemeinen ist die Bildoptimierung das Verringern der Dateigröße ohne Qualitätsverlust. Sie können Ihre Bilder in der Erstellungsphase optimieren (indem Sie die richtigen „Export“-Optionen in Photoshop verwenden) oder direkt auf Ihrer Website (indem Sie Lazy Load verwenden, um Medien auf Ihrer Website anzuzeigen). Das Ziel besteht darin, die Datenmenge zu reduzieren, die ein Benutzer herunterladen muss, damit er die gesuchten Inhalte schneller und ohne Qualitätseinbußen erhält.

Warum ist Bildoptimierung wichtig?

Menschen haben kurze Aufmerksamkeitsspannen, wenn es um das Web geht, weshalb es wichtig ist, dass Ihre Website in zwei Sekunden oder weniger geladen wird. Und einer der häufigsten Faktoren, der Ihre Website verlangsamt, sind Ihre Bilder. (Selbst wenn Ihre Website auf den besten Servern läuft, wie Sie es mit einem verwalteten WordPress-Host erhalten, können Bilder die Leistung beeinträchtigen.)

Indem Sie die Best Practices für die Bildoptimierung nutzen, halten Sie Ihre Dateigröße klein und Ihre Ladezeit kurz und schaffen so ein besseres Erlebnis für Ihre Website-Besucher.

Es gibt jedoch noch einen weiteren Grund, warum die Bildoptimierung wichtig ist, einer, der direkt mit dem Gewinn Ihres Unternehmens zusammenhängt. Neben der Verlangsamung Ihrer Website beanspruchen Bilder Speicherplatz auf dem Server, der Ihre Website betreibt. Die meisten Hosting-Anbieter erzwingen ein Bandbreitenlimit pro Plan, was bedeutet, dass Sie nicht über unbegrenzte Ressourcen verfügen – und Ihre Bilder werden diesen Platz schnell einnehmen.

Es ist zwar nicht das Ende der Welt, wenn Sie dieses Limit überschreiten, aber Ihnen kann eine Überschreitungsgebühr in Rechnung gestellt werden, oder schlimmer noch, Ihre Website wird geschlossen.

Indem Sie Ihre Bilder optimieren, können Sie den Speicher Ihrer Website optimal nutzen und diese Bandbreitenbeschränkung umgehen.

Jetzt, da Sie wissen, wie wichtig die Bildoptimierung ist, lassen Sie uns darüber sprechen, wie es geht! Diese Schritt-für-Schritt-Anleitung deckt alles ab, von Photoshop-Tipps bis hin zu Entwicklungsverfahren.

So optimieren Sie Bilder für das Web

Diese Schritt-für-Schritt-Anleitung behandelt alles, was Sie tun können, um Bilder zu optimieren, angefangen in Photoshop bis hin zu Ihrer Website.

Befolgen Sie diese Schritte, um Ihre Bilder für eine bessere Websiteleistung zu optimieren:

1. Benchmarken Sie Ihre aktuelle Website-Geschwindigkeit.
2. Wissen, wie man den besten Bilddateityp auswählt.
3. Ändern Sie die Größe Ihrer Bilder vor dem Exportieren.
4. Bilder komprimieren, um die Dateigröße zu reduzieren.
5. Automatisieren Sie die Bildoptimierung mit einem WordPress-Plugin.
6. Verwenden Sie die „Blur-up“-Technik, um zuerst ein Bild mit geringerer Qualität zu laden.
7. Verwenden Sie Lazy Loading.

1. Benchmarken Sie Ihre aktuelle Website-Geschwindigkeit

Bevor Sie all diese Arbeit zur Optimierung Ihrer Bilder machen, führen Sie zunächst einen Geschwindigkeitstest auf Ihrer Website durch! Am Ende können Sie sehen, welche Wirkung Sie erzielt haben (und Sie können dies mit Ihrem Team oder Ihrem Chef teilen, um zusätzliche Anerkennung zu erhalten). Einige beliebte Geschwindigkeitstest-Tools sind:

• Google PageSpeed ​​Insights
• Pingdom-Tools
• GTMetrix
• WebseitenTest

Diese browserbasierten Tools funktionieren alle ziemlich ähnlich: Öffnen Sie den Link und geben Sie dann Ihre URL ein, um einen schnellen Bericht über die Geschwindigkeit und Leistung Ihrer Website zu erhalten.

2. Wissen, wie man den besten Bilddateityp auswählt

Wenn Sie mit dem Erstellen von Bildern fertig sind (entweder von Ihrer Kamera speichern oder aus einem Tool wie Photoshop exportieren), haben Sie die Möglichkeit, den Dateityp anzugeben. Die gängigsten Dateitypen für die Verwendung im Web sind JPEGs, PNGs und GIFs. Und wie Sie sicher erraten können, haben sie alle ihre eigenen Vor- und Nachteile und Best Practices, wenn sie auf Ihrer Website platziert werden.

JPEGs

JPEG-Bilder eignen sich am besten zum Präsentieren komplexer Farbfotos auf Ihrer Website, da sie eine höhere Bildqualität bei kleinerer Dateigröße ermöglichen. Dieser Dateityp funktioniert wahrscheinlich für die meisten Bilder, die Sie auf Ihrer Website verwenden möchten, mit einer großen Ausnahme: Bilder mit transparentem Hintergrund. (Siehe dazu den nächsten Abschnitt über PNGs!)

Wenn Sie ein JPEG-Bild für Ihre Website verwenden, sollten Sie es als „Progressiv“ exportieren. Dadurch kann der Browser sofort eine einfache Version des Bildes laden, bevor er die volle Auflösung vollständig auf die Website lädt.

Wenn Sie in Photoshop arbeiten, finden Sie diese Einstellung beim Export als „Für Web speichern“.

PNGs

Wenn Sie nicht viel Farbe in Ihrem Bild haben (z. B. flache Illustrationen oder Symbole) oder einen transparenten Hintergrund haben möchten, empfehle ich den Export als PNG. Stellen Sie sicher, dass Sie die richtigen Bildabmessungen haben, und suchen Sie nach der Option zum Speichern als PNG-24 (oder 8, wenn es keinen Qualitätsverlust gibt).

GIFs

Das dritthäufigste Bildformat für das Web sind GIFs. Sie unterstützen nur 256 Farben, also müssen Sie bei diesem Dateityp wählerisch sein!

Um GIFs für Ihre Website zu optimieren, denken Sie kritisch darüber nach, wie lange sie halten, ob sie wiederholt werden müssen und wie viele Sie wirklich auf einer bestimmten Seite oder Website benötigen.

3. Ändern Sie die Größe Ihrer Bilder, bevor Sie sie hochladen

Eine der einfachsten Möglichkeiten, Bilder für das Web zu optimieren, besteht darin, ihre Größe zu ändern, bevor Sie sie auf Ihre Website hochladen. Besonders wenn Sie mit Rohbildern einer DSLR-Kamera arbeiten, sind die Abmessungen oft viel größer als Sie eigentlich benötigen.

Angenommen, Sie fügen Bilder zu einem Blog-Artikel auf Ihrer Website hinzu. Wenn Ihr WordPress-Theme Bilder mit 500 x 500 anzeigt, Sie aber Bilder mit einer Auflösung von 1024 x 1024 hochladen, erhöhen all diese zusätzlichen Pixel nur die Dateigröße und verringern die Website-Geschwindigkeit, ohne einen wirklichen Vorteil zu bieten.

Indem Sie Ihre Bilder vor dem Hochladen zuschneiden oder ihre Größe ändern, verringern Sie die Dateigröße, wodurch Ihre Website etwas schneller geladen wird und Sie Speicherplatz für noch mehr Bilder sparen.

Um die Größe Ihres Bildes zu ändern, öffnen Sie einfach die Bildbearbeitungssoftware Ihrer Wahl. Photoshop funktioniert gut, oder Sie können auch einfachere Tools wie Preview (für Macs), Paint (für Windows) oder Canva (ein Browser-Tool) verwenden.

4. Bilder komprimieren, um die Dateigröße zu reduzieren

Sobald Sie Ihr endgültiges Bild haben, im richtigen Format gespeichert und auf eine geeignete Größe zugeschnitten haben, gibt es einen weiteren Schritt, den Sie unternehmen können, um es zu optimieren, bevor Sie es auf Ihre Website hochladen: es zu komprimieren.

Dieser Vorgang hilft Ihnen, die Dateigröße zu verkleinern, ohne dass die Bildqualität merklich verloren geht. Es gibt zwei Haupttypen der Komprimierung: verlustbehaftet und verlustfrei.

Bei der verlustfreien Komprimierung bleibt die Qualität vor und nach der Komprimierung gleich. Bei der verlustbehafteten Komprimierung werden einige Elemente des Fotos verworfen, jedoch normalerweise auf eine Weise, die das menschliche Auge nicht bemerkt. Um mehr über diese Komprimierungsarten zu erfahren, empfehle ich diese Anleitung von Imagify.

Wenn Sie sehen, dass ein bestimmtes Bild auf Ihrer Website geladen wird und langsam sichtbar wird, kann dies ein Zeichen dafür sein, dass es komprimiert, in der Größe angepasst oder beides benötigt wird.

Um Ihre Bilder zu komprimieren, benötigen Sie lediglich ein Bildkomprimierungstool. Zu meinen Favoriten gehören:

• TinyPNG: Ein kostenloses browserbasiertes Tool zum Komprimieren von PNG- und JPEG-Bildern.
• ImageOptim: Eine kostenlose Open-Source-App zum Komprimieren von Bildern.
• JPEGmini: Eine App zum erneuten Komprimieren von Fotos für Mac und Windows.
• RIOT: Eine kostenlose Windows-App zum Optimieren von Bildern.
• Image Optimizer: Ein kostenloses Add-on für Local.

TinyPNG

Dieses browserbasierte Tool optimiert Bilder mithilfe intelligenter verlustbehafteter Komprimierung und reduziert Ihre Dateigröße, indem es die Anzahl der verwendeten Farben verringert. (Aber keine Sorge, Sie werden es nicht einmal bemerken!) Es ist kostenlos und schnell für PNGs und JPEGs zu verwenden.

ImageOptim

Dies ist eine kostenlose Mac-App, die Bilder komprimiert, indem unnötiges Aufblähen entfernt wird, während so viel Bildqualität wie möglich erhalten bleibt.

JPEGmini

JPEGmini ist eine leistungsstarke kostenpflichtige Option, mit der Sie die Dateigröße reduzieren und gleichzeitig Qualität und Format beibehalten können. Es gibt eine kostenlose Testversion, sodass Sie es vor dem Kauf testen können.

AUFSTAND

Das Radical Image Optimization Tool (RIOT) ist eine kostenlose Windows-App zum Reduzieren der Bilddateigröße. Es verfügt über eine Side-by-Side-Ansicht, sodass Sie die Bildqualität vor und nach der Komprimierung vergleichen können.

Image Optimizer, ein kostenloses Add-on für Local

Wenn Sie Local als Ihre lokale Entwicklungsumgebung verwenden, können Sie das Bildoptimierungs-Add-on verwenden, um Bilder automatisch offline zu komprimieren. Es durchsucht Ihre Website nach allen Bilddateien, spart Ihnen die Zeit, sie einzeln zu komprimieren, und beschleunigt dabei Ihre Website.

5. Automatisieren Sie die Bildoptimierung mit einem WordPress-Plugin

An diesem Punkt fangen Sie vielleicht an zu denken, dass die Bildoptimierung eine Menge Arbeit ist – und das kann es sein! Aber es gibt auch eine einfache Möglichkeit, einige dieser Schritte zu rationalisieren, und zwar durch die Installation eines Bildoptimierungs-Plugins auf Ihrer WordPress-Site.

Ich habe ein paar Empfehlungen, und sie alle haben einzigartige Eigenschaften. Aber im Allgemeinen wird ein Bildoptimierungs-Plugin Ihre Bilder komprimieren und ihre Größe ändern, wenn Sie sie auf Ihre WordPress-Seite hochladen. Das bedeutet, dass Sie diese Schritte überspringen können, anstatt sie manuell auszuführen, was eine große Zeitersparnis bedeutet.

Diese Methode ist auch praktisch, wenn Sie Sites für Kunden erstellen. Es ist ein großer Druck für den Endbenutzer und die Ersteller von Inhalten, sich an jeden Schritt des Bildoptimierungsprozesses zu erinnern. Indem Sie ein Plugin installieren, das ihnen die meiste Arbeit abnimmt, tragen Sie dazu bei, die Geschwindigkeit und Leistung der von Ihnen erstellten Website sicherzustellen, sobald Sie sie übergeben haben.

Um Bilder auf einer WordPress-Seite zu optimieren, empfehle ich diese Plugins:

• EWWW Image Optimizer Cloud
• TinyPNG
• Kracken.io
• Stellen Sie sich vor

EWWW Image Optimizer Cloud

Dieses WordPress-Plugin optimiert Ihre Bilder automatisch, wenn Sie sie auf Ihre Website hochladen, oder es kann auch Bilder optimieren, die Sie in der Vergangenheit hochgeladen haben. Dies macht es unglaublich vorteilhaft, wenn Sie mit einer bestehenden Website mit nicht optimierten Bildern arbeiten.

TinyPNG

Dieses WordPress-Plugin des TinyPNG-Teams kann JPEG- und PNG-Bilder beim Hochladen optimieren. Wenn Sie ein Fan des browserbasierten Tools sind, optimieren Sie den Prozess mit dem kostenlosen Plugin!

Kracken.io

Das Kracken.io-Plugin kann sowohl neue als auch vorhandene Bilder auf Ihrer WordPress-Seite optimieren. Es unterstützt auch sowohl verlustfreie als auch verlustbehaftete Komprimierungsmodi, wodurch Sie viel Kontrolle über das Endergebnis haben.

Stellen Sie sich vor

Dieses WordPress-Plugin hilft Ihnen, Ihre Bilder zu optimieren, ohne an Qualität zu verlieren. Es ist auch mit WooCommerce und NextGen Gallery kompatibel, wenn Sie diese Plugins verwenden.

Hinweis: Bevor Sie sich für ein Plugin entscheiden, schauen Sie sich unbedingt an, wie es funktioniert. Einige verwenden serverbelastende Vorgänge, die Probleme auf Ihrer Website verursachen können, während andere FTP-Optionen verwenden, um die Belastung Ihres Webservers zu verringern.

6. Verwenden Sie die „Blur Up“-Technik, um zuerst ein Bild mit geringerer Qualität zu laden

Selbst nach all den vorherigen Optimierungsschritten gibt es Fälle, in denen Sie möglicherweise immer noch mit großen Dateigrößen oder vielen Bildern auf einer Seite arbeiten, was die Geschwindigkeit Ihrer Website verlangsamt. In diesen Fällen ist es manchmal hilfreich, nicht nur die Bilder zu optimieren, sondern auch das Ladeerlebnis zu optimieren, damit Website-Besucher glauben, dass Ihre Mediendateien schneller geladen werden, als sie es wirklich sind.

Darum geht es in den nächsten beiden Schritten – Bilder schneller laden zu lassen, damit die Benutzer nicht nur auf eine leere Seite starren, während Ihre Dateien geladen werden.

Eine Möglichkeit, dies zu tun, besteht darin, zuerst ein Bild niedrigerer Qualität (LQI) zu laden. Indem eine kleinere Version des Bildes geladen wird, bevor die volle Größe geladen wird, gibt es dem Benutzer etwas zu sehen, während er auf alle Details wartet. Dies vermittelt den Eindruck einer schnelleren Ladezeit, selbst wenn technisch gesehen alles mit der gleichen Geschwindigkeit geladen wird.

Eine beliebte Methode dafür ist die „Blur-Up“-Technik, deren Umsetzung Sie mit diesem Tutorial zu CSS-Tricks erlernen können.

7. Lazy Load Ihre Site-Bilder

Ähnlich wie bei der „Blur-Up“-Technik gibt es einen weiteren Trick, der Ihnen dabei hilft, den Anschein zu erwecken, dass Bilder schneller geladen werden: Lazy Loading.

Wenn jemand auf Ihrer Website landet, beginnt er oben auf der Seite. Sie werden wahrscheinlich einen Moment brauchen, um die gesamte Seite zu scrollen, besonders wenn sie beschäftigt sind. Anstatt zu versuchen, alle Bilder auf einmal zu laden, geht Lazy Loading davon aus, dass sich die Benutzer am meisten um die Inhalte kümmern, die sie sehen können. Die Bilder in ihrer Browseransicht werden also zuerst vollständig geladen, während die anderen Bilder zuerst einen Platzhalter laden, bis der Benutzer zu diesem Abschnitt der Seite scrollt.

Lazy Loading ist eine großartige Technik für sich und noch leistungsfähiger, wenn sie mit den anderen Tipps zur Bildoptimierung kombiniert wird! Und dank des Smush-Plugins ist es auf einer WordPress-Site sehr einfach.

Damit ist unsere Schritt-für-Schritt-Anleitung für eine bessere Website-Performance durch Bildoptimierung abgeschlossen! Führen Sie einen weiteren Geschwindigkeitstest durch, um zu sehen, welche Auswirkungen dies auf Ihre Website hatte. Wie geht es dir?

Mit den richtigen Bildoptimierungstools können Sie in kürzester Zeit eine bessere Website-Geschwindigkeit und -Leistung feststellen!