Welche Größe sollte ein jpg-Bild im Internet besitzen?

Darstellung mit 300px maximaler Seitenlänge
Großansicht (auf Bild klicken) 1024px
Dateigröße 52 kB

Vor den Erklärungen und Beispielen unsere Empfehlung:
Stellen Sie die Originalgröße des Bildes genauso ein, wie Sie es darstellen möchten. Das kann schon vor dem Hochladen bei Ihnen geschehen, mit unserem Bild-Manager aber auch während dem Hochladen oder sogar noch danach.

• Wenn Sie Bilder einfach nur neben dem Text anzeigen möchten, empfehlen sich Werte um die 300px größte Seitenlänge.
• Wenn Sie Bilder in einer Galerie ohne Großansicht anzeigen möchten, empfehlen sich Werte um die 500px größte Seitenlänge.
• Wenn Sie Bilder mit Großansicht (auch in der Galerie) anzeigen möchten , empfehlen sich Werte um die 1000px größte Seitenlänge.

Dies sind grobe Daumenwerte. Letztendlich hängt es von Bild selbst ab und wieviel Platz Ihnen zur Verfügung steht oder Sie dem Bild einräumen möchten.

Dateigröße und Ladezeit

optimiertes Bild (10 kB) mit Ausgabe in Originalgröße
200 x 300px und Qualität 80

Immer wieder erreicht uns die Frage, warum die hochgeladenen Bilder unserer Kunden so lange benötigen, um komplett dargestellt zu werden. Meist liegt es daran, dass Bilder direkt aus der Kamera ins Internet hochgeladen wurden.

Bilder aus der Kamera sind im Allgemeinen viel zu groß für die Darstellung im Internet, zudem werden Sie in bester Qualität ausgegeben. Hierdurch wird die Dateigröße so hoch, dass Bilder zum Laden einige Zeit benötigen. Bei vielen Bildern auf einer Seite macht sich das deutlich bemerkbar.

Es gibt v.a zwei Optimierungsmethoden, um die Dateigröße zu verkleinern und damit Ladezeit zu verbessern:

• Anpassung der Seitenlängen eines Bildes
• Anpassung der Qualität eines Bildes

Nachfolgend finden Sie einige Beispiele, wie sich welche Einstellung auf die Dateigröße und damit Ladezeit auswirkt.
Die meisten Bildverarbeitungsprogramme bieten ebenfalls eine Bildverkleinerung mit Einstellung der Qualität ein. Eventuell wird letztere dort anders benannt und die Skalierung ist unterschiedlich, z.B. bietet Photoshop Qualitätsstufen von 0-12 an statt 1-100 wie andere Programme.

Zusammenhang von Dateigröße und Bildgröße (BxH)

Nachfolgend drei Beispiele des gleichen Bildes, das im Original in unterschiedlicher Größe vorliegt, aber jeweils in der Größe 160 x 240px ausgegeben wird.

angezeigte Größe: 160 x 240px / Qualität: 90

2550 x 3840px	640 x 960px	160 x 240px
Das Bild baut sich langsam von oben nach unten auf neu laden	Das Bild baut sich schnell von oben nach unten auf neu laden	Das Bild flackert kurz und ist aufgebaut neu laden
3240 kB	191 kB	22 kB
ISDN: 6min 55s DSL 2000: 13s	ISDN: 24s DSL 2000: 0,8s	ISDN: 2,8s DSL 2000: 0,1s

Unter dem Bild sehen Sie die Dateigröße und durchschnittlichen Ladezeiten des Bildes für ISDN und DSL 2000.
Wenn Sie den Link "neu Laden" klicken, wird das Bild neu in die Seite geladen und Sie können beobachten wie lange der Ladeprozess bei Ihnen dauert.
Mit Klick auf das Bild wird es in Originalgröße in einem neuen Fenster geöffnet.
Achtung: die meisten Browser passen das Bild in die Browsergröße an. Wenn Sie beim Original eine Lupe mit + sehen, klicken Sie bitte auf das Bild um es in Originalgröße anzeigen zu lassen.

Zusammenhang von Kompressions-Qualität und Dateigröße

Das jpg-Format bietet die Möglichkeit eine Kompressions-Qualität einzustellen. Je kleiner der Wert um so kleiner die Dateigröße aber auch um so geringer die Qualität.
Während in der verkleinerten Darstellung die Unterschiede kaum sichtbar sind, werden in der Großdarstellung die Qualitätsunterschiede der 3 unteren Bildern offensichtlich.
Klicken Sie auf ein Bild und Sie sehen die Großdarstellung der Bilder.

Darstellung: 160 x 240px / Originalgröße: 680 x 1024px

Qualität 100: 683 kB	Qualität 90: 211 kB	Qualität 80: 119 kB
Qualität 60: 71 kB	Qualität 40: 50 kB	Qualität 20: 21 kB

In den oberen Bereichen (100,90,80) ist der Qualitätsunterschied kaum sichtbar aber der Dateigrößenunterschied ist immens. Der Wert von 80 hat sich als guter Kompromiss zwischen Dateigröße und Qualität erwiesen und wird im Bild-Manager des InternetBaukastens verwendet.

Zusammenhang von Bildinformationen und Dateigröße

Aber nicht nur die Bildgröße und die Kompressionsqualität spielen eine Rolle bei der Dateigröße eines Bildes, sondern auch ob dieses Bild viele Einzelheiten besitzt oder mehr aus Flächen besteht.
Auch die Farbigkeit spielt eine Rolle. Schwarzweiss-Bilder besitzen immer kleinere Dateigrößen als die farbige Variante des gleichen Bildes.

Darstellung: 200 x 300px / Originalgröße: 680 x 1024px / Qualität: 90

flächig	mit vielen Einzelheiten
49 kB	211 kB
32 kB	156 kB

Warum auf die Dateigröße geachtet werden sollte

Selbst wenn heute die meisten DSL besitzen, sollte man nicht vergessen, dass in ländlichen Gegenden oft noch noch kein DSL oder langsames DSL vorliegt. Auch nimmt die Zahl der Benutzer zu, die mit dem Handy ins Internet gehen und damit niedrigere Geschwindigkeiten besitzen oder volumenabhängige Tarif besitzen.

Nicht zu vergessen das Thema "Bilderklau", je größer Ihre Bilder sind, je besser die Qualität ist, desto größer der Anreiz, diese Bilder ohne Nachzufragen herunter zu laden und weiter zu verwenden.

In seinem Bildmanager bietet der InternetBaukasten die Option, Bilder direkt beim Hochladen auf bestimmte Standardgrößen zu verkleinern. Zusätzlich ist es möglich, auch schon hochgeladene Bilder zu verkleinern.
Hierbei stellen wir eine Kompressionsqualität (s. weiter unten) von 80 in einer Skala von 1-100 ein, die ein sehr gutes Verhältnis zwischen Dateigröße und Qualität ergibt.

Vielen Dank an www.dipago.de für das Bereitstellen der Bilder.