Allg. Frage: Webdesign: JPG vs PNG vs GIF

[Jenny]

Hallo!

Da ich mich demnächst wohl auch mit WebDesign beschäftigen werde, habe ich mal eine allgemeine Frage an euch:
Um Bilder oder Grafiken auf HPs einzubinden, gibt es drei vorrangige Formate, die sich meines Wissens nach folgendermaßen gliedern:

JPG:
- Für Fotos oder komplexe Grafiken mit Verläufen
- unterstützt keine Transparenz

PNG:
- unterstützt komplexere Transparenzen
- ideal für (native) Vektorgrafiken (?)

GIF:
- unterstützt einfache Transparenzen
- unterstützt animierte Grafiken
- ideal für Graustufen (?)

Soweit meine (hoffentlich richtigen) Infos.
Wer von euch kann hierzu noch tatkräftige eigene Erfahrungen beitragen?
Z.B. Wann benutze ich trotzdem JPG (PNG, GIF), obwohl "eigentlich" PNG (GIF, JPG) den "Regeln" entspräche?
Oder auch, um noch ein weiteres Format einzubringen:
Z.B. Wann GIF, wann aber SWF?

Bitte keine Antworten à la "Vergleiche die Ergebnisse doch in 'Für Web und Geräte speichern'; da siehst du die Unterschiede." Soweit bin ich schon...
Mir geht es hierbei um grundsätzliche Unterschiede und Erfahrungen!

Ich würde mich über zahlreiche Antworten und Anregungen freuen! Und wenn genügend Hilfreiches und Weiterführendes zusammenkommt, dann kann man dies auch gern als "Leitfaden" in den "Grundlagen-Bereich" verschieben, bzw. festtackern.

Ich danke euch bereits jetzt für eure rege Teilnahme!

edit: Wer gute und weiterführende Links zu diesem Thema kennt: Natürlich immer raus damit!

[dorftrottel]

Hey Jenny,

ich weiss nicht viel darüber, aber ich hoffe ich kann dir wenigstens Linktechnisch helfen

http://de.selfhtml.org/grafik/formate.htm

Viel Spass beim Durchlesen

[Jenny]

Danke Dorftrottel!

Dieser Link vereint so ziemlich das, was ich mir aus diversen anderen Links zusammenklabüstert habe, wobei LuraWave für mich bisher völlig neu war... (weil es vielleicht (noch) nich so gängig ist).
Also schonmal DANKE dafür!

Was mich weiter interessieren würde, wären eure persönlichen Erfahrungen mit PNG im IE 5, 6, 7 und 8, da ja wohl nicht alle Versionen vom IE dieses Format fehlerfrei unterstützen.
Habt ihr auch schon Probleme oder Unterschiede mit JPG oder GIF in unterschiedlichen Browsern festgestellt?

[Prenomium]

Hier meine persönlichen Erfahrungen mit PNG:

Gibt, wie schon erwähnt, eine guten Transparenz bei guter Bildqualität wieder, meines empfindens nach deutlich besser als ein GIF, allerdings wird die Transparenz beim PNG im IE5 und 6 nicht dargestellt, da gibts dann in der Regel einen weißen Hintergrund.

Probleme mit JPG hatte ich noch garnicht, ausser das es halt keine Transparenz darstellen kann.

Oftmals arbeite ich lieber den Hintergrund in ein JPG ein, als ein oft unschönes GIF zu benutzen.

[sham]

hey jenny,

es kommt auch noch erschwerend hinzu das alle 3 für das selbe bild eine unterschiedliche dateigröße abgeben.

.jpg ist defenitiv für die bildpräsentation, also um zb bilder aus einer seite in einer galerie zu zeigen.

.png datein benutze ich persönlich nur noch für buttons welche eben transparente bereiche enthalten. nicht zu missachten ist auch noch das ein und das selbe bild im png eine wesendlich größere datei ergibt.
also für zb eine bildpräsentation eher ungeeignet meiner meinung nach. vorallem wenn man bedenkt das man zb 50 bilder zeigen will. da ist nen altersschwacher rechner schnell mal überfordert.

