Faustregel Website-Bild-Größe?

Computer: Software & Programmierung Photoshop & Grafik
#1

Hallo, Bildexperten.

Mich würde interessieren, welche Dateigröße ein Bild auf einer Website haben sollte, damit es (für seine Größe) nicht zu datenschwer ist.
Gibt es eine Faustregel, wie viel kB pro Mio Pixel grenzwertig ist?

Beispiele.
Ein JPG-Bild 100x100 Pixel mit 5,0 kB, somit 500 kB pro Mio Pixel.
Ein anderes 150x180 Pixel mit 7,9 kB, somit 293 kB pro Mio Pixel.
Ein anderes 400x180 Pixel mit 26,9 kB, somit 373 kB pro Mio Pixel.
Ein anderes 200x150 Pixel mit 19,1 kB, somit 637 kB pro Mio Pixel.

Vielen Dank für Hinweise!

☼ Markuss ☼

#2

Einfach…

Hallo, Bildexperten.

Mich würde interessieren, welche Dateigröße ein Bild auf einer
Website haben sollte, damit es (für seine Größe) nicht zu
datenschwer ist.
Gibt es eine Faustregel, wie viel kB pro Mio Pixel
grenzwertig ist?

Beispiele.
Ein JPG-Bild 100x100 Pixel mit 5,0 kB, somit 500 kB pro
Mio Pixel.
Ein anderes 150x180 Pixel mit 7,9 kB, somit 293 kB pro
Mio Pixel.
Ein anderes 400x180 Pixel mit 26,9 kB, somit 373 kB pro
Mio Pixel.
Ein anderes 200x150 Pixel mit 19,1 kB, somit 637 kB pro
Mio Pixel.

Warum so kompliziert?

Fürs Web gilt:
72dpi reicht aus.
Bilder sollten nicht grösser sein als 50 K.

Interlaced jpg ist angesagt damit man erst mal was sieht während sich das Bild vollständig aufbaut.

Grössere Bilder dann halt da wo sie Sinn machen.

Viel Spass und Erfolg
Stefan

#3

Hallo,

Fürs Web gilt:
72dpi reicht aus.

eine dpi-Angabe ist für Bildschirmausgabe nicht definiert und nicht sinnvoll, die hat nur bei Drucksachen ihre Bedeutung. Fürs Web sollte man für Länge und Breite eine sinnvolle Pixelanzahl festlegen und einstellen (z.B. 400 mal 300) und dieses Bild dann kompromieren. Mit den Standardeinstellungen der gängigen Programme kommt man dann meist auf Werte um die 50 kb, so wie Du schreibst.

Bilder sollten nicht grösser sein als 50 K.

Interlaced jpg ist angesagt damit man erst mal was sieht
während sich das Bild vollständig aufbaut.

Grössere Bilder dann halt da wo sie Sinn machen.

Olaf

#4

Naja…

Hallo, Bildexperten.

Mich würde interessieren, welche Dateigröße ein Bild auf einer
Website haben sollte, damit es (für seine Größe) nicht zu
datenschwer ist.
Gibt es eine Faustregel, wie viel kB pro Mio Pixel
grenzwertig ist?

Beispiele.
Ein JPG-Bild 100x100 Pixel mit 5,0 kB, somit 500 kB pro
Mio Pixel.
Ein anderes 150x180 Pixel mit 7,9 kB, somit 293 kB pro
Mio Pixel.
Ein anderes 400x180 Pixel mit 26,9 kB, somit 373 kB pro
Mio Pixel.
Ein anderes 200x150 Pixel mit 19,1 kB, somit 637 kB pro
Mio Pixel.

Warum so kompliziert?
Fürs Web gilt:
72dpi reicht aus.

Wie man es sieht.
Der dpi-Wert bringt nicht immer etwas. Ich begutachte nämlich auch Website-Bilder, die nicht von mir stammen. Und wenn ich dort Rechte-Mausklick>Eigenschaften mache, steht da nichts von wegen „dpi“. Dort stehen nur die Pixelmaße und der kB-Wert: Deswegen mein Ansatz über kB/Mpix.
(Sonst müsste ich mir jedes Bild runterladen, um dann genauer in die Dateiinfo zu gucken = lästig).

