it-swarm.com.de

Website-Bildformate: Auswahl des richtigen Formats für die richtige Aufgabe

Was halten Sie beim Entwerfen einer Website für das beste Bildformat, das Sie für eine bestimmte Aufgabe verwenden können?

Ich bin immer in einem Dilemma, wenn ich herausfinden möchte, welches Format für eine bestimmte Aufgabe verwendet werden soll ... wie zum Beispiel sollte ich .jpg rundum verwenden? oder, wann und warum sollte ich ein .png verwenden?

Wenn Sie beispielsweise die Website von AMAZON verwenden, verwenden Sie .jpg für Produktbilder ( Beispiel ), .gif für dieses transparente Pixel ( Beispiel ) und .png für ihre CSS-Sprites ( Beispiel )

Andererseits verwenden Play.com ein .gif für ihr Website-Logo ( Beispiel ), aber .jpg für ihre Website-Produkte (z. B. Amazon) ( Example ) und soweit ihre Hauptseite reicht, haben sie keine .png s darauf.

Welche Formate sollte ich für meine Websites verwenden? und warum sollte ich sie verwenden?

[UPDATE]

Vielen Dank CruellO für dieser Link für die Erklärung der Unterschiede und auch Dustin für die Angabe von Gründen.

43
Andreas Grech

JPEGs sind für Fotos. Ich sehe gelegentlich JPEGs mit Text und sie sehen einfach schrecklich aus. Text eignet sich am besten für Text, andernfalls verwenden Sie PNG.

Wenn es sich nicht um ein Foto handelt, sondern um eine Grafik, verwenden Sie eine PNG-Datei. Ein PNG ist fast immer kleiner als das entsprechende GIF und verliert nicht an Qualität wie eine JPEG-Datei. Ein PNG-Äquivalent zu JPEG ist normalerweise viel größer (vorausgesetzt, es ist fotorealistisch). Es kann Zeiten geben, in denen dies immer noch wünschenswert ist.

PNG lässt zwar 8-Bit-Transparenz zu, aber wenn Sie IE unterstützen müssen, werden Sie feststellen, dass das Unternehmen dies immer wieder ablehnt. Sie do unterstützen meines Wissens ein einzelnes Bit Transparenz in einem 8-Bit-Bild (im Wesentlichen dasselbe wie gif). Es gibt auch zahlreiche Hacks, um 8-Bit-Transparenz für die Arbeit in IE zu erhalten. Ich selbst habe mich nie darum gekümmert.

In Summe:

  • Fotos → jpg
  • ! Fotos → png
49
Dustin

Sie sollten einige wichtige Faktoren kennen ... 

Erstens gibt es zwei Arten der Komprimierung: Lossless und Lossy

Lossless bedeutet, dass das Bild verkleinert wird, jedoch die Qualität nicht beeinträchtigt wird. Lossy bedeutet, dass das Bild (noch) kleiner gemacht wird, jedoch zu Lasten der Qualität. Wenn Sie ein Bild immer wieder in einem verlustbehafteten Format speichern, wird die Bildqualität immer schlechter.

Es gibt auch unterschiedliche Farbtiefen (Paletten): Indizierte Farbe und Direkt Farbe

Mit Indexed bedeutet dies, dass das Bild nur eine begrenzte Anzahl von Farben (normalerweise 256) speichern kann, die vom Bildautor ausgewählt werden. Mit Direct bedeutet dies, dass Sie Tausende von Farben speichern können, die dies nicht getan haben wurde vom Autor ausgewählt.


BMP - verlustfrei/indiziert und direkt 

Dies ist ein altes Format. Es ist verlustfrei (beim Speichern gehen keine Bilddaten verloren), aber es gibt auch wenig bis keine Komprimierung, was bedeutet, dass das Speichern als BMP sehr große Dateigrößen ergibt. Es kann Paletten sowohl mit Index als auch mit Direkt enthalten, aber das ist ein kleiner Trost. Die Dateigrößen sind so unnötig groß, dass niemand dieses Format jemals wirklich verwendet.

Gut für: Nichts wirklich. Es gibt nichts, was BMP von anderen Formaten hervorhebt oder besser ist.

BMP vs GIF


GIF - Nur verlustfrei/nur indexiert 

