“Die optimale Dateigröße von Bildern, für eine Webseite, ist ausschlaggebend, für gute bzw. schnelle Ladezeiten eines Internetauftritts.”
Sicher wurde dieses Thema bereits in vielen Tutorials und Foren ausführlich behandelt. Trotzdem wollten wir es hier nochmals aufnehmen und unseren Besuchern in aller Einfachheit erklären. Dieser Artikel ist auf den normalen User ausgerichtet und soll ausreichendes und grundlegendes Verständnis vermitteln. Er richtet sich nicht an den Profi, der seinen Arbeitstag mit Adobe Photoshop beginnt.
Sollten Sie, nach dem Lesen des Artikels, noch Fragen an uns haben, helfen unsere Mitarbeiter gerne weiter. Auch wenn Sie kein Pixelwerk Kunde sind. Rufen Sie einfach an oder stellen Ihre Frage per E-Mail.
Grundsätzlich muss man beim Einbau eines Bildes in eine Webseite diese drei Sachen kennen und verstehen:
Das Dateiformat, die Bildgröße und die Dateigröße.
Machen Sie sich keine Sorgen...es ist nicht kompliziert. Lesen Sie einfach in Ruhe weiter.
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 drei verschiedenen Dateiformaten beschäftigen:
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 ihnen 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. Mehrere nacheinander ablaufende Bilder werden zu einer einzelnen Datei zusammengefasst und nacheinander “abgespielt”. Diese “ganz nette” Eigenschaft, hat in der heutigen Zeit von HTML5 jedoch keine wirkliche Bedeutung mehr. Der Nachteil des GIFs: Es hat nur 256 Farben. Dies ist bei Bildern, die natürlich wirken sollen, oft zu wenig. Mit einem speziellen Verfahren, lassen sich zwar sogenannte True Color GIFs erstellen, bei denen die Farbmenge, bis zur JPEG-Qualität, erhöht wird...dieses Verfahren lässt allerdings die Dateigröße sehr schnell explodieren und findet nur sehr selten Verwendung.
Was heißt das nun? Wir empfehlen unseren Kunden, 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. Doch wie groß ist ein Pixel? Diese Grafik zeigt Ihnen genau, wie groß 200 px/Pixel auf einem Standard 72 dpi PC Monitor sind. Damit erhalten Sie ein Gefühl, was die Größe (Formatgröße) eines Bildes in Pixeln bedeutet.
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ß. Deren Bildformat 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.
Sollten Sie kein entsprechendes Tool haben, mit welchem Sie Bilder verkleinern können, empfehlen wir Ihnen den “Light Image Resizer”. Sie können ihn hier auf der Herstellerseite herunterladen. Bitte beachten Sie, dass das Programm nach Ablauf der Testzeit für und den gewerblichen Einsatz nicht kostenlos ist. Die 15 € sind allerdings gut investiert.
Dateigröße minimieren - so reduzieren Sie die Ladezeiten Ihrer Website
Ein sehr wichtiger Qualitätsfaktor für Web-Bilder 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. Gerade in ländlichen Gebieten, wird oftmals noch mit sehr langsamen Verbindungen gesurft.
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. Bei einer guten DSL oder VDSL Leitung, dauert dies nur eine Sekunde - bei einer langsamen Leitung, kann es allerdings sogar mehreren Minuten dauern. 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 wie weit Bilder komprimiert sind und bewertet zu große Dateigrößen als schlecht.
Die Bildkomprimierung ist ein sehr guter Weg um 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.
Ein aktuelles Bildformat ist das .svg Format.
Dieses Format ist hinsichtlich der Dateigröße äußerst attraktiv. Es handelt sich hierbei um eine Vektorgrafik. Allerdinsg möchten wir auf dieses Format hier nicht weiter eingehen, da es sich hier um ein professionelles Format handelt, welches nur von Grafikern und Code-Designern benutzt wird.
Dieses Bild hat beispielsweise 63 KB und ist immer noch von guter optischer Qualität:
Wie komprimiert man Bilder?
Um Bilder in ihrer Dateigröße zu komprimieren, raten wir zu dem selben Tool (Light Image Resizer), wie bereits im Abschnitt über die Bildgröße erwähnt. 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. Man spricht auch von "verpixelten" Bildern.
Bilder für Homepage - die Zusammenfassung:
- Verwenden Sie bei herkömmlichen Bildern immer .jpg Dateien - bei Grafiken verwenden Sie das .png Format.
- Achten Sie auf die Bildgröße. Laden Sie das Bild in der Größe in Ihre Webseite, wie Sie es auch tatsächlich anzeigen möchten.
- Verkürzen Sie die Ladezeit, in dem Sie die Dateigröße durch Komprimierung minimieren.
Sollten Sie Fragen haben: Wir beraten Sie gerne. Tel. 07263 / 4000 80
