Website Bild-Formate: Die Wahl das richtige Format für die richtige Aufgabe

StackOverflow https://stackoverflow.com/questions/392635

  •  23-08-2019
  •  | 
  •  

Frage

Wenn die Gestaltung einer Website, was halten Sie für die beste Bildformat für eine bestimmte Aufgabe zu benutzen?

ich mich immer in einem Dilemma, wenn sie versuchen, herauszufinden, welches Format für eine bestimmte Aufgabe zu verwenden ... wie zum Beispiel sollte ich rundherum benutzen .jpg? oder wann und warum soll ich eine .png?

Zum Beispiel unter Amazon 's-Website, verwenden sie . jpg für Produktbilder ( Beispiel ), < strong> .gif für dieses transparente Pixel ( Beispiel ) und .png für ihre CSS-Sprites ( Beispiel )

Auf der anderen Seite, Play.com verwenden, um eine .gif für ihre Website-logo ( Beispiel ), aber mit .jpg für ihre Website Produkte (wie Amazon) ( Beispiel ) und als Was ihre Haupt Seite geht, nicht sie haben keine .png s auf sie.

Also, welche Formate sollte ich für meine Websites verwenden? und warum sollte ich sie?

[UPDATE]

Danke CruellO für dieser Link die Unterschiede zu erläutern, und auch Dustin Gründe auf, was zu geben verwenden <. / p>

War es hilfreich?

Lösung

JPEGs sind für Fotos. Ich sehe JPEGs mit Text in ihnen gelegentlich und sie sehen einfach nur schrecklich. Dieser Text ist am besten für Text, sonst PNG verwenden.

Wenn es nicht ein Foto ist, aber Sie wollen eine Grafik davon, verwenden Sie eine PNG. Ein PNG ist fast immer kleiner als das Äquivalent gif und wird nicht die Qualität wie eine JPEG-Datei verlieren. Ein PNG Äquivalent eines JPEG wird in der Regel viel größer sein (es ist photorealistic vorausgesetzt). Es kann Zeiten geben, in denen dies nach wie vor wünschenswert ist.

PNG tut für 8-Bit-Transparenz erlauben, aber wenn Sie IE unterstützen müssen, werden Sie feststellen, dass sie sich weigern, ständig das richtig zu unterstützen. Sie Sie ein einzelnes Bit an Transparenz in einem 8-Bit-Bild unterstützen (im Wesentlichen der gleichen wie gif), soweit ich weiß. Es gibt auch zahlreiche Hacks 8-Bit-Transparenz erhalten in IE zu arbeiten. Ich habe nie die Mühe gemacht, mich.

Zusammenfassung:

  • Fotos → jpg
  • ! Fotos → png

Andere Tipps

Sie sollten ein paar wichtige Faktoren bewusst sein ...

Erstens gibt es zwei Arten von Kompression: Lossless und Lossy .

Lossless bedeutet, dass das Bild kleiner gemacht wird, aber zu keiner Beeinträchtigung der Qualität. Lossy bedeutet, dass das Bild gemacht wird (auch) kleiner, aber zu einem Nachteil für die Qualität. Wenn Sie ein Bild in einem Lossy-Format über und über gespeichert, würde die Bildqualität bekommt zunehmend schlechter und schlechter.

Es gibt auch verschiedene Farbtiefen (Paletten): indizierte Farbe und Direkt Farbe .

Mit Indexed bedeutet dies, dass das Bild nur eine begrenzte Anzahl von Farben speichern kann (in der Regel 256), die von dem Bild Autor gewählt werden, mit Direkt bedeutet dies, dass Sie viele tausende von Farben speichern kann, die nicht vom Autor selbst gewählt haben.

BMP - Lossless / Indexed und Direct

Dies ist ein altes Format. Es ist Lossless (keine Bilddaten beim Speichern verloren), aber es gibt auch wenig bis gar keine Kompression überhaupt, wie BMP Ergebnisse in sehr großen Dateigrößen Bedeutung Einsparung. Es kann Paletten sowohl indiziert und Direct hat, aber das ist ein kleiner Trost. Die Dateigrößen sind so unnötig groß, dass niemand jemals wirklich dieses Format verwendet.

