So einfach sind Bilder für Webseiten komprimiert

Wer ist kein Fan von Webseiten mit tollen, aussagekräftigen Bildern. Wir möchten Ihnen ein paar Tools an die Hand geben, wie Sie Ihre Bilder einfach und unkompliziert komprimieren können, damit die Ladegeschwindigkeit Ihrer Website nicht leidet.

netfang_bildkomprimierung

Die Formel lautet: Je kleiner die Bilddatei, desto kleiner die Datenmenge gleich schnellere Ladezeit und führt somit zu besseren Nutzererlebnissen für die Besucher und verbesserten Suchmaschinen Ranking.
Grundsätzlich muss man beim Integrieren eines Bildes in eine Webseite diese drei Dinge kennen und verstehen lernen: Dateiformat, Bildgröße und Dateigröße.

Dateiformat – welches Dateiformat ist für eine Webseite am besten geeignet?

Es gibt unzählige Dateiformate für Bilder. Für den Einsatz in einer Webseite müssen wir uns glücklicherweise nur mit diesen vier verschiedenen Dateiformaten beschäftigen:
Das sind die gängigsten Dateiformate neben .svg sind .jpg für den Einsatz in einer Website:

JPG: Das .jpg oder .jpeg (Joint Photographic Experts Group) ist unseres Erachtens das wohl bekannteste Dateiformat. Es findet Einsatz in Digitalkameras, auf Webseiten und sogar in professionellen Druckdateien. Es hat den großen Vorteil, dass es bei den meisten Bildmotiven am stärksten komprimiert werden kann. Komprimierung bedeutet: Die Dateigröße wird kleiner, was kürzere Ladezeiten zur Folge hat. In der Regel, sollte das .jpg die erste Wahl sein. Schon alleine aus dem Grund, dass es das am häufigsten gebrauchte Dateiformat darstellt. Wahrscheinlich werden Ihnen fast alle Bilder, die Sie in Ihre Webseite einbauen möchten, bereits im .jpg-Format vorliegen.

PNG: Das .png (Portable Network Graphic) ist ein “neueres” Dateiformat als das .jpg. Wie der Name bereits andeuten möchte, wurde es weitestgehend für den Einsatz im Internet vorgesehen. Genau, wie das .jpg kann es komprimiert werden. Allerdings ist der Komprimierungsvorgang technisch anders gelöst. Es wird hauptsächlich die Menge der im Bild verwendeten Farben reduziert. Je stärker das Bild komprimiert wird, umso kleiner ist die Dateigröße und auch die Menge der verwendeten Farben. Dies hat bei herkömmlichen Bildern den Nachteil, dass diese schnell einen unnatürlichen Look erhalten. Man sieht den Bilddateien die Komprimierung regelrecht an.

GIF: Ein sehr altes Bildformat. Das .gif (Grapics Interchange Format) hat einen großen Vorteil gegenüber den beiden Konkurrenten: Es kann animiert werden. Der Nachteil der gifs: Besteht aus nur 256 Farben. Dies ist bei Bildern, die natürlich wirken sollen, oft zu wenig.

SVG: Die optimale Wahl für Profis. Das .svg(Scalable Vector Graphics) ist das jüngste Dateiformat in unserer Liste. Es kann animiert, einfach komprimiert werden ohne Datenverlust und in XML-Code eingefügt und sogar verändert werden. SVG-Grafiken eignen sich vor allem für Websites, die sich dem benutzten Endgerät anpassen. Durch die kleine Dateigröße müssen Smartphone-Nutzer mit geringer Bandbreite nicht lange warten.

Was heißt das nun? Für detailreiche Bilder mit vielen Farben ist nach wie vor .jpg die erste Wahl, da bei der Kompression auf Farberhalt Wert gelegt wird. Das .gif ist größtenteils durch png abgelöst worden. Einzig wenn eine .png-Datei zu groß werden würde oder für Animationen wird das gif bevorzugt. Das .svg-Format ist bisher nicht weit verbreitet. Doch das Potential ist vorhanden: Es besticht durch geringe Dateigrößen und Skalierbarkeit. Das wird auch für die zunehmende Anzahl verschiedener mobiler Endgeräte immer wichtiger.
Wir empfehlen Ihnen, den Einsatz von .jpg Bildern. Da diese die wenigsten Probleme verursachen und einfach in der Handhabung sind.

Die Bildgröße – wie groß sollte ein Bild für eine Webseite sein?