GIF verwendet eine verlustfreie Komprimierung, was bedeutet, dass Sie das Bild immer wieder speichern können und niemals Daten verlieren. Die Dateigrößen sind viel kleiner als bei BMP, da tatsächlich eine gute Komprimierung verwendet wird, jedoch nur eine indizierte Palette gespeichert werden kann. Das bedeutet, dass die Datei maximal 256 verschiedene Farben enthalten kann. Das hört sich nach einer kleinen Menge an und ist es auch.

GIF-Bilder können auch animiert und transparent sein.

Gut für: Logos, Strichzeichnungen und andere einfache Bilder, die klein sein müssen. Nur wirklich für Websites verwendet.

GIF vs JPEG


JPEG - Verlust/Direkt 

JPEG-Bilder wurden entwickelt, um detaillierte fotografische Bilder so klein wie möglich zu machen, indem Informationen entfernt werden, die das menschliche Auge nicht bemerkt. Infolgedessen handelt es sich um ein Lossy-Format. Wenn Sie die gleiche Datei immer wieder speichern, gehen mit der Zeit mehr Daten verloren. Es hat eine Palette von Tausenden von Farben und eignet sich daher hervorragend für Fotos, aber die verlustbehaftete Komprimierung bedeutet, dass es für Logos und Strichzeichnungen schlecht ist: Sie sehen nicht nur unscharf aus, sondern diese Bilder haben im Vergleich zu GIFs auch eine größere Dateigröße!

Gut für: Fotografien. Auch Steigungen.

JPEG vs GIF


PNG-8 - verlustfrei/indiziert 

PNG ist ein neueres Format, und PNG-8 (die indizierte Version von PNG) ist ein guter Ersatz für GIFs. Leider hat es jedoch einige Nachteile: Erstens kann es keine Animationen unterstützen, wie es GIF kann (gut möglich, aber nur Firefox scheint dies zu unterstützen, im Gegensatz zu GIF-Animationen, die von jedem Browser unterstützt werden). Zweitens gibt es einige Supportprobleme mit älteren Browsern wie IE6. Drittens haben wichtige Programme wie Photoshop eine sehr schlechte Implementierung des Formats. (Verdammt noch mal, Adobe!) PNG-8 kann nur 256 Farben wie GIFs speichern.

Gut für: Die Hauptsache, die PNG-8 besser macht als GIFs, ist die Unterstützung von Alpha Transparency.

PNG-8 vs GIF

Wichtiger Hinweis: Photoshop unterstützt Alpha-Transparenz für PNG-8-Dateien nicht. (Verdammt noch mal, Photoshop!) Es gibt Möglichkeiten, Photoshop PNG-24 in PNG-8-Dateien zu konvertieren und dabei die Transparenz beizubehalten. Eine Methode ist PNGQuant , eine andere ist das Speichern Ihrer Dateien mit Fireworks .


PNG-24 - Verlustfrei/Direkt

PNG-24 ist ein großartiges Format, das verlustfreie Kodierung mit direkter Farbe kombiniert (Tausende von Farben wie bei JPEG). In dieser Hinsicht ist es BMP sehr ähnlich, mit der Ausnahme, dass PNG Bilder tatsächlich komprimiert, was zu sehr viel kleineren Dateien führt. Leider sind PNG-24-Dateien immer noch viel größer als JPEGs, GIFs und PNG-8s. Sie müssen sich also noch überlegen, ob Sie eine solche Datei wirklich verwenden möchten.

Obwohl PNG-24s während der Komprimierung Tausende von Farben zulassen, sollen sie JPEG-Bilder nicht ersetzen. Ein als PNG-24 gespeichertes Foto ist wahrscheinlich mindestens fünfmal so groß wie das entsprechende JPEG-Bild, wobei die sichtbare Qualität nur geringfügig verbessert wird. (Dies kann natürlich ein wünschenswertes Ergebnis sein, wenn Sie sich nicht um die Dateigröße kümmern und die bestmögliche Bildqualität erhalten möchten.)

Genau wie PNG-8 unterstützt auch PNG-24 Alpha-Transparenz.

Ich hoffe das hilft!

68
Chuck Le Butt

PNGsollte verwendet werden, wenn:

  • Sie benötigen Transparenz (entweder 1-Bit- oder Alphatransparenz)
  • Verlustfreie Komprimierung funktioniert gut (z. B. für ein Diagramm oder ein Logo oder ein vom Computer generiertes Bild)