Geeignet für: Nichts wirklich. Es gibt nichts, zeichnet BMP an, oder ist es nicht besser machen von anderen Formaten.

BMP vs GIF

GIF - Lossless / indexiert nur

GIF verwendet verlustfreie Komprimierung, was bedeutet, dass Sie das Bild immer und immer speichern und verlieren nie irgendwelche Daten. Die Dateigrößen sind viel kleiner als BMP, weil gute Kompression tatsächlich verwendet wird, aber es kann eine indizierte Palette nur speichern. Das bedeutet, dass nur maximal 256 verschiedene Farben in der Datei sein. Das klingt wie eine ganz kleine Menge, und es ist.

GIF-Bilder auch animiert und Transparenz werden kann.

Geeignet für: Logo, Strichzeichnungen und andere einfache Bilder, die zu klein sein müssen. Nur wirklich für Websites verwendet werden.

GIF vs JPEG

JPEG - Lossy / Direct

JPEGs Bilder wurden entwickelt, um detaillierte fotografische Bilder so klein wie möglich zu machen, indem sie Informationen zu entfernen, dass das menschliche Auge nicht bemerkt. Als Ergebnis ist es ein verlustbehaftetes Format, und speichern Sie die gleiche Datei immer und immer wieder in mehr Daten, die im Laufe der Zeit verloren führen. Es verfügt über eine Palette von Tausenden von Farben und so ist ideal für Fotos, aber die verlustbehaftete Kompression bedeutet es für Logos und Strichzeichnungen schlecht: Nicht nur werden sie aussehen unscharf, aber solche Bilder auch eine größere Datei-Größe im Vergleich zu GIFs haben!

Geeignet für: Fotografien. Auch Steigungen.

JPEG vs GIF

PNG-8 - Lossless / Indexed

PNG ist ein neues Format, und PNG-8 (die indizierte Version von PNG) ist wirklich ein guter Ersatz für GIF-Dateien. Leider aber hat es einige Nachteile: Erstens kann es nicht Animation wie GIF unterstützen kann (gut sie kann, aber nur scheint Firefox, sie zu unterstützen, im Gegensatz zu GIF-Animation, die von jedem Browser unterstützt wird). Zweitens hat es einige Unterstützung Fragen mit älteren Browsern wie IE6. Drittens hat wichtige Software wie Photoshop sehr schlechte Umsetzung des Formats. (Verdammt, Adobe!) PNG-8 nur 256 Farben speichern kann, wie GIFs.

Geeignet für:. Die Hauptsache, die PNG-8 funktioniert besser als GIF-Dateien wird mit Unterstützung für Alpha-Transparenz

PNG-8 vs GIF

Wichtiger Hinweis: Photoshop nicht unterstützt Alpha Transparenz für PNG-8-Dateien. (Verdammt, Photoshop!) Es gibt Möglichkeiten, Photoshop PNG-24 zu PNG-8-Dateien zu konvertieren, während ihre Transparenz beibehalten, though. Eine Methode ist, pngquant , eine andere ist Ihre Dateien mit Feuerwerk .

PNG-24 - Lossless / Direct

PNG-24 ist ein großes Format, das Lossless Codierung mit Direkt Farbe (Tausende von Farben, genau wie JPEG) kombiniert. Es ist sehr ähnlich wie BMP in dieser Hinsicht, außer dass PNG tatsächlich Bilder komprimiert, so kommt es zu vielen kleineren Dateien. Leider noch PNG-24-Dateien viel größer sein wird als JPEGs, GIFs und PNG-8s, so müssen Sie noch prüfen, ob Sie wirklich ein verwenden möchten.

Auch wenn PNG-24s Tausende von Farben ermöglichen, während Kompression aufweisen, sind sie nicht dazu gedacht, JPEG-Bilder zu ersetzen. Ein Foto gespeichert als PNG-24 wird wahrscheinlich mindestens 5-mal größer als das äquivalent JPEG-Bild mit sehr wenig Verbesserung in der sichtbaren Qualität sein. (Natürlich ist dies ein wünschenswertes Ergebnis sein, wenn Sie nicht besorgt sind über die Dateigröße und will die beste Bildqualität zu erhalten, Sie können.)

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

Ich hoffe, das hilft!

PNG sollte verwendet werden, wenn:

  • Sie brauchen Transparenz (entweder 1-Bit-oder Alpha-Transparenz)
  • Lossless Kompression wird gut funktionieren (wie für ein Diagramm oder ein Logo oder computergenerierte Bild)

JPEG sollte verwendet werden, wenn:

  • Lossless Kompression nicht gut funktionieren (wie ein Foto)
  • Vollfarbe ist erforderlich

GIF sollte, wenn:

  • PNG ist nicht verfügbar, wie zum Beispiel auf sehr alte Software oder Browser
  • Animation ist notwendig,

Trotz Mythen im Gegenteil, übertrifft PNG GIF in den meisten Aspekten. PNG ist in der Lage jeden Bildmodus von GIF abgesehen von Animation, und wenn der gleichen Bildmodus verwendet, wird PNG hat eine bessere Kompression aufgrund seines überlegenen DEFLATE Algorithmus im Vergleich zu LZW. PNG ist auch in der Lage zusätzlicher Modi, die GIF kann nicht, wie 24-Bit-Farbe tun, und Alpha-Transparenz, aber das ist, wo Sie Probleme auf dem Netz laufen. Alpha-Transparenz hat Kompatibilitätsprobleme mit IE6, die gut dokumentiert sind (obwohl Hacks existieren um zu bekommen).

PNG-Modi enthält (dies ist nur eine kleine Teilmenge)

  • Palette Farbe von 2 bis 256 Farben (wie GIF)
  • Palette Farbe von 2 bis 256 Farben, mit transparenter Farbe (wie GIF)
  • True Color (24 Bit Farbe)
  • True Farbe mit Alpha-Kanal (24 Bit Farb + 8 Bit Alpha-Transparenz)

Für eine optimale Komprimierung in PNG für das Web, verwenden Sie immer einen Palettenmodus. Wenn Sie PNG-Dateien sind größer als die äquivalenten GIF-Dateien, dann sind Sie die PNG in 24-Bit-Farbe und die GIF in Palette Sparmodus (weil ein GIF ist immer in Paletten-Modus). Versuchen Sie, Paletten-Modus Umwandlung zuerst.

Wenn Sie feststellen, dass Ihre PNG-Dateien mit Transparenz sind nicht richtig in IE6 arbeiten, während der GIF-Dateien sind, dann Sie verwenden 24-Bit-Farbe + Alpha-Transparenz in PNG und Paletten-Modus mit einer transparenten Farbe mit GIF. Sie müssen sicherstellen, dass Sie Ihre PNG in einen paletted Farbmodus mit einer transparenten Farbe umwandeln.

PNG hat auch andere Modi wie Farbpalette mit Alpha-Transparenz in der Palette. Modi wie dies kann nicht in Photoshop verwendet werden.

Versuchen Sie auf dieser Seite zu sehen http://www.killersites.com/articles_2005/theory/imagesInWebPages.jsp

Sie versuchen zu erklären, was zu verwenden, wenn

Wenn Sie speichern oder eine große Anzahl von Bildern der neuen Google WebP-Format präsentieren könnte eine Überlegung wert, da es 25% kleiner als PNG / JPG ist. Hinweis: Dies ist zur Zeit nicht von allen Browsern unterstützt. NB. Dies geschah im Jahr 2010, nachdem diese Frage gestellt wurde.

JPEG-Dateiformat

  1. Sehr Gut für Bilder, wenn Sie die Größe klein
    2. halten müssen
  2. Gute Option für Fotos
  3. Bad für Logos, Strichzeichnungen und weite Bereiche der flachen Farbe

GIF-Dateiformat

  1. Sehr Gut für animierte Effekte
  2. Nizza Option für Clip-Art, flache Grafiken und Bilder, die minimale Farben und präzise Linien
    3. verwenden
  3. Gute Wahl für einfache Logos mit Blöcken von Farben

Dateiformat PNG

  1. Lossless
  2. Ausgezeichnete Wahl, wenn Transparenz ist ein Muss
  3. Gute Wahl für Logos und Strichzeichnungen
  4. Nicht überall unterstützt

können Sie diese Infografiken finden Sie weitere detaillierte Informationen, Bild Dateitypen: Wann verwendet JPEG, GIF und PNG

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top