zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Grafik, Design, Typografie
Seite neu laden Bilder und Bildqualität im Web - Entscheidungskriterien und Tricks?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.06.2007, 12:54
{ display: random;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.038
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard Bilder und Bildqualität im Web - Entscheidungskriterien und Tricks?

Ich möchte eine kleine Diskussion hier anstoßen.
Das Ergebnis könnte zusammengefasst in die Knowledge Base reinpassen.

Bilder im Web sind häufig und häufig unverzichtbar.

A

Je

1) größer ( in Pixel)
2) besser (von der Qualität)

her, desto mehr Speicherplatz verbrauchen die Dinger und desto mehr Ladezeit. Also ist (noch) mit Rücksicht auf Modemnutzer ein Kompromiss zu finden.

Hier möchte ich über denkbare Bildgrößen und -Qualitäten diskutieren.
Wer ein brauchbares Bildbearbeitungsprogramm hat, kann die Qualität der Ausgabe des Bildes beeinflussen.

Meiner Erfahrung nach reicht es z.B. meistens aus, wenn jpegs nicht mit 100% Qualität ( = unverändert), sondern mit 55% bis 65% (Qualitätsrate nach Komprimierung) ausgegeben werden. Das Ergebnis ist dem Original hinreichend ähnlich, Blockartefakte tauchen meist noch nicht auf.

Hier mal ein paar Bilder und Grafiken zum Vergleich. Alle basieren auf dem jeweils gleichen Ausgangsbild, bzw. Grafik.
Jpg und png sind jeweils 24-bit Echtfarbenbilder, das gif ist auf 256 Farben beschränkt.




Ein jpg - Dateigröße: 1692 b



Ein png - Dateigröße 2653 b



Ein gif - Dateigröße 1019 b

Nur wenige Farben bzw. Farbtöne, so konnte beim gif die Palette auf 32 Farben reduziert werden was man deutlich an der Dateigröße merkt. Subjektiv sind gif jund png gleichwertig, das jpg fällt etwas ab.

Das gleiche mit Farbe:



jpg Dateigröße 2310 b




png Dateigröße 2676



gif Dateigröße 1540 b


Das jpg ist hier indiskutabel bei 80% Qualität vom Ausgangsbild. PNG ist einwandfrei, die Farben sind getreu, das gif kommt dem recht nahe. Die Aufgabe war aber auch nicht allzu schwierig für das gif.

Mal was für die Logofraktion, das fiktive Label weirdr music:



Sehr gut aussehend bei 9153 b, nur unauffällige Artefakte.



Noch besser aussehend bei 24.915 b, farbtreu.



Da zeigt sich eine Schwäche des gif Formats. Sieht immer noch gut aus, weil im wesentlichen nur ein Farbverlauf zu bewältigen ist, aber der Algorhythmus läßt trotz einiger Filter keine stärkere Komprimierung zu: 16.911 b, nicht farbtreu.

Der Punkt geht hier klar an das jpeg wegen der geringen Dateigröße. Die Farbverlaufsbehandlung ist vorbildlich, an den Übergängen zu den Kanten gibt es wie so oft, Artefakte, aber bei entsprechend vorsichtiger Komprimierung fällt das nur bei genauem Hinsehen auf.

Noch ein kleines Bild, diesmal ein Ausschnitt aus einem alten Foto von mir mit welchem ich 1998^^ die Startseite meines Webauftritts schmückte:



jpg 2182 b, sehr klein, wenig Farbnuancen an dieser Stelle



png 12.530 b, das hat mich schon überrascht.



gif 5.555 b - mit einem bestimmten Filter wären 200 b zu sparen gewesen, aber die Zahl hat mir so gut gefallen.

Fazit: Das jpg schlägt die anderen Formate um Längen in der Dateigröße, was mich ziemlich überrascht hat. Ich dachte, der Wechsel von scharfen zu weichen Kanten gibt dem png Format einen Vorteil. Denkste. Aber: Artefakte sind ziemlich deutlich zu sehen wenn man genauer hinschaut.

Eine typische Webanwendung: Ein Foto für die Galerie:



jpg 12664 b




png 77.413 b, Farbtreue und Detailgenauigkeit ist nicht alles, wenn ich mir die Dateigröße anschaue.