JPEGsollte verwendet werden, wenn:

  • Verlustfreie Komprimierung funktioniert nicht gut (z. B. ein Foto)
  • Vollfarbe wird benötigt

GIFsollte sein wenn:

  • PNG ist nicht verfügbar, z. B. für sehr alte Software oder Browser
  • Animation ist notwendig

Trotz gegenteiliger Mythen übertrifft PNG die GIF in den meisten Aspekten. PNG kann außer Animationen für jeden Bildmodus von GIF verwendet werden. Wenn der gleiche Bildmodus verwendet wird, hat PNG aufgrund seines überlegenen DEFLATE-Algorithmus im Vergleich zu LZW eine bessere Komprimierung. PNG bietet auch zusätzliche Modi, die GIF nicht ausführen kann, wie 24-Bit-Farbe und Alphatransparenz. In diesem Fall können jedoch Probleme im Web auftreten. Alpha-Transparenz weist Kompatibilitätsprobleme mit IE6 auf, die gut dokumentiert sind (obwohl es Hacks gibt, um herumzukommen).

PNG-Modi umfassen (dies ist nur eine kleine Untermenge)

  • Palettenfarbe von 2 bis 256 Farben (wie GIF)
  • Palettenfarbe von 2 bis 256 Farben mit transparenter Farbe (wie bei GIF)
  • Echtfarbe (24 Bit Farbe)
  • Echtfarbe mit Alphakanal (24 Bit Farbe + 8 Bit Alphatransparenz)

Verwenden Sie für die beste Komprimierung in PNG für das Web immer einen Palettenmodus. Wenn Sie feststellen, dass PNG-Dateien größer sind als die entsprechenden GIF-Dateien, speichern Sie das PNG-Format in 24-Bit-Farbe und das GIF-Format im Palettenmodus (da sich ein GIF immer im Palettenmodus befindet). Versuchen Sie zuerst, in den Palettenmodus zu konvertieren.

Wenn Sie feststellen, dass Ihre PNG-Dateien mit Transparenz in IE6 nicht ordnungsgemäß funktionieren, während Ihre GIF-Dateien verwendet werden, verwenden Sie 24-Bit-Farb- + Alphatransparenz im PNG- und Palettenmodus mit einer transparenten Farbe mit GIF. Sie müssen sicherstellen, dass Sie Ihr PNG-Format in einen Palettenfarbmodus mit einer transparenten Farbe konvertieren.

PNG verfügt auch über andere Modi, wie z. B. die Palettenfarbe mit Alphatransparenz in der Palette. Modi wie dieser können nicht in Photoshop verwendet werden.

13
thomasrutter

Versuchen Sie, diese Website aufzurufen http://www.killersites.com/articles_2005/theory/imagesInWebPages.jsp

Sie versuchen zu erklären, was wann verwendet werden soll

4
CruelIO

Wenn Sie eine große Anzahl von Bildern speichern oder präsentieren, ist das neue Google WebP-Format möglicherweise eine Überlegung wert, da es um 25% kleiner ist als PNG/JPG . Beachten Sie, dass dies derzeit nicht von allen Browsern unterstützt wird. NB. Diese wurde 2010 veröffentlicht, nachdem diese Frage veröffentlicht wurde.

1
JohnnyBizzle

JPEG-DATEIFORMAT

  1. Ideal für Bilder, wenn Sie die Größe klein halten müssen
  2. Gute Option für Fotos
  3. Schlecht für Logos, Strichzeichnungen und große Flächen in flachen Farben

GIF-DATEIFORMAT

  1. Ideal für animierte Effekte
  2. Eine gute Option für ClipArt-Grafiken, flache Grafiken und Bilder, die minimale Farben und präzise Linien verwenden
  3. Gute Option für einfache Logos mit Farbblöcken

PNG DATEIFORMAT

  1. Verlustfrei
  2. Eine ausgezeichnete Wahl, wenn Transparenz ein Muss ist
  3. Gute Option für Logos und Strichzeichnungen
  4. Wird nicht überall unterstützt

Weitere Informationen finden Sie in diesen Infografiken. Bilddateitypen: Wann werden JPEG, GIF und PNG verwendet?

0
Luzan Baral