Website-Bildformate: Wählen Sie das richtige Format für die richtige Aufgabe
Bei der Gestaltung einer website, was ist für Sie die beste Bild-format zu verwenden für eine bestimmte Aufgabe?
Finde ich mich immer in ein dilemma, wenn Sie versuchen, um herauszufinden, welches format zu verwenden für eine bestimmte Aufgabe...wie zum Beispiel sollte ich verwenden .jpg alle Runde? oder Wann und warum sollte ich eine .png?
Etwa Amazon's website, die Sie verwenden .jpg für die Produkt-Bilder (Beispiel), .gif für diese transparente pixel (Beispiel) und .png für Ihre CSS-Sprites (Beispiel)
Auf der anderen Seite, Play.com verwenden .gif für Ihre website-logo (Beispiel), aber verwenden Sie .jpg für Ihre website Produkte (wie Amazonas) (Beispiel) und, soweit es Ihre Haupt-Seite geht, Sie dont haben irgendwelche .pngs auf.
Also welche Formate sollte ich für meine Webseiten? und warum sollte ich Sie benutzen?
[UPDATE]
Dank CruellO für dieser link für die Erklärung der Unterschiede, und auch Dustin für Gründe geben, auf was zu verwenden.
InformationsquelleAutor der Frage Andreas Grech | 2008-12-25
Du musst angemeldet sein, um einen Kommentar abzugeben.
JPEG sind für Fotos. Ich sehen Sie JPEGs mit text in Ihnen gelegentlich und Sie einfach nur schrecklich Aussehen. Text ist am besten für text, ansonsten verwenden Sie PNG.
Wenn es nicht ein Foto, aber Sie wollen eine Grafik, PNG. Ein PNG ist fast immer kleiner als die entsprechende gif-und nicht an Qualität verlieren, wie eine JPEG-Datei. Eine PNG-äquivalent einer JPEG-Datei wird in der Regel viel größer (vorausgesetzt, es ist eine fotorealistische). Es kann Zeiten geben, wo dies noch wünschenswert.
PNG erlaubt für 8-bit-Transparenz, aber wenn Sie haben, zu unterstützen, DH, Sie werden feststellen, dass Sie ständig verweigern, zu unterstützen, richtig. Sie tun Unterstützung eines einzelnen bit-Transparenz in 8-bit-Bild (im wesentlichen die gleichen wie gif), soweit ich weiß. Es gibt auch zahlreiche hacks zu bekommen 8-bit-Transparenz im IE funktioniert. Ich habe nie die Mühe gemacht, mich.
In der Zusammenfassung:
InformationsquelleAutor der Antwort Dustin
Sollten Sie sich bewusst sein, ein paar wichtige Faktoren...
Erste, es gibt zwei Arten der Komprimierung: Verlustfrei und Verlustbehaftete.
Lossless bedeutet, dass das Bild kleiner gemacht, aber ohne Nachteil für die Qualität. Verlustbehaftete bedeutet, das Bild wird (noch) kleiner, aber ein Nachteil für die Qualität. Wenn Sie ein Bild gespeichert wurde, in ein Verlustbehaftetes format, über und über, die Bildqualität bekommen würde schlimmer und schlimmer.
Gibt es auch verschiedene Farbtiefen (Paletten): Indizierte Farbe und Direct color.
Mit Indiziert es bedeutet, dass das Bild erst speichern eine begrenzte Anzahl von Farben (meist 256) gewählt werden, die von der Bild-Autor, mit Direkte es bedeutet, dass Sie viele Tausende von Farben, die nicht ausgewählt wurden, durch den Autor.
BMP - Lossless /Indexiert und Direkt
Dies ist ein altes format. Es ist Verlustfrei (es werden keine Bilddaten verloren gehen, auf speichern), aber es gibt auch wenig bis keine Komprimierung, was bedeutet, speichern als BMP führt zu SEHR großen Dateien. Es können Paletten sowohl Indiziert und Direkt, aber das ist ein kleiner Trost. Die Dateigrößen sind so unnötig groß, dass niemand jemals wirklich verwendet dieses format.
Gut für: eigentlich Nichts. Es gibt nichts, BMP übertrifft an, oder nicht besser durch andere Formate.
GIF - Lossless /Indiziert nur
GIF verwendet verlustfreie Komprimierung, was bedeutet, dass Sie können speichern Sie das Bild über und über und nie alle Daten verlieren. Die Dateigrößen sind wesentlich kleiner als BMP, da eine gute Kompression wird eigentlich verwendet, aber es kann nur speichern eine Indizierte Farbpalette. Dies bedeutet, dass es kann nur maximal 256 verschiedene Farben in der Datei. Das klingt wie eine ziemlich kleine Menge, und es ist.
GIF-Bilder können auch animiert werden und Transparenz.
Gut für: Logos, Zeichnungen und andere einfache Bilder, die müssen klein sein. Nur wirklich verwendet werden für Webseiten.
JPEG - Lossy /Direkte
JPEG-Bilder wurden entwickelt, um detaillierte fotografische Bilder so klein wie möglich durch das entfernen von Informationen, die das menschliche Auge nicht bemerkt wird. Als Ergebnis es ist ein Verlustbehaftetes format, und speichern Sie die gleiche Datei immer wieder wird dazu führen, dass mehr Daten verloren gehen, werden im Laufe der Zeit. Es hat eine palette Tausender Farben und so, ist toll für Fotos, aber die verlustbehaftete Komprimierung bedeutet, dass es schlecht für logos und Zeichnungen: Nicht nur, dass Sie verschwommen Aussehen, aber solche Bilder haben auch eine größere Datei-Größe im Vergleich zu GIFs!
Gut für: Fotografie. Auch Farbverläufe.
PNG-8 - Lossless /Indiziert
PNG ist ein neueres format und PNG-8 (die indizierte version von PNG) ist wirklich ein guter Ersatz für GIF-Dateien. Leider, jedoch, hat es ein paar Nachteile: Erstens, es kann keine Unterstützung für Animationen wie GIF (gut es kann, aber nur mit Firefox scheint es, im Gegensatz zu GIF-animation, die von jedem browser unterstützt wird). Zweitens hat es einige Problemen mit älteren Browsern wie IE6. Drittens, wichtige software wie Photoshop haben sehr schlechte Umsetzung des formats. (Verdammt, Adobe!) PNG-8 kann nur speichern 256 Farben, wie GIFs.
Gut für: Die Hauptsache ist, dass PNG-8 funktioniert besser als GIFs mit Unterstützung für Alpha-Transparenz.
Wichtiger Hinweis: Photoshop unterstützt keine Alpha-Transparenz bei PNG-8-Dateien. (Verdammt, Photoshop!) Es gibt Möglichkeiten zum konvertieren von Photoshop-PNG-24, PNG-8-Dateien unter Beibehaltung Ihrer Transparenz, obwohl. Eine Methode ist PNGQuant, eine andere ist es, Sie speichern Ihre Dateien mit Feuerwerk.
PNG-24 - Lossless /Direct
PNG-24 ist ein tolles format, das Verlustfreie Codierung mit Direkten Farben (Tausende von Farben, genau wie JPEG). Es ist sehr viel wie BMP, in dieser Hinsicht, außer, dass PNG-eigentlich komprimieren der Bilder, so dass es Ergebnisse in viel kleinere Dateien. Leider ist PNG-24-Dateien werden immer noch viel größer als JPEG -, GIF-und PNG-8, so müssen Sie noch beachten, wenn Sie wirklich wollen, um es zu nutzen.
Obwohl PNG-24s erlauben, Tausende von Farben während der Komprimierung werden Sie nicht ersetzen JPEG-Bilder. Ein Foto gespeichert als PNG-24 wird wahrscheinlich mindestens 5 mal größer als entsprechende JPEG-Bild, mit sehr wenig Verbesserung in der Qualität sichtbar. (Natürlich kann dies ein wünschenswertes Ergebnis, wenn Sie nicht besorgt über die Dateigröße, und Sie möchten Holen Sie die beste Bildqualität Sie können.)
Genau wie bei PNG-8, PNG-24 unterstützt alpha-Transparenz, auch.
Ich hoffe, das hilft!
InformationsquelleAutor der Antwort Chuck Le Butt
PNG sollte verwendet werden, wenn:
JPEG sollte verwendet werden, wenn:
GIF sein sollten, wenn:
Trotz Mythen im Gegenteil, PNG besser als GIF in den meisten Aspekten. PNG ist in der Lage jeden Bild Modus des GIF-abgesehen von der animation, und wenn mit dem gleichen Bild-Modus, PNG besser komprimiert aufgrund seiner überlegenen DEFLATE-Algorithmus im Vergleich zu LZW. PNG ist auch in der Lage, zusätzliche Modi, die GIF nicht, wie 24-bit-Farbe und alpha-Transparenz, aber dies ist, wo können Sie Probleme im web. Alpha-Transparenz hat Kompatibilitäts-Probleme mit IE6, sind gut dokumentiert (obwohl hacks existieren, zu umgehen).
PNG-Modi beinhalten (dies ist nur eine kleine Teilmenge)
Für die beste Komprimierung, in PNG für das web, verwenden Sie immer eine palette-Modus. Wenn Sie feststellen, PNG-Dateien, die größer sind als die entsprechenden GIF-Dateien, dann sind Sie sparen die PNG-Datei in 24 bit-Farbe und die GIF-palette-Modus (weil ein GIF ist immer in palette-Modus). Versuchen Sie Umstellung auf palette-Modus erste.
Wenn Sie feststellen, dass Ihre PNG-Dateien mit Transparenz nicht richtig funktioniert in IE6, während Sie Ihre GIF-Dateien sind, dann sind Sie mit 24-bit Farben + Alphatransparenz in PNG-und palette-Modus mit eine transparente Farbe bei GIF. Stellen Sie sicher, dass Sie konvertieren Sie Ihre PNG in ein Paletten-Farbmodus mit einer transparenten Farbe.
PNG hat auch andere Modi wie-palette Farbe mit alpha-Transparenz in der palette. Modi wie " das kann nicht sein verwendet in Photoshop.
InformationsquelleAutor der Antwort thomasrutter
Versuchen Sie dies zu betrachten Seite
http://www.killersites.com/articles_2005/theory/imagesInWebPages.jsp
Versuchen Sie zu erklären, was zu verwenden, wenn
InformationsquelleAutor der Antwort CruelIO
Wenn Sie die Speicherung oder die Präsentation einer großen Anzahl von Bildern, die neue Google-format WebP überlegung Wert, wie es ist 25% kleiner als PNG/JPG.
Hinweis: dies wird nicht von allen Browsern unterstützt im moment.
NB. Dies kam im Jahr 2010, nachdem diese Frage gepostet wurde.
InformationsquelleAutor der Antwort JohnnyBizzle
JPEG-DATEI-FORMAT
GIF-DATEI-FORMAT
PNG-DATEI-FORMAT
Sehen Sie diese Infografik für mehr detaillierte Informationen Image-Datei-Typen: JPEG -, GIF - & PNG
InformationsquelleAutor der Antwort Luzan Baral