Hierzu muss man wissen, wie die Größe eines Bildes überhaupt gemessen wird. Die Maßeinheit nennt sich Pixel. Bevor Sie ein Bild in eine Webseite einbinden, sollten Sie sich überlegen, wie groß Sie das Bild anzeigen möchten. Halten Sie sich vor Auge, dass der Contentbereich (der Bereich in dem die eigentlichen Inhalte einer Webseite stehen) auf einem PC-Monitor in der Regel um die 1000 Pixel breit ist. Daraus lässt sich sehr schnell erkennen, wie groß Bilder maximal sein müssen. Selbst aufgenommene Bilder aus Digitalkameras sind oft mehrere Tausend Pixel groß. Diese Bildformate müssen unbedingt verkleinert werden. Viele Kameras verfügen bereits über ein spezielles Webformat.

Es wird beim Einbau von Bildern oft folgender Fehler gemacht: Ein Bild wird in der Originalgröße von z.B. 3500 x 2800 Pixeln hochgeladen und dann in einer Größe von 600 x 400 Pixel in den Content der Website eingebaut. Das große Originalbild wird somit verkleinert angezeigt. Dies ist unnötiger Ballast und kann sogar zu einer schlechten Bilddarstellung führen. Das Bild Motiv des Bildes wirkt hart oder überschärft.

So reduzieren Sie die Ladezeiten Ihrer Webseite – Dateigröße minimieren

Ein sehr wichtiger Qualitätsfaktor für Webbilder ist die Dateigröße und die damit verbundene Ladezeit. Umso größer die Dateigröße, desto länger muss das Bild geladen werden. Auch im Zeitalter von schnellem Internet spielt die Reduzierung von Daten eine große Rolle.

Verpasst man einer Seite eines Webauftritts nun drei Bilder mit je 3 MB Dateigröße, muss der Besucher diese Dateimenge zuerst herunterladen, bevor sich die Seite komplett darstellt. Der Besucher wird Ihre Seite wahrscheinlich sehr schnell wieder verlassen, da er keine Lust hat, auf den vollständigen Download der Bilder zu warten. Darüber hinaus, erkennt Google, in wieweit Bilder komprimiert sind und bewertet zu große Dateigrößen als schlecht. Die Bildkomprimierung ist ein sehr guter Weg, um die Ladezeiten einer Webseite zu verkürzen.

Wie groß dürfen die Dateigrößen für Bilder sein?
Wir raten zu einer maximalen Größe von 200 KB für ein normales Bild, welches im Contentbereich untergebracht ist und in etwa die Größe von 640 x 400 Pixeln hat. Größer ist schlecht – kleiner ist von Vorteil.

Wir komprimiert man Bilder?

Um Bilder in ihrer Dateigröße zu komprimieren, empfehlen wir das Verwenden eines der folgenden Tools:

 

Achten Sie beim Komprimieren immer darauf, einen guten Kompromiss zwischen maximaler Komprimierung (kleine Dateigröße) und Bildqualität zu erhalten. Sind die Bilder zu stark komprimiert, werden sie unscharf und verlieren ihre Natürlichkeit. Das nennt man „verpixelte“ Bilder.

Für alle, die ihren Alltag mit Photoshop starten, empfehlen wir natürlich damit zu arbeiten.

Sie möchten sich die Zeit für die Komprimierung sparen?
Wir können Ihnen die Bildkomprimierung direkt auf Ihre Website integrieren. Beim Upload der Bilder wird das Bild mittels eines Klicks in die optimale Grösse konvertiert.

Bilder für Homepage – die Zusammenfassung
Verwenden Sie bei herkömmlichen Bildern immer .jpg und bei Grafiken .png Dateien. Achten Sie auf die Bildgröße. Laden Sie das Bild in der Größe, wie Sie es auch tatsächlich anzeigen möchten in Ihre Webseite.
Verkürzen Sie die Ladezeit, indem Sie die Dateigrößen durch Komprimierungen minimieren!

Sie haben noch Fragen zu den Bildern auf Ihrer Website? Dann kontaktieren Sie uns.

 

Quellen: https://wiki.selfhtml.org/wiki/Grafik/Grafikformate, https://lehrerfortbildung-bw.de/st_digital/medienwerkstatt/multimedia/bild/formate/, http://webkrauts.de/artikel/2008/das-richtige-grafikformat-fuer-den-richtigen-zweck