Tools zur Bildoptimierung

Die Bildoptimierung ist eine einfache und effektive Lösung, damit Ihre Webseite auf Smartphones und Computern der Nutzer schneller geladen wird. Dabei verschlechtert sich die Attraktivität der Grafiken nicht, da ihre Qualität praktisch nicht abnimmt. Hauptsache – man macht alles richtig.

Durch die vorherige Aufbereitung der Fotos laden die Seiten schneller, und der Inhalt sieht proportionaler und korrekter aus. Den Nutzern wird es angenehmer, die Webseite zu benutzen, was sich positiv auf die Conversion-Rate und die durchschnittliche Sitzungsdauer auswirken kann.

Damit die Fotooptimierung für Sie schneller abläuft, habe ich an einem Ort die besten Werkzeuge dafür zusammengestellt. Sie helfen beim Komprimieren, Vergrößern und Zuschneiden von Bildern. Gerne erzähle ich Ihnen ausführlich über alle entsprechenden Tools weiter unten.

Die Seitenladezeit durch Bildkomprimierung zu beschleunigen – das ist eine leichte Aufgabe, wenn man coole Dienste dafür kennt.

Wozu braucht man Bildoptimierung

Sie kann die Komprimierung, das Zuschneiden oder die Vergrößerung von Grafiken umfassen, die ursprünglich andere technische Eigenschaften hatten. All diese Aufgaben zielen hauptsächlich darauf ab, dass Landingpages, die nicht nur Text enthalten, besser funktionieren: schneller, komfortabler, ansprechender.

Wann die Bildoptimierung für die Webseite Ihnen noch nützlich sein kann:

• Sie möchten die Ladezeit beschleunigen und durch Fotokorrektur ein paar zusätzliche Sekunden für den Besucher gewinnen;
• Sie müssen tolle, leuchtende Grafiken auf die Webseite hochladen, dabei aber deren Größe ohne Verschlechterung der visuellen Eigenschaften reduzieren;
• Sie planen eine Komprimierung, um ein Profilbild in ein soziales Netzwerk hochzuladen, wo es bestimmte Größenbeschränkungen gibt;
• Sie möchten, dass die Grafiken auf den Seiten einheitlich groß sind.

Die Bildoptimierung für Webseiten (bei richtiger Umsetzung) zielt auf die Erhöhung der Seitenladegeschwindigkeit ab.

Ich denke, Sie sind vielleicht schon auf die Notwendigkeit gestoßen, diese Aufgaben zu lösen, wussten aber entweder nicht, wie man es macht, oder haben mit Diensten gearbeitet, die die Grafiken stark beschädigt haben. Dabei zeigt sich, dass Komprimierung und Zuschnitt eine Sache von wenigen Minuten, manchmal sogar Sekunden sind, wenn man das nötige Wissen hat.

Grundlegende Parameter von Bildern auf der Webseite

Bilder lassen sich anhand von drei Schlüsselparametern optimieren:

1. Format.
2. Qualität.
3. Abmessungen.

Möchten Sie mehr über jeden Parameter erfahren? Lesen Sie weiter.

Die wichtigsten Bildformate

Menschen erstellen verschiedene grafische Webobjekte in unterschiedlichen Formaten, je nach den Bedingungen und Aufgaben in der jeweiligen Situation. Es gibt unzählige davon, aber ich nehme die wichtigsten als Beispiel.

Ich hebe die 5 beliebtesten hervor:

• JPEG – die Grundlage für die Speicherung von Fotos;
• BMP – Raster-BMP-Dateien werden nicht komprimiert, weshalb ihr Gewicht oft zu groß ist;
• GIF – Animationen in Form eines wenige Sekunden langen Mini-Videos;
• PNG – Designer lieben es wegen des transparenten Hintergrunds;
• SVG – auf dessen Basis erstellen Nutzer Vektorgrafiken.

Außerdem zwei Formate, die an Popularität gewinnen:

• WebP — ein von Google im Jahr 2010 entwickeltes Format, mit dem man die Bildgröße erheblich reduzieren kann, ohne an Qualität zu verlieren.
• AVIF — ein absolut neues Format, das 2-mal weniger als JPEG und 20% weniger als WebP wiegt (ein neuer Trend für Webmaster).