.gif dateien... hmm, nutze ich rein für animationen. ich finde das dieses format leichte transparenzunterschiede zu stark abstuft und das es allgemein eine viel zu grottige qualität für bilder abgibt.

vielleicht war etwas brauchbares dabei für dich.

[heikehk]

Hi Jenny,

also ich bevorzuge im allgemeinen PNG, weil ich finde, dass hier die schönsten Ergebnisse von der Bildqualität her zu finden sind. Wobei ich auch JPG und GIF nehme, wenn es das Bild hergibt und die Dateien dadurch kleiner werden. Denn im Web ist es nach der einigermaßen passendenden Bildqualität auch wichtig, dass die Bilder schnell geladen werden können.

Bei Hintergründen kannst Du das auch oft erreichen, indem Du einfach kleine Bilder machst, die wiederholt werden (also z.B. einen Farbverlauf, von dem Du dann nur (je nachdem in welche Richtung er geht nur eine Breite / Höhe von 10px nimmst und nur den Verlauf selbst komplett lässt.

Wichtig ist aber zu wissen, dass man für eine in allen Browsern korrekte Darstellung der PNG-Transparenzen einen Patch braucht, der eingebunden sein muss. Sonst sieht das Ganze im IE bis Version 5 eher bescheiden aus.

Den PAtch findest Du hier http://www.twinhelix.com/css/iepngfix/

Genau genommen gibt es wohl leider keine allgemein gültige Aussage wie für den Zweck XY nimmt man immer das Format Z. Das musst Du immer anhand der Anforderungen feststellen.

Hoffe das hier hilft Dir trotzdem ein wenig weiter.

Gruß
Heike

[Ylloh]

Ich würde mich da Heike total anschließen:

Das richtige Format gibt es nicht. Man muss das immer an Hand von den Umgebungsvariablen abstimmen. Die Komprimierung der Bilder ist halt grundlegend unterschiedlich
Volker hat zu den Formaten schon mal was geschrieben (im Grundlagenbereich )
http://www.photoshop-cafe.de/forum/showthread.php?t=48

GIF mag ich gern, sind klein und schnell geladen, bei entsprechend angelegten Bildern auch kein Problem mit der Transparenz (und ja es gibt noch etliche die mit dem IE6 surfen [müssen]) png ist super bei Layouts die sehr variabel sind und wo z.B. der Hintergrund viel Struktur hat, da hat der Alphakanal deutliche Vorteile mit seiner Halbtransparenz. (Stichwort Web 2.0) - Verschiedene Hintergrundfarben, verschiedene Positionierungsmöglichkeiten etc. Bei einfachen Hintergründen reicht auch das Auffüllen der Halbtransparenten Bereiche mit der entsprechenden Hintergrundfarbe

JPG ist für große Bilder mit vielen Farben richtig. PNG und GIF können nur max 265 Farben. Kleine Bilder in jpg könnten durch die Kompression auch unhübsch werden, da einfach ausprobieren.

Zu deinen Fragezeichen: Thema Vektorgrafiken: Da spielt der Alphakanal der Transparenz eine Rolle.

Graustufen: Gif hat dafür die beste komprimierungsmethode, da keine naheliegenden Pixel "zusammengefasst" werden wie bei JPG.

Oft ist es dann doch letztendlich ein "try out" wobei einige leider die Tugend der Optimierung vergessen haben: Kleine Dateien, kurze Ladezeit.

Das gilt dann auch bei Animationenen, GIF ist für aufwändige Animationen nichts. Flash hat nicht jeder, ist komplizierter einzubinden, bietet aber für komplexe Animationen (gerade so was wie Durchlauftexte) deutlich kleinere Dateigrößen.

[Jenny]

Hallo!

Ich danke euch allen für eure Infos, zumal sie auch im Großen und Ganzen mein eigenes Halbwissen bestätigen.
Dann werde ich mich mal langsam an die Sache heranwagen...