|
|||
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 01:01 Uhr) |
Sponsored Links |
Sponsored Links |
|
||||
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 |
|
||||
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." |
|
|||
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 |
|
||||
Zitat:
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
|
||||
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.
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
|
||||
Zitat:
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
|
||||
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 |
Sponsored Links |
|
|||
Zitat:
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 |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Web nach Bilder durchsuchen | rs-web | Offtopic | 15 | 13.11.2010 13:02 |
tineye.com - Ähnliche Bilder im Web finden | SimonWpt | Ressourcen | 1 | 21.10.2008 16:44 |
Bildergalerie mit Variablen | fledermaus | Serveradministration und serverseitige Scripte | 1 | 08.04.2008 09:57 |
All You Need For Accessibility - Tutorials, Tools, Books, Validators, etc | Webnauts | Barrierefreiheit | 1 | 26.08.2006 00:07 |
All You Need for Accessibility | Webnauts | Barrierefreiheit | 0 | 29.03.2006 19:07 |