Grafiken in allen oben genannten Formaten werden in den gängigen Suchmaschinen indexiert.

Bildqualität

Die Fotooptimierung für die Webseite ist eine nützliche Sache, aber man sollte dieses Werkzeug nicht überstrapazieren. Denken Sie daran, dass die in den Inhalt eingebetteten visuellen Elemente in erster Linie von den Lesern betrachtet werden. Damit die Grafik den Nutzern gefällt und die Botschaft vermittelt, die der Autor in das Material gelegt hat, muss sie Aufmerksamkeit erregen, zum Thema des Inhalts passen und scharf sein (nicht verschwommen).

Technische Korrekturen können sich negativ auf alle aufgeführten Punkte auswirken, wenn man fanatisch alles komprimiert, was komprimierbar ist.

Ausgehend vom oben Gesagten sollte die Fotooptimierung für die Webseite durch die Brille des Nutzers betrachtet werden und sich nicht nur auf irgendwelche technischen Kennzahlen stützen. Die grundlegenden visuellen Eigenschaften der Grafik können durch unangemessene Reflexionen, Trübung, Pixelierung und das Beschneiden wichtiger grafischer Elemente negativ beeinflusst werden.

Dateigröße

Die Besonderheiten dieses Parameters betrachten wir von zwei Seiten:

• Höhe und Breite — Werte, die in Pixeln gemessen werden können;
• wie viel der Quellcode in Megabyte wiegt.

Wenn man die Frage technisch betrachtet, zielt die Online-Bildoptimierung für Webseiten hauptsächlich darauf ab, die Seitenladezeit zu beschleunigen. Wie erreicht man das, indem man die Dateigröße beeinflusst? Man verkleinert sie. Zum Beispiel wog ein Objekt 2 Megabyte, und Sie reduzieren diesen Wert technisch fast auf die Hälfte. Entsprechend wird die Grafik dank dieser Maßnahme schneller auf den Seiten geladen.

Spezielle Dienste und Programme helfen dabei, die Dateigröße der Grafiken zu reduzieren. Darüber erzähle ich weiter unten. Mit Hilfe spezieller Software lässt sich diese Aufgabe schnell und einfach lösen, und das grundlegende Erscheinungsbild des Ausgangsmaterials wird dabei nicht beeinträchtigt.

Bilder online nach Höhe und Breite optimieren können Sie mit Hilfe der Zuschneidefunktion. Bestimmen Sie die Maße, in denen die Fotos auf den Seiten angezeigt werden sollen. Dann schneiden Sie sie auf die gewünschte Höhe und Breite zu.

Viele CMS und Plugins können Bilder selbst nach den standardmäßig festgelegten Parametern optimieren. In diesem Fall müssen Sie nur die Fotos/Bilder hochladen, und der Rest der Arbeit geschieht automatisch.

Werkzeuge zur Bildoptimierung

Die Bildkomprimierung für die Webseite kann auf verschiedene Arten durchgeführt werden:

• Online-Dienste verwenden;
• Desktop-Programme installieren;
• speziellen Programmcode schreiben.

Viele Dienste und Programme sind kostenlos. Bezahlung kann für leistungsstarke Software mit großartigen Funktionen nötig sein: Massenverarbeitung, nahezu sofortiges Laden, zahlreiche Zusatzfunktionen.

TinyPNG

Die einfache und intuitive Benutzeroberfläche von TinyPNG lässt keine Fragen offen, wie man Fotos ohne Qualitätsverlust über den Dienst komprimieren kann. Mit seiner Hilfe optimieren Nutzer bis zu 500 Fotos pro Monat kostenlos. Wer die Arbeit der Entwickler honorieren möchte, kann eine Spende hinterlassen, aber das ist keineswegs Pflicht.

Der Online-Dienst Tiny eignet sich, wenn eine schnelle grafische Nachbearbeitung ohne Verlust der grundlegenden Eigenschaften der Originale nötig ist. Mit seiner Hilfe können Sie in wenigen Sekunden Fotos für die Webseite optimieren und die endgültige Version direkt nach der Bearbeitung herunterladen.

Wie viele Fotos kann man auf einmal über TinyPNG/TinyJPG bearbeiten? Bis zu 20 Stück auf einmal. Das ist eine recht große Anzahl, um von einer solchen Massenverarbeitung zu sprechen.

Der Dienst Tiny kann bei der dringenden Befüllung einer neuen Webseite mit Grafiken hilfreich sein, die man möglichst schnell ins Internet bringen möchte. Außerdem ist er nützlich, wenn man die Bilder für neues zu veröffentlichendes Material (zum Beispiel Blogartikel) leichter machen möchte.

Der Dienst Tiny bietet Software für die Arbeit mit den Formaten PNG und JPG. Die bearbeiteten Fotos stehen zum Download oder zum Upload in den Cloud-Speicher Dropbox bereit.

Vorteile und Nachteile

Positive Seiten von Tiny:

• einfache Benutzeroberfläche;
• keine Bezahlung nötig;
• nach der Bearbeitung verlieren PNG-Dateien nicht ihre Transparenz.

Negative Seiten von Tiny:

• man kann nur mit Dateien bis 5 MB arbeiten;
• keine deutsche Sprache;
• Unterstützung nur für PNG/JPEG.

Compressor.io

Im Vergleich zum vorherigen Tool arbeitet Compressor.io mit einer größeren Anzahl von Formaten. Neben den Standard-Formaten PNG/JPEG können Nutzer Dateien in SVG, WEBP und GIF hoch- und herunterladen.

Mit Compressor.io ist eine Online-Fotooptimierung für die Webseite mit Verschlechterung der grafischen Eigenschaften oder deren Erhaltung möglich. Diesen Parameter können Sie selbst regulieren, je nachdem, wofür Sie die Grafikkomprimierung benötigen. Man kann sie um 90% reduzieren, aber in den meisten Fällen wäre das übertriebener Fanatismus.

Compressor.io kann kostenlos genutzt werden. Für ein breiteres Spektrum an Möglichkeiten gibt es den kostenpflichtigen Tarif Premium zum Preis von $50/Jahr.

Das maximale Volumen der hochladbaren Dateien beträgt 10 MB. Auf einmal können Sie ganze 100 Fotos hochladen und bearbeiten, aber nur im kostenpflichtigen Tarif. Im kostenlosen Tarif sind es bis zu 50 pro Tag.

Besondere Kenntnisse darüber, wie man Bilder ohne Qualitätsverlust verkleinert, sind bei der Arbeit mit Compressor.io nicht nötig. Er ist einfach. Man muss nur die Quelldateien auf diese Webseite hochladen, indem man den entsprechenden Button drückt, und sie wieder herunterladen, wenn die Bearbeitung abgeschlossen ist. Und das geschieht fast augenblicklich.

Vor- und Nachteile

Vorteile von Compressor.io:

• hohe Verarbeitungsgeschwindigkeit;
• 5 unterstützte Formate;
• Online-Demonstration des Grades des Qualitätsverlustes am hochgeladenen Beispiel;
• kann kostenlos genutzt werden.

Nachteile von Compressor.io:

• Einschränkungen im Basistarif: nicht mehr als 50 Bearbeitungen pro Tag, keine Feineinstellungen verfügbar, keine Größenänderung möglich, kein automatisches Umbenennen.

Optimizilla

Dieses Online-Tool rufen Nutzer zu Hilfe, wenn sie Dateien in PNG oder JPEG bearbeiten möchten. Die effizienten Algorithmen von Optimizilla ermöglichen es, Fotos mit Verlust der ursprünglichen visuellen Eigenschaften oder mit maximaler Erhaltung des Originalaussehens zu optimieren. Sie werden leichter, bleiben dabei aber scharf und detailliert.

Auf einmal können Sie in Optimizilla bis zu 20 Quelldateien hochladen.

Wenn Sie die Dateien online hochgeladen haben, gehen Sie zu den „Einstellungen”. Dort erscheinen sofort zwei Bildschirme. Auf dem linken wird die Grafik in der Originalansicht angezeigt, auf dem rechten die neue Version. Mit dem Schieberegler können Sie die Qualitätsstufe regulieren, und mit der Qualitätsänderung ändert sich auch die Größe. Die detaillierte Einstellung hilft Ihnen, das bestmögliche Ergebnis für Ihre Aufgaben zu erzielen.

Vor- und Nachteile des Tools

Vorteile von Optimizilla:

• man kann die Qualität/Größe des Ergebnisses regulieren;
• Speichern aller bearbeiteten Dateien mit einem Klick;
• einfachste Benutzeroberfläche;
• russische Sprache verfügbar;
• kostenlose Nutzung ohne Einschränkungen.

Nachteil von Optimizilla:

• es kann nur mit JPEG und PNG gearbeitet werden.

Kraken.io

Kraken — ein englischsprachiger moderner Dienst für professionelle Grafikarbeit. Die Benutzeroberfläche können Sie kostenlos testen, aber um das gesamte Arsenal dieser Software zu nutzen, lohnt es sich, für die von den Entwicklern angebotenen Tarife zu bezahlen. Mit Kraken können Dateien mit einem Gesamtvolumen von bis zu 60 GB pro Monat optimiert werden.

Alle Möglichkeiten dieses Online-Bildoptimierers stehen den Nutzern für 5-79 Dollar pro Monat zur Verfügung. Der Preis hängt davon ab, mit welchem Dateivolumen Sie arbeiten möchten.

Das ist einfach ein technischer Gigant in seinem Markt. Wissen Sie, mit wem diese Entwickler zusammenarbeiten? Laut öffentlich verfügbaren Informationen im Internet teilt Kraken die Möglichkeiten seiner Software mit Microsoft, Nvidia, Kaspersky, Tesla, Dell und anderen großen Unternehmen. Muss man noch erwähnen, dass deren Dienst wirklich erstklassig ist?

Die fertigen Ergebnisse nach der Bearbeitung können Sie mit einem Klick in sozialen Netzwerken veröffentlichen, in einem Cloud-Dienst speichern oder archivieren.

Vor- und Nachteile des Bildoptimierungs-Tools

Vorteile:

• es gibt ein spezielles Plugin für das CMS WordPress;
• kann kostenlos genutzt werden;
• Import aus Box, Google Drive, Dropbox verfügbar;
• breites Spektrum unterstützter Formate;
• Ergebnisse können als ZIP-Archiv heruntergeladen oder in der Dropbox-Cloud gespeichert werden.

Nachteile:

• den vollen Funktionsumfang erhält man nur in den kostenpflichtigen Tarifen;
• keine Benutzeroberfläche auf Deutsch.

ImageOptim

Und zum Abschluss meiner Auswahl an Werkzeugen zur Fotooptimierung kommt die englischsprachige Software ImageOptim. Sie funktioniert sowohl als Online-Dienst als auch als Desktop-Programm. Einfacher gesagt: Zur Nutzung von ImageOptim können Sie das Programm auf Ihren Computer herunterladen oder einfach die Webseite besuchen und alle nötigen Operationen online durchführen.

Das Programm ImageOptim kann nur auf dem Betriebssystem macOS installiert werden. Für Windows und Linux ist keine Desktop-Version vorgesehen.

Die Software vereint die wichtigsten Werkzeuge, um ein Foto/Bild zu komprimieren und dabei seine Schärfe und Attraktivität zu bewahren. Das Ergebnis können Sie dank detaillierter Einstellungen kontrollieren. Stellen Sie die gewünschten Werte ein und verfolgen Sie, wie sich Dateigröße und Darstellungsqualität der grafischen Elemente verändern.

Vorteile und Nachteile

Vorteile von ImageOptim:

• es gibt einen kostenlosen Testzeitraum;
• es gibt eine Web-Version und ein Desktop-Programm;
• der Quellcode ist offen;
• detaillierte Einstellungen;
• Unterstützung von JPEG, SVG, GIF, PNG.

Nachteile von ImageOptim:

• unbegrenzte Nutzung ist nur kostenpflichtig möglich;
• man kann nicht einfach auf den Dienst gehen und ohne Registrierung eine schnelle Fotokorrektur durchführen;
• als Desktop-Programm nur für macOS verfügbar;
• keine deutsche Sprache.

Die aufgeführten Methoden haben ich und die Mitglieder meines Solarweb-Teams in der Praxis getestet. Nutzen Sie sie gerne.

Speichern Sie unseren Artikel in den Lesezeichen Ihres Browsers. Irgendwann werden Sie ihn brauchen, und Sie sparen eine Menge Zeit, da Sie nicht selbst nach dem besten Dienst zur Bildoptimierung suchen müssen.