Bilder sollten nicht grösser sein als 50 K.

Okay, das ist ein absolutes Maß.

Interlaced jpg ist angesagt damit man erst mal was sieht
während sich das Bild vollständig aufbaut.

Wie stellt man die her?

Grössere Bilder dann halt da wo sie Sinn machen.

Klaro.

Viel Spass und Erfolg

Hab ich…

Gruß
☼ Markuss ☼

#5

Nachfrage.

Hallo,

Fürs Web gilt:
72dpi reicht aus.

eine dpi-Angabe ist für Bildschirmausgabe nicht definiert und
nicht sinnvoll, die hat nur bei Drucksachen ihre Bedeutung.

Dachte ich mir irgendwie schon…

Fürs Web sollte man für Länge und Breite eine sinnvolle
Pixelanzahl festlegen und einstellen (z.B. 400 mal 300) und
dieses Bild dann kompromieren. Mit den Standardeinstellungen
der gängigen Programme kommt man dann meist auf Werte um die
50 kb, so wie Du schreibst.

Ähh. Und was heißt das nun übertragen auf kB/Mpx ?
Habe ich richtig gerechnet: Bei 400 px mal 300 px und 50 kB ergibt sich
417 kB/Mpx ? Ist das also ein guter Wert?
Kann man also (als Faustregel) sagen, Bilder sollten 500 kB/Mpx nicht überschreiten?

☼ Markuss ☼

#6

Von solchen Faustformeln halte ich GARNICHTS, weil sich nicht auf das eingehen, was im Bild drin ist. Manche Bilder lassen sich schwieriger kompirimieren als andere, bei anderen störts nicht, wenn man nur 32 Farben hat (GIF) oder wenn man ohne Ende komprimiert.

Nutze die Vorschauansicht deines Bildbearbeitungsprogramm und komprimiere einfach in der Hinsicht, dass du ein gutes Verhältnis erreichst. Auf JPEG bezogen heißt dass, dass hier und da ruhig ein paar Artefakte zu sehen sein dürfen, allerdings nicht das gesamte Bild aus Klötzchen besteht oder so zaghaft komprimiert ist, dass man selbst bei DSL noch vier Sekunden warten muss.

Falls du Photoshop benutzt…beim „Für Web speichern“ orientiere ich mich meist an eine Qualität von 60. Im Notfall (sehr selten) mal hoch auf 65, 70. Ansonsten eher runter, bis auf 50 oder teilweise noch weniger, jeweils wie es das Bild verträgt.

#7

Ähh. Und was heißt das nun übertragen auf kB/Mpx ?
Habe ich richtig gerechnet: Bei 400 px mal 300 px und 50 kB
ergibt sich
417 kB/Mpx ? Ist das also ein guter Wert?
Kann man also (als Faustregel) sagen, Bilder sollten 500
kB/Mpx nicht überschreiten?

Naja, wenn Du das so als Orientierung haben willst. Wobei diese Angabe in kb/Mpx absolut ungewöhnlich ist. Aber wahrscheinlich kommt es so ungefähr hin. Aber immer unter den Voraussetzungen, dass es um Fotos geht (nicht um Grafiken, wo man noch die Farbtiefe reduzieren kann) und dass Du einen Kompromiss zwischen Speicherplatz und Qualität willst.

Olaf

#8

Hallo,
ich muss gestehen, dass ich nicht weiß, wie du auf diese „Einheit“ kommst - kB/MPixel? naja, mathematisch schon, aber welchen praktischen Wert sollte es haben?

Es gibt Bilder, die sind 50x50 Pixel groß und können je nach Bildinhalt 5, 10 oder 200 kB groß sein.

Es gibt Bilder, die sind 200x200 Pixel groß und können ebenfalls 10 oder 200kb groß sein.
Eine Rolle spielt z.B. das Muster im Bild, ob man große gleichfarbige Flächen hat oder viele kleinteilige verschiedene Farbflächen, danach kann man nämlich gut oder weniger gut komprimieren…

Ich denke, es kommt wirklich individuell drauf an. So eine komische Maßzahl wie die von dir genannte halte ich persönlich für unsinnig.

Beatrix

#9

Veto…

Hallo,

Fürs Web gilt:
72dpi reicht aus.

eine dpi-Angabe ist für Bildschirmausgabe nicht definiert und
nicht sinnvoll, die hat nur bei Drucksachen ihre Bedeutung.
Fürs Web sollte man für Länge und Breite eine sinnvolle
Pixelanzahl festlegen und einstellen (z.B. 400 mal 300) und
dieses Bild dann kompromieren. Mit den Standardeinstellungen
der gängigen Programme kommt man dann meist auf Werte um die
50 kb, so wie Du schreibst.

Hier mein Veto.
Die dpi Angabe macht sehr wohl Sinn, da der Standardbildschirm nun mal nicht mehr darstellt.
In deinem Bildbearbeitungsprogramm kannst du dann durch das Festlegen des dpi-Wertes die Dateigrösse über die Festlegung der Bildgrösse manipulieren.

Bilder sollten nicht grösser sein als 50 K.

Interlaced jpg ist angesagt damit man erst mal was sieht
während sich das Bild vollständig aufbaut.

Grössere Bilder dann halt da wo sie Sinn machen.

Stefan

#10

Hallo,

Fürs Web gilt:
72dpi reicht aus.

eine dpi-Angabe ist für Bildschirmausgabe nicht definiert und
nicht sinnvoll, die hat nur bei Drucksachen ihre Bedeutung.

Dachte ich mir irgendwie schon…

Falsch gedacht !!!

Fürs Web sollte man für Länge und Breite eine sinnvolle
Pixelanzahl festlegen und einstellen (z.B. 400 mal 300) und
dieses Bild dann kompromieren. Mit den Standardeinstellungen
der gängigen Programme kommt man dann meist auf Werte um die
50 kb, so wie Du schreibst.

Ach ja ? unabhängig von den DPI ?
Das erklär doch mal.

Ähh. Und was heißt das nun übertragen auf kB/Mpx ?
Habe ich richtig gerechnet: Bei 400 px mal 300 px und 50 kB
ergibt sich
417 kB/Mpx ? Ist das also ein guter Wert?
Kann man also (als Faustregel) sagen, Bilder sollten 500
kB/Mpx nicht überschreiten?

Stefan

#11

Hier mein Veto.
Die dpi Angabe macht sehr wohl Sinn, da der Standardbildschirm
nun mal nicht mehr darstellt.

Eben nicht. Die Angabe ist zur Darstellung am Schirm bzw. Browser absolut irrelevant.

#12

Hallo,

Die dpi Angabe macht sehr wohl Sinn, da der Standardbildschirm
nun mal nicht mehr darstellt.

