Was ist das Ärgerlichste am Surfen auf einer Webressource, sei es eine Corporate Website, eine Microsite oder eine Landingpage? Hässliches Website-Design, unstrukturierte Informationen oder unästhetische Schriften? Zweifellos gibt es jedoch einen Punkt, aufgrund dessen wir möglicherweise nicht einmal dazu kommen, das Design der Website oder die Informationen zu bewerten, die wir so dringend benötigen. Was ist das? Und das ist die Ladezeit der Website. Ist es Ihnen schon einmal passiert, dass Sie die Website schließen, ohne darauf zu warten, dass die Seite vollständig geladen ist, da das Laden der Website ewig dauert? Natürlich!
Darüber hinaus achtet Google sehr auf die Ladegeschwindigkeit der Seite und rankt Ihre Seite auch abhängig davon. Deshalb werden wir heute in unserem Artikel über einen der Punkte sprechen, der Ihrer Website helfen wird, noch schneller zu werden und nicht wie Flash das Faultier zu funktionieren. Bilder optimieren – das brauchen Sie! Nun, fangen wir an!
Ester Digital entwickelt Websites mit CMS wie TYPO3, WordPress, Laravel und anderen. Wir freuen uns auf Ihre Kontaktaufnahme!
Bildoptimierung – Was ist das?
Bilder für Web und Performance optimieren bedeutet, sie auf irgendeine Weise zu modifizieren, um ihre Größe zu reduzieren, ohne die Qualität zu beeinträchtigen.
Warum ist es so wichtig, Bilder zu optimieren? Wenn Sie einem Link zu einer Website folgen, lädt der Server alle Dateien der Website herunter, um sie auf Ihrem Bildschirm anzuzeigen. Manchmal können Bilder eine sehr große Datenmenge enthalten, die heruntergeladen werden muss. Da eine große Menge an geladenen Daten eine Website verlangsamt, ist die Optimierung von Bildern für das Web eines der ersten Dinge, die wir tun, wenn wir an der Verbesserung der Website-Geschwindigkeit arbeiten. Je kleiner die Bilddateigröße ist, desto schneller lädt die Website.
Zur Bildoptimierung setzen wir Datenkompression ein, d. h. wir reduzieren die Datenmenge im Bild, was sowohl mit Verlust als auch ohne Qualitätsverlust möglich ist. Worin besteht der Unterschied?
Bei der verlustbehafteten Komprimierung wird das Bild vergrößert und einige Daten werden teilweise entfernt. So funktioniert beispielsweise JPG. Dieses Format klebt gleichsam Pixel ähnlicher Farbe zusammen, um auf diese Weise die Dateigröße zu reduzieren. Aber Sie möchten nicht, dass Ihre Site-Bilder unscharf aussehen, insbesondere in Zeiten von hochauflösenden Bildschirmen.
Die verlustfreie Komprimierung reduziert die Dateigröße, ohne die Bildqualität zu beeinträchtigen. Es gehen bei dieser Methode keine Daten verloren. PNG ist ein gutes Beispiel für verlustfreie Komprimierung.
Allerdings wird PNG für unsere Zwecke nicht immer geeignet sein, da die zweite Art der Komprimierung die Datei viel größer als nötig machen kann. Daher ist es sehr wichtig zu wissen, welches Bildformat zu verwenden ist.
Die Haupttypen von Bildformaten
Lassen Sie uns nun die Arten von Bildformaten verstehen, die uns beim Erreichen unserer gewünschten Ziele helfen können.
JPEG. Dieser Dateityp ist ideal für kamerabasierte Bilder, da er eine große Menge an Farben einfängt, während die Dateigröße relativ klein bleibt. Nur wegen der verlustbehafteten Komprimierung, weil dieser Dateityp einige Informationen entfernt, indem Farben kombiniert werden, die nahe beieinander liegen, wodurch eine akzeptable Qualität für das Internet entsteht. Sie sollten jedoch nicht vergessen, dass Sie es mit der Komprimierung übertreiben können und eine sehr kleine Dateigröße erhalten, während Sie die Bildschärfe verlieren.
PNG. Das PNG-Format eignet sich für Bilder mit wenigen Farben (z. B. Logos und Icons). Dieses Format ist nur für Internetzwecke gedacht, aber zum Ausdrucken ist dieses Format nicht geeignet, da beim Drucken eine Verpixelung sichtbar wird, es sei denn, die Bilder werden größer gespeichert, aber kleiner gedruckt. PNGs werden auch verwendet, wenn Sie ein Bild mit transparentem Hintergrund benötigen.
SVG. Dies ist ein Vektorformat – das heißt, beim Erstellen eines Bildes wurden keine Pixel verwendet, sondern mathematischer Code. Vektordateien wurden schon immer für alle Druckarten verwendet, da ein Vektorbild seine Qualität unabhängig von der Größe behält. Die meisten anderen Dateitypen, die im Internet verwendet werden, sind Pixel-(Bitmap-)Formate. Wenn Sie beispielsweise eine PNG-Datei auf Ihre Website hochladen und die Abmessungen größer einstellen, als die Datei tatsächlich ist, verliert das PNG einen Teil seiner Lesbarkeit. Mit SVG-Bildern können Sie Bilder jeder Größe erstellen, ohne an Klarheit zu verlieren.
WEBP. Google hat dieses Format speziell für eine bequeme Optimierung entwickelt und kombiniert die besten Eigenschaften von JPEG und PNG. Es bietet ein geringes Datengewicht, hervorragende Bildklarheit und Transparenzunterstützung. Dieses Format wird jedoch nicht vom Safari-Browser unterstützt, sondern nur von Chrome, Edge und Firefox.
Tools, um Bilder zu optimieren
Es gibt eine große Anzahl von Tools, mit denen Sie Bilder für Website komprimieren können, ohne zu viel Qualität und Klarheit zu verlieren. Hier sind einige:
TinyPng ist eine großartige Option, um sowohl PNG-Dateien, einschließlich solcher mit Transparenz, als auch JPG-Dateien ohne Qualitätsverlust zu komprimieren. Sehr praktisch beim Posten von Bildern für einen Blog oder eine andere Website, auf der Sie Bilder verwenden müssen. Sie müssen nur auf die Serviceseite gehen, dort Bilder hochladen, ein paar Sekunden warten und voilà, Sie erhalten ein optimiertes Bild. TinyPNG ist auch als Plugin für Photoshop verfügbar, und es gibt sowohl eine begrenzte kostenlose Version als auch ein kostenpflichtiges Abonnement.
ImageMagick ist ein ziemlich praktisches Tool zum schnellen Anpassen von Einstellungen über die Befehlszeile. ImageMagick kann auf allen gängigen Betriebssystemen installiert und zur Optimierung von JPEG-Bildern verwendet werden. Außerdem ist der Service großartig, da Sie die gewünschte Bildqualität für die Optimierung einstellen können.
Compressnow hilft Ihnen beim Komprimieren von JPG-, PNG- und GIF-Dateiformaten. Sie können die gewünschte Komprimierungsstufe auch selbst einstellen und ganz bequem das Ergebnis durch ein kleines Vorschaufenster sehen und entscheiden, ob Sie das resultierende Bild herunterladen möchten.
Mit JPEG Optimizer können Sie JPG-Dateien optimieren, indem Sie nicht nur das Komprimierungsverhältnis auswählen, sondern auch die Bildabmessungen anpassen.
Eine weitere für die Bildkomprimierung geeignete Option ist Photoshop. Sie können das Bild im Bereich „Bild > Bildgröße“ verkleinern. Danach bietet Photoshop an, das Bild in gängigen Formaten zu speichern. Sie können dies auch tun, indem Sie „Datei“ > „Für Web speichern“ wählen. Durch die Installation des Plugins können Sie auch Dateien im WebP-Format speichern. Wenn Sie sich jedoch nicht mit Fotobearbeitung beschäftigen, sondern nur einen Service speziell zum Komprimieren von Bildern suchen, ist es sinnvoll, eine andere Option zu wählen, da Photoshop nicht automatisch eine große Anzahl von Bildern komprimiert. Außerdem ist es ein sehr teures Fotobearbeitungsprogramm.
Mit Optimizilla können Sie gleichzeitig bis zu 20 Dateien in Formaten wie JPG und PNG herunterladen und komprimieren. Der Service arbeitet auch mit automatischen Einstellungen für die Komprimierungsqualität und ermöglicht es Ihnen, die Einstellungen für jede Datei manuell anzupassen.
Was ist mit Plugins?
Wir alle können den Erfindern von WordPress gutes Karma schicken, denn dank WordPress haben wir die Möglichkeit, viele Prozesse zu automatisieren, einschließlich der Bildkomprimierung. Es gibt eine Vielzahl von WordPress Plugins, die Ihnen bei dieser schwierigen Aufgabe helfen – Bilder komprimieren und formatieren und das Damoklesschwert der manuellen Formatierung entfernen, das über Ihnen hängt. Beispielsweise gibt es Plugins, die Dateien sowohl während des Downloadvorgangs als auch nach Abschluss des Downloads optimieren, was eine sehr praktische Funktion ist. Welche Plugins helfen Ihnen also, Ihre Leistung zu verbessern? Das sind einige davon:
Imagify
Imagify ist eines der besten Bildoptimierungs-Plugins, da es direkt in WordPress verwendet werden kann und sich die Qualität bei der Verwendung nicht verschlechtert. Es konvertiert auch Ihre Bilder in WebP, was für SEO nützlich ist. Und wenn Sie mit dem Ergebnis der Optimierung eines Bildes nicht zufrieden sind, verfügt Imagify über eine Rollback-Funktion.
ShortPixel
ShortPixel ist ein wunderbares Plugin, das Ihre Arbeit mit Bildern erheblich vereinfacht. Einige der großen Pluspunkte sind, dass die Bilder in der Cloud komprimiert und verarbeitet werden, sodass Ihr Server während des Betriebs nicht zusätzlich belastet wird. Es gibt auch keine Dateigrößenbeschränkungen, ShortPixel optimiert jede Dateigröße. Abhängig von der Anzahl der Bilder, die Sie pro Monat verarbeiten müssen, können Sie außerdem ein Paket auswählen, das zu Ihrer Tasche passt.
Optimus
Optimus ist ein WordPress-Plugin, das Ihnen hilft, die Bildgröße erheblich zu reduzieren (bis zu 70 Prozent) und gleichzeitig die Bildqualität beizubehalten. Der Dienst bietet Benutzern drei Pakete, eines kostenlos und zwei Premium (erweitert und für den professionellen Einsatz). Was sind die Vorteile des Plugins – Keine Notwendigkeit, den Code anzupassen, Unterstützung für WooCommerce, WordPress Multisite und Massenoptimierung.
Fazit
Die Bildoptimierung ist einer der ständigen und wichtigsten Arbeitsschritte von einem Webdesigner oder Digitalkünstler, denn davon hängt maßgeblich die Ladegeschwindigkeit einer Seite und gleichzeitig das Ranking der Suchmaschinen ab. (Mehr über die weiteren Arbeitsschritte der Webdesigner – von der Erstellung von Wireframes bis zur Optimierung der Benutzeroberfläche für mobile Geräte – erfahren Sie in unserem Blog) In diesem Artikel haben wir die wesentlichen Informationen zur Bildoptimierung behandelt und einige der Dienste vorgestellt, die Ihnen bei der Optimierung Ihrer Bilder helfen. Wir empfehlen, einige davon auszuprobieren, um die für Sie am besten geeignete auszuwählen. Wenn Ihr Unternehmen in Kiel oder einer anderen Stadt in Deutschland, Österreich oder der Schweiz Hilfe bei der Bildoptimierung oder der Umsetzung bestimmter Ideen benötigt, wenden Sie sich an unser Ester-Team.
Copied!