gif 29.172 b, es müht sich redlich, aber für Fotos gibts wirklich besseres.



B

Nicht jedes Bildformat ( jpeg, png, gif usw.) eignet sich für jeden Zweck gleich gut.

PNG hat von Anfang an eine größere Dateigröße als jpeg oder gif. Dafür haben PNG`s einen Alphakanal (Transparenz). Der bevorzugte Einsatzzweck ist daher bei Farbtreue ( Logo u.ä.) und/oder dem Bedarf einer Transparenz.
Gifs haben einen beschränkten Farbraum, bei bestimmten Farbverteilungen innerhalb eines Bildes erreicht man damit allerdings unschlagbar kleine Dateigrößen.

Jpegs eignen sich sehr gut für Farbverläufe und sind bisher unschlagbar bei normalen Fotos wenn man die Transparenz nicht braucht.


Eure Erfahrungen und Hinweise?
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Geändert von andir (02.06.2007 um 00:01 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.06.2007, 13:10
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.035
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Es gibt da noch den Unterschied bei PNG zwischen 8bit und 24bit. Ersteres bietet die gleichen Vor- und Nachteile wie ein Gif, letzteres ist natürlich deutlich größer (vom Speicherplatzbedarf).

Jpegs verwende ich eigentlich nur bei Fotos oder Grafiken mit vielen verschiedenen Farben. Für Verläufe nutze ich Gif/Png8 als sich wiederholende 1px-Grafik, diese Formate eignen sich auch gut für Grafiken mit wenigen Farben bzw. großen einfarbigen Flächen.

Mit Png24 haben die älteren IEs leider ein Problem (ja es gibt workarounds, aber ich pfusche nunmal nicht gerne ).
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.06.2007, 20:05
Benutzerbild von laborix
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.12.2005
Beiträge: 1.494
laborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von andir Beitrag anzeigen
Eure Erfahrungen und Hinweise?
Mein Wissensstand:

Reale Pixel-/Farbwerte haben nur BMP, PNG und TIF.
JPG macht beim Speichern eine Pixelannäherung, was die geringe Größe zuläßt. Nachteil dabei, mit jedem neuen Speichern verliert JPG die Qualität.

BMP ist fürs WWW unbrauchbar, TIF wird professionel für die Druckvorstufen verwendet und existiert schon seit den Zeiten auf dem Amiga (frühe 90ziger). Ist aber auch fürs WWW nicht zu gebrauchen.

PNG bildet das passende Bindeglied, ist farbecht und funktioniert im WWW. Alpha Kanal Transparenz ist leider erst ab IE7 möglich, aber Opera und Mozilla können das schon lange, Safari übrigens nicht zu vergessen.

Die Animation von GIF wurde mit PNG auch versucht, es wurde das MNG-Format geboren. Mozilla Corp. hat das aber sofort ge"chanceld" und abgeschworen. Der einzigste Browser der das MNG-Format beherrscht ist Konqueror ab 3.x.

GIF macht nur 256 Farben, diese aber gut. Viele Browser kommen damit zurecht, PNG führt aber mehr ein Schattendasein. Viele entscheiden sich für JPG, Bild von Kamera ins Web und fertig

Für mich ist PNG das einzige reale Webformat, auch wenn es etwas größer ist als GIF und JPG. Qualitativ ist es aber besser, selbst IE zeigt es an (abgesehen von der Transparenz ).
__________________
Personal stuff
Mit Zitat antworten
  #4 (permalink)  
Alt 01.06.2007, 22:24
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.640
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo, Andir!

Über Jahre hinweg habe ich alle Fotos in meinen Fotogalerien in zwei Formaten angeboten. Die kleinen für die User mit analogem Modem, die größeren für den Personenkreis mit ISDN oder DSL.

Die Zugriffszahlen bei den kleineren Formaten waren so verschwindend gering, dass ich das doppelgleisige Anbieten wegen des deutlich erhöhten Aufwands eingestellt habe.

Ich nehme an, wenn Fotos interessant genug sind, wartet auch der Personenkreis mit analogem Zugang lieber etwas länger, als (zu) kleine oder qualitativ minderwertige Fotos zu laden.

Ich glaube, dass die Monitorgröße bzw. Auflösung mehr Einfluss auf die (gewünschte) Fotogröße hat als die Ladezeit!
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #5 (permalink)  
Alt 02.06.2007, 00:14
{ display: random;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.038
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Danke für Eure Meinungen

Habe ein paar Bilder in den ersten Post eingebaut zur Verdeutlichung.

@ Dieter: Das ist ein guter Punkt, aber wenn du unverlangt eine fette Datei vorgesetzt bekommst, an der sich dein alterschwaches Modem verschluckt -hm.


@Laborix: Danke für die Farbhinweise bzgl. tif, png und bmp. bmp ist absolut untauglich fürs web bleibt also nur png bei vertretbaren Dateigrößen bei diesen drei Formaten. Aber auch das jpg hat seine Vorteile, siehe meine Ergänzungen zum ersten Post.


@inta: Mit dem Unterschied 8bit zu 24 bit hast Du recht. Habe das oben eingearbeitet. Ein "Quasi-gif" dann^^

Und ja: Bei Flächen ist gif gut.

Ich kanns grad nicht testen: Nivellieren sich die Dateigrößen bei größer werdenden Dateien? Wäre auch mal eine Versuchsreihe wert.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #6 (permalink)  
Alt 02.06.2007, 00:23
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.640
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Das ist ein guter Punkt, aber wenn du unverlangt eine fette Datei vorgesetzt bekommst, an der sich dein alterschwaches Modem verschluckt -hm.
Deshalb führe ich in meinen Galerien die kb-Werte der Fotos an.
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #7 (permalink)  
Alt 02.06.2007, 00:48
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.640
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Entscheidungskriterien
Das ist ja Bestandteil des Themas, das Du hier eröffnet hast.

Die "Begehrlichkeit" des Users, ein bestimmtes Foto sehen zu wollen, dürfte, unabhängig von der Bandbreite des Netzzugangs, den Grad seiner Geduld sehr wesentlich mitbestimmen.
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #8 (permalink)  
Alt 02.06.2007, 01:13
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.640
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
<offtopic>Ich finde Dieter sieht aus wie Harald Schmidt als er von seiner Weltreise zurückkam.</offtopic>
Wenn schon, dann sieht der aus wie ich, gelle!?
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #9 (permalink)  
Alt 02.06.2007, 10:42
Benutzerbild von kampfgnom
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 22.11.2006
Ort: Radebeul
Beiträge: 1.809
kampfgnom befindet sich auf einem aufstrebenden Ast
Standard

ich kenne modem user...die prinzipiell erstmal grafiken aus haben
und die erst nach bedarf zu schalten
wird zwar aüserst langweilig das web, aber dafür schnell...für informationen reichs^^
__________________
Meine Spielwiese: http://blog.kanedo.net
Ich bei Flickr? Da: Flickr: Fotostream von kanedo-projekt
Für open Source Liebhaber: open Com

Auch ich Zwitschere als @kanedo
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 02.06.2007, 13:53
{ display: random;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.038
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Zitat:
Die "Begehrlichkeit" des Users, ein bestimmtes Foto sehen zu wollen, dürfte, unabhängig von der Bandbreite des Netzzugangs, den Grad seiner Geduld sehr wesentlich mitbestimmen.
Hier gehts ja um Bilder allgemein. Dass der bewußte Aufruf einer Fotogalerie mit längeren Ladezeiten verbunden ist, dürfte klar sein. Wer jedoch als Modemnutzer ( immer noch knapp die Hälfte der Leute) auf eine Webseite kommt und erstmal stundenlang warten muß, bis sich das 250 kb Headerbild geladen hat, dürfte darüber nicht erfreut sein.
Mit besonderem Pech liegt das Bild noch in der gleichen Layouttabelle, die wichtige Links oder gar den Content enthält - Weißraum mal anders.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Web nach Bilder durchsuchen rs-web Offtopic 15 13.11.2010 12:02
tineye.com - Ähnliche Bilder im Web finden SimonWpt Ressourcen 1 21.10.2008 15:44
Bildergalerie mit Variablen fledermaus Serveradministration und serverseitige Scripte 1 08.04.2008 08:57
All You Need For Accessibility - Tutorials, Tools, Books, Validators, etc Webnauts Barrierefreiheit 1 25.08.2006 23:07
All You Need for Accessibility Webnauts Barrierefreiheit 0 29.03.2006 18:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:30 Uhr.