Ich linke an dieser SDtelle immer gerne auf den Artikel „der 72dpi-Mythos“ von Gerrit van Aaken (http://praegnanz.de/essays/72dpi bzw wenn weiter nicht erreichbar im Google-cache: http://72.14.207.104/search?q=cache:3qXvmYiKaHIJ:stuck_out_tongue:ra…)

Mein Monitor hat uebrigens 91,4 dpi (ca 35,8cm ^= ~14" ^= ~91,4 dpi)

Und wenn ich die Aufloesung umstelle auch mehr oder weniger.

Greetinx
Christian

#13

Hallo,
ich muss gestehen, dass ich nicht weiß, wie du auf diese
„Einheit“ kommst - kB/MPixel? naja, mathematisch schon, aber
welchen praktischen Wert sollte es haben?

Wenn man ‚ähnliche‘ Bildmotive (Bildstrukturen) hat, aber verschiedene Pixelmengen. (Bsp.: Urlaubsbilder, Porträts, Naturaufnahmen oder so)

Es gibt Bilder, die sind 50x50 Pixel groß und können je nach
Bildinhalt 5, 10 oder 200 kB groß sein.
Es gibt Bilder, die sind 200x200 Pixel groß und können
ebenfalls 10 oder 200kb groß sein.

Ja eben, genau!
Es geht doch letztenendes um die Datenübertragung aus dem Internet:
ob also ein Bild so datenschwer ist, dass es ewig braucht!
DPI hin oder her, das ist uninteressant. Die Datenübertragung geht nicht über DPI, sondern über Bytes.

[Dass man generell keine Riesenbilder (= sehr viele Pixel) verwenden soll, ist klar; und auch, dass man (wenn es die Qualitätsansprüche zulassen) bei größeren Bilder eher versucht die Daten zu reduzieren.
Da wurde schon mehrfach eine (gefühlte) Grenze von 50 kB genannt.]

Logisch, dass ein großes (= viele Pixel) Bild bei gleicher Auflösung mehr Daten hat, als ein kleineres.
Man kann also die Sache relativ betrachten, gewissermaßen eine Daten"dichte". Wenn also ein Bild mit z Pixeln Z kB hat, dann hat ein Bild mit 1,5*z Pixeln 1,5*Z kB.
So.
Um genau diese Relation geht es: kB pro Pixeleinheit.
Da kommt man nun eben auf einen rel. Einheit von z.B. kB pro Million Pixel (kB/Mpx)!

Ich denke, es kommt wirklich individuell drauf an. So eine
komische Maßzahl wie die von dir genannte halte ich persönlich
für unsinnig.

Wie gesagt, das ist ganz und gar nicht unsinnig, wenn man ‚ähnliche‘ Bildmotive mit verschiedenen Pixelgrößen hat. Dann ist so eine Maßzahl sehr hilfreich.

Vergleich mal MP3-Stücke: Wenn ein Musikstück mit 4 Minuten etwa 4 MB hat, kann man daraus folgern, dass ein 15-Minuten-Stück etwa (!) 15 MB hat. Es gibt also eine Relation von etwa 1 MB/min.
Der Sinn der Sache: Hat man eine CD mit 78 min MP3-Musik, weiß man, dass sie insgesamt in etwa 78 MB Speicherplatz braucht, da die Daten"dichte" bei den Stücken einer CD wahrscheinlich ähnlich sein wird.

☼ Markuss ☼

#14

Variable und Konstanten…
Hallo,

ich muss gestehen, dass ich nicht weiß, wie du auf diese
„Einheit“ kommst - kB/MPixel? naja, mathematisch schon, aber
welchen praktischen Wert sollte es haben?

Dito.

Wenn man ‚ähnliche‘ Bildmotive (Bildstrukturen) hat, aber
verschiedene Pixelmengen. (Bsp.: Urlaubsbilder, Porträts,
Naturaufnahmen oder so)

Es gibt Bilder, die sind 50x50 Pixel groß und können je nach
Bildinhalt 5, 10 oder 200 kB groß sein.
Es gibt Bilder, die sind 200x200 Pixel groß und können
ebenfalls 10 oder 200kb groß sein.

Ja eben, genau!
Es geht doch letztenendes um die Datenübertragung aus dem
Internet:
ob also ein Bild so datenschwer ist, dass es ewig braucht!
DPI hin oder her, das ist uninteressant. Die Datenübertragung
geht nicht über DPI, sondern über Bytes.

Dann noch mal hier für die hartnäckig Erkenntnisresistenten:
Bei der Bildspeicherung in deinem Bildbearbeitungsprogramm hast du in der Regel 3 Variable mit denen du operieren musst.
1.Die Bildgrösse (Apx x Bpx)
2.Die Auflösung (DPI)
3.Die Kompression
Es macht schlicht und ergreifend Sinn die DPI auf 72 (meinetwegen auch 96) festzulegen um nur noch mit 2 Variablen operieren zu müssen.
Ich mache das tagtäglich so.
Millionen Webdesigner machen das tagtäglich so.
Wer es an dieser Stelle immer noch nicht kapiert hat der möge das doch einfach mal in der Praxis ausprobieren.

[Dass man generell keine Riesenbilder (= sehr viele Pixel)
verwenden soll, ist klar; und auch, dass man (wenn es die
Qualitätsansprüche zulassen) bei größeren Bilder eher versucht
die Daten zu reduzieren.
Da wurde schon mehrfach eine (gefühlte) Grenze von 50 kB
genannt.]

Logisch, dass ein großes (= viele Pixel) Bild bei gleicher
Auflösung mehr Daten hat, als ein kleineres.
Man kann also die Sache relativ betrachten, gewissermaßen eine
Daten"dichte". Wenn also ein Bild mit z Pixeln Z kB hat, dann
hat ein Bild mit 1,5*z Pixeln 1,5*Z kB.
So.
Um genau diese Relation geht es: kB pro Pixeleinheit.
Da kommt man nun eben auf einen rel. Einheit von z.B. kB pro
Million Pixel (kB/Mpx)!

Ich denke, es kommt wirklich individuell drauf an. So eine
komische Maßzahl wie die von dir genannte halte ich persönlich
für unsinnig.

Ich auch.

Wie gesagt, das ist ganz und gar nicht unsinnig, wenn man
‚ähnliche‘ Bildmotive mit verschiedenen Pixelgrößen hat. Dann
ist so eine Maßzahl sehr hilfreich.

Vergleich mal MP3-Stücke: Wenn ein Musikstück mit 4 Minuten
etwa 4 MB hat, kann man daraus folgern, dass ein
15-Minuten-Stück etwa (!) 15 MB hat. Es gibt also eine
Relation von etwa 1 MB/min.
Der Sinn der Sache: Hat man eine CD mit 78 min MP3-Musik, weiß
man, dass sie insgesamt in etwa 78 MB Speicherplatz braucht,
da die Daten"dichte" bei den Stücken einer CD wahrscheinlich
ähnlich sein wird.

Stefan

#15

Hallo!

Wie Olaf schon sagte, eine Faustformel dafür gibt es nicht. Du solltest Dich an folgenden Kriterien orientieren:

  • Wie schnell soll die Seite geladen werden?
  • Welche Internetanbindung haben mögliche Besucher?
  • Sinnvoller Kompromiss zwischen Bildqualität, Bildgröße und Dateigröße
  • Dateigröße bei JPG-Kompression hängt von der Art des Bildes ab

Eine allgemeingültige Regel kann es deshalb nicht geben.

Ciao
Andreas

#16

Moin,

Dann noch mal hier für die hartnäckig Erkenntnisresistenten:

wie war das mit dem Glashaus und den Steinen?

Bei der Bildspeicherung in deinem Bildbearbeitungsprogramm
hast du in der Regel 3 Variable mit denen du operieren musst.
1.Die Bildgrösse (Apx x Bpx)
2.Die Auflösung (DPI)
3.Die Kompression

Wenn die Bildgröße feststeht, ist die DPI-Zahl nur noch eine abhängige Variable, die von der Größe des Ausgabegerätes abhängt. Bei Drucksachen ist das eben Papier, und nach dem Druck steht unwiderruflich fest, wie lang und wie breit ein Bild ist. Da kann man dann eben sagen wieviele inches das sind. Im Web steht gar nichts fest, einer hat nen Riesenscreen und ein anderer surft mit dem Handy, außerdem kann jedes Bild per Soft- oder Hardware vergrößert oder verkleinert werden. Du weißt nie, wieveiele inches das beim Betrachter sind, somit ist eine DPI-Zahl völlig sinnlos.
Aber ich weiss, dass sich viele Leute aus der Printbranche schwer damit tun, zu erkennen, dass das Web ein viel flexibleres Medium als Papier ist und dementsprechend eine andere Herangehensweise verlangt.

Es macht schlicht und ergreifend Sinn die DPI auf 72
(meinetwegen auch 96) festzulegen um nur noch mit 2 Variablen
operieren zu müssen.
Ich mache das tagtäglich so.
Millionen Webdesigner machen das tagtäglich so.

Ja, es gibt ja auch Millionen schlechte Webseiten. Viele Webdesigner, die früher Flyer gestaltet haben, pressen ihr Seiten mit Gewalt in frames und tables und „optimieren“ für bestimmte Auflösungen oder Browser. Ein bisschen mehr geistige Flexibilität wäre da ganz gut.

Wer es an dieser Stelle immer noch nicht kapiert hat der möge
das doch einfach mal in der Praxis ausprobieren.

Ja klar doch, mache ich seit Jahren.

Olaf

1 Like
#17

Hallo,

Es macht schlicht und ergreifend Sinn die DPI auf 72
(meinetwegen auch 96) festzulegen um nur noch mit 2 Variablen
operieren zu müssen.
Ich mache das tagtäglich so.
Millionen Webdesigner machen das tagtäglich so.

… ich nicht - wie ich oben schon andeutete.
Aber ich kaempfe fast taeglich mit den „wohlmeinenden“ Grafikern, die mir ihre Vorlagen „schon mal auf 72dpi“ geben und mir damit jede Moeglichkeit nehmen, an einem Bild noch etwas zu tun. Ich habe lieber High-Res-Bilder, die ich bearbeiten kann und mir dann auf meine benoetigte Groesse bringe. Auf meine Pixelgroesse wohlgemerkt, denn die dpi der Bilder interessieren mich nicht.

Ich weiss, dass ein Bild, wenn es 780px breit ist hoechstwahrscheinlich auf eine 800x600er Aufloesung passt.
Und dass ein Bild, wenn es 1000px breit ist hoechstwahrscheinlich auf eine 1024x768er Aufloesung passt.
(Hoechstwahrscheinlich, weil ich ja nicht weiss, ob der User seinen Browser maximiert hat und wie breit seine Scroll-Balken sind, aber das ist ein anderes Thema.)

Alles andere interssiert mich nicht. 1000 Px sind auf dem Bildschirm 1000Px und bleiben es auch, egal, wieviel dpi ich ihnen gebe.
Die Groesse aendert sich dann noch mit der Aufloesung und dem Monitor des Users.
Hat er - Extremfall eins - einen 21"-Bildschirm und faehrt den mit 800x600 ist das Bild riesig gross.
Hat er - anderer Extremfall - einen 15"-Bildschirm und faehrt den mit 1280x1024 ist das Bild recht klein.

Ich weiss nicht, wo ich da noch die Aufloesung unterbringen soll, wenn ich mich mit einem Pixelbild auf einem Pixelmedium beschaeftige.

Deine dritte Variable, die Kompression kann ich leicht beantworten: ich habe ein DVD-Laufwerk und einen DSL Anschluss - lass die Dinger unkomprimiert. Aber das hat ja auch nichts mit den Ausmassen der Bilder zu tun - nur mit der auch als Groesse benannten Dateimenge.

Erst wenn ich drucke interessieren mich die dpi: Wenn ich drucke, arbeite ich dann mit 300dpi oder mehr.

Gruesse aus der taeglichen Praxis
Christian

Der noch einmal http://praegnanz.de/essays/72dpi empfiehlt.

#18

Hallo Markuss,

Byte/Pixel sind eine irrelevante Grösse, zumalsich da duch Komprimierung sowieso einiges relativiert wird.

Im Internet sind eigentlich nur die Ladezeit der Seite und der erzeugte Trafic relevant.

Die Ladezeit, hängt zum einen von der Anbindung deiner Besucher und deines Servers ans Internet ab.
Auch in D hat, aus technischen Gründen, nicht jeder die Möglichkeit über aDSL ans Internet angebunden zu sein. Mit ISDN sind’s dann nur 8kByte/s, über analog noch etwa die Hälfte. Wenn du auf diese Klientel verzichten kannst, kannst du auch 50KByte/Bild verwenden.

Der Trafic hängt dann einerseits von der Leistungsfähigkeit deines Servers und andererseits vom Vertrag mit deinem Provider (manche Providerbilligen nur ein bestimmtes Datenvolumen/Monat. Ist diese überschritten, wird die Seite bis Monatsende gesperrt. Und bei manchen Providern zahlt man pro MB…).

Desweiteren kommt es noch auf die Art der Seite an.
Viele grosse Bilder auf der Hauptseite eines Anbieters, sind beim ersten mal noch interesant, wenn du diese Seite aber taäglich öffnest und immer die selben Bilder erscheinen, sind sie nur noch lästig, weil sie dir keine nützliche Information mehr bringen und nur die Ladezeiten verzögern.

MfG Peter(TOO)