Welche Webgrafikformate sollen verwendet werden?

Websites können Grafiken im JPEG-, GIF-, PNG- und SVG-Format enthalten. Welche sollten wann verwendet werden?

Wann benutzt man JPG?

• fotografische Bilder
• wenn die Komprimierung keine Rolle spielt

Wann ist PNG anzuwenden?

• wenn Sie Transparenz brauchen
• wenn du gemustert hast (Hintergründe)

Wann benutzt man GIF?

• wenn Sie eine abwärtskompatible Animation benötigen *
• wenn ein Bild hauptsächlich aus nur einer Handvoll Farben besteht (2-16) **
• wenn Sie keine Transparenz benötigen und Muster haben (obwohl PNG bevorzugt wird)

_{* Mit dem Aufkommen der CSS-Animation als praktikable Option für fast alle Browser ist die Verwendung des GIF-Formats immer weniger das Standardformat für Webanimationen. .jpg,, .pngund .gifkönnen alle so eingestellt werden, dass sie mithilfe von CSS eine "animierte" Funktion haben. Obwohl animierte Gifs kann im Web - Design in bestimmten Case - Szenarien attraktiv verwendet wird, sind Ausnahmen selten, so ist es am besten zu sein , neigt dazu, nur um sie zu vermeiden.}

_{** ( .gifBilder sind in ihrer Palette auf nur 256 Farben beschränkt.)}

(migriert von doppelter Frage)

Dies hängt völlig von der Art des Bildes ab, das Sie speichern möchten.

• PNG ist ein verlustfreies Komprimierungsformat, das sich am besten für "vektorähnliche" Bitmap-Grafiken eignet (dh Grafiken mit großen, regelmäßigen Bereichen mit derselben Farbe und klar definierten Kanten; Grafiken mit Klartext).

• SVG ist ein Vektorformat , das sich am besten für Vektorgrafiken eignet (kurz gesagt, Sammlungen von geometrischen Elementen anstelle von Sammlungen von Pixeln). SVG ist unbegrenzt skalierbar, während Bitmap-Grafiken beim Vergrößern an Qualität verlieren.

• JPG ist ein verlustbehaftetes Komprimierungsformat (es entfernt unter anderem Nuancen im Bild, die für das menschliche Auge unsichtbar sind, um Speicherplatz zu sparen). Es ist am besten für Fotos geeignet; Aufgrund seiner Komprimierungsmethode eignet es sich nicht gut für Vektorgrafiken oder Text.

Browser-Kompatibilität:

• PNG-Grafiken werden in allen Browsern unterstützt, mit Ausnahme von IE 6, wenn das PNG Alphatransparenz enthält (die transparenten Bereiche werden durchgehend grau dargestellt), und allen Versionen von IE, wenn sich das PNG in einem HTML-Element mit einer Opazität von weniger als 100 befindet % (aber das ist ein Randfall).

• SVG ist noch nicht immer eine Option, da die Browserunterstützung momentan nicht 100% ist . Es kann auch andere Verhaltensunterschiede zu einem normalen <img>Tag geben. Verwenden Sie dies nur, wenn Sie wissen, was Sie tun.

• Standard-JPG wird in allen Browsern unterstützt, sofern es im RGB-Modus und nicht im CMYK-Modus gespeichert ist (wenn Ihr Programm die Unterscheidung nicht vornimmt, ist dies wahrscheinlich die Standardeinstellung).

Sie sollten sich einiger Schlüsselfaktoren bewusst sein ...

Erstens gibt es zwei Arten der Komprimierung: Verlustfrei und Verlustbehaftet .

• Verlustfrei bedeutet, dass das Bild verkleinert wird, ohne die Qualität zu beeinträchtigen.
• Verlustbehaftet bedeutet, dass das Bild (noch) kleiner wird, was sich jedoch nachteilig auf die Qualität auswirkt. Wenn Sie ein Bild immer wieder in einem Lossy-Format speichern, wird die Bildqualität immer schlechter.

Es gibt auch verschiedene Farbtiefen (Paletten): Indizierte Farbe und Direkte Farbe .

• Indiziert bedeutet, dass das Bild nur eine begrenzte Anzahl von Farben (normalerweise 256), die vom Autor gesteuert werden, in einer sogenannten Farbkarte speichern kann
• Direkt bedeutet, dass Sie viele tausend Farben speichern können , die vom Autor nicht direkt ausgewählt wurden

BMP - Verlustfrei / Indiziert und Direkt

Dies ist ein altes Format. Es ist verlustfrei (beim Speichern gehen keine Bilddaten verloren), aber es gibt auch kaum bis gar keine Komprimierung, was bedeutet, dass das Speichern von BMP zu SEHR großen Dateien führt. Es kann sowohl indizierte als auch direkte Paletten geben, aber das ist ein kleiner Trost. Die Dateigrößen sind so unnötig groß, dass niemand dieses Format wirklich verwendet.

Gut für: Nichts wirklich. Es gibt nichts, was BMP auszeichnet, oder was von anderen Formaten nicht besser gemacht wird.

GIF - Nur verlustfrei / indiziert

GIF verwendet verlustfreie Komprimierung, dh Sie können das Bild immer und immer wieder speichern, ohne Daten zu verlieren. Die Dateigrößen sind viel kleiner als bei BMP, da tatsächlich eine gute Komprimierung verwendet wird, aber nur eine indizierte Palette gespeichert werden kann. Dies bedeutet, dass die Datei in den meisten Anwendungsfällen maximal 256 verschiedene Farben enthalten kann. Das klingt nach einer kleinen Menge, und das ist es auch.

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

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

JPEG - Verlust / Direkt

JPEG-Bilder wurden entwickelt, um detaillierte fotografische Bilder so klein wie möglich zu halten, indem Informationen entfernt werden, die das menschliche Auge nicht bemerkt. Infolgedessen handelt es sich um ein Lossy-Format, und das wiederholte Speichern derselben Datei führt dazu, dass im Laufe der Zeit mehr Daten verloren gehen. Es hat eine Farbpalette von Tausenden von Farben und eignet sich daher hervorragend für Fotos. Die verlustbehaftete Komprimierung wirkt sich jedoch schlecht auf Logos und Strichzeichnungen aus: Sie sehen nicht nur unscharf aus, sondern haben auch eine größere Dateigröße als GIFs!

Geeignet für: Fotografien. Auch Farbverläufe.

PNG-8 - Verlustfrei / Indiziert

PNG ist ein neueres Format und PNG-8 (die indizierte Version von PNG) ist wirklich ein guter Ersatz für GIFs. Leider hat es ein paar Nachteile: Erstens kann es keine Animationen wie GIF unterstützen. Zweitens gibt es einige Support-Probleme mit älteren Browsern wie IE6. Drittens haben wichtige Software wie Photoshop eine sehr schlechte Implementierung des Formats. (Verdammt, Adobe!) PNG-8 kann wie GIFs nur 256 Farben speichern.

Gut für: Das Wichtigste, was PNG-8 besser kann als GIFs, ist die Unterstützung von Alpha Transparency.

Wichtiger Hinweis: Photoshop hat in den neuesten Versionen endlich Unterstützung für Alpha-Transparenz hinzugefügt. Wenn Sie eine ältere Version haben, können Sie Photoshop PNG-24 in PNG-8-Dateien konvertieren, ohne die Transparenz zu beeinträchtigen. Eine Methode ist PNGQuant , eine andere Methode ist das Speichern Ihrer Dateien mit Fireworks .

PNG-24 - Verlustfrei / Direkt

PNG-24 ist ein großartiges Format, das verlustfreie Codierung mit direkter Farbe kombiniert (Tausende von Farben, genau wie JPEG). In dieser Hinsicht ist es BMP sehr ähnlich, mit der Ausnahme, dass PNG tatsächlich Bilder komprimiert, was zu 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 wirklich eine verwenden möchten.

Obwohl PNG-24 bei Komprimierung Tausende von Farben zulassen, sind sie nicht dazu gedacht, JPEG-Bilder zu ersetzen. Ein als PNG-24 gespeichertes Foto ist wahrscheinlich mindestens fünfmal so groß wie ein entsprechendes JPEG-Bild, wobei die sichtbare Qualität nur geringfügig verbessert wird. (Dies kann natürlich ein wünschenswertes Ergebnis sein, wenn Sie sich keine Gedanken über die Dateigröße machen und die bestmögliche Bildqualität erzielen möchten.)

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

SVG - Verlustfrei / Vektor

Ein Dateityp, der derzeit immer beliebter wird, ist SVG, das sich von allen oben genannten insofern unterscheidet, als es sich um ein Vektordateiformat handelt (alle oben genannten sind Raster ). Dies bedeutet, dass es tatsächlich aus Linien und Kurven anstelle von Pixeln besteht. Wenn Sie ein Vektorbild vergrößern, sehen Sie immer noch eine Kurve oder eine Linie. Wenn Sie ein Rasterbild vergrößern, werden Pixel angezeigt.

Zum Beispiel:

Dies bedeutet, dass SVG perfekt für Logos und Symbole geeignet ist, die auf Retina-Bildschirmen oder in verschiedenen Größen scharf bleiben sollen.

Darüber hinaus werden SVG-Dateien mit XML geschrieben und können so in einem Texteditor geöffnet und bearbeitet werden, sodass sie bei Bedarf im Handumdrehen bearbeitet werden können. Sie können beispielsweise JavaScript verwenden, um die Farbe eines SVG-Symbols auf einer Website so zu ändern, als würden Sie Text verwenden (dh Sie benötigen kein zweites Bild).

Ich hoffe das hilft!

JPG:

Vorteile:

• Viele verschiedene Komprimierungsstufen verfügbar
• Einfach mit allen Bildbearbeitungsprogrammen zu bearbeiten

Unbequemlichkeiten:

• Kompressionsartefakte

Verwendet :

• Große Fotos oder Bilder mit vielen Farben
• Wenn eine hohe Komprimierung erforderlich ist

PNG:

Vorteile:

• Transparenz mit alpha!
• Viele farben
• Kann jpg ersetzen

Unbequemlichkeiten:

• Weniger Komprimierung als JPG (aber nicht so viel)
• Inkompatibel mit IE6 (und 7 glaube ich) - muss Patch oder Hack dafür verwenden. Aber wen interessiert es? A muss verwenden;)

Verwendet :

• Kleine oder mittlere Fotos / Bilder mit viel Farbe
• Ein Muss, wenn Sie Farbverlaufstransparenz wünschen
• Icons
• Logos

GIF:

Vorteile:

• Kann animiert werden
• Sehr leicht, wenn Sie nur einige Farben verwenden (wie 8 - 16 oder 32 verschiedene Farben)
• Transparenz

Unbequemlichkeiten:

• Kann nicht mehr als 255 Farben haben.
• Animiertes GIF kann Menschen zur Flucht bringen
• Kein Alpha für Transparenz (transparent oder nicht!)

Verwendet :

• Animiertes GIF (ich benutze sie hauptsächlich in Newslettern)
• Icons
• Animiertes Favicon \ o /
• Logos

Websites können Grafiken im JPEG-, GIF-, PNG- und SVG-Format enthalten. Welche sollten wann verwendet werden?

Für Fotos:

JPEG, wenn keine Transparenz erforderlich ist. PNG für Fotografiken, die Transparenz benötigen.

Es ist zwar nicht 100% wahr, aber eine gute Faustregel. Lesen Sie die anderen Antworten auf diese Frage, um mehr über die anderen Formate zu erfahren. Überprüfen Sie auch, welches Rasterbildformat besser für die digitale Anzeige von Bildern geeignet ist, wenn keine Transparenz vorliegt. JPEG oder PNG? und eine Auswahl unserer Dateiformat- Tags wie JPEG , PNG , GIF und SVG , um mehr zu erfahren.

Für Grafiken:

SVG mit PNG / JPEG-Fallback.

Es gibt absolut keinen Grund, SVGs in der heutigen Zeit nicht bereitzustellen. Sie werden fast genauso wie jedes normale Bild implementiert und sind viel vielseitiger.

Daher wurde der Workflow für jeden modernen Website-Designer nicht vollständig geändert, sondern aktualisiert. Sie bereiten weiterhin PNGs und JPEGs für Grafiken vor und stellen sie bereit. Dies ist jedoch nur dann ein Fallback, wenn SVG nicht funktioniert.

Was ist eine SVG?

SVG steht für Scalable Vector Graphic. Ohne zu technisch zu werden, besteht der Unterschied zwischen SVGs und anderen pixelbasierten Formaten darin, dass die Daten für die Zusammensetzung der Grafik als mathematische Berechnungen gespeichert werden. Wenn ein Browser eine SVG öffnet, muss er Berechnungen durchführen, um die SVG zu rendern. Ältere Browser verfügen nicht über die Funktionalität, um diese Berechnungen durchzuführen oder SVGs zu verarbeiten. Darüber hinaus hatten ältere Computer möglicherweise Probleme, eine SVG-schwere Webseite zu rendern, selbst wenn sie vor 10 Jahren verwendet worden wären (was sie nicht konnten). Die Daten für eine SVG werden im Hexadezimalformat (Basis 16) gespeichert, sodass sie im Vergleich zur binären Speicherung von Pixeldaten auf sehr kleine Dateigrößen optimiert werden können.

Im Folgenden finden Sie einige Ressourcen, um mehr darüber zu erfahren, wie Sie die Fallback-Technik erreichen:

1. Beherrschung der SVG-Nutzung für ein Retina-Web, Fallbacks mit PNG-Skript

2. Überarbeitung des SVG-Workflows für Leistung und fortschrittliche Entwicklung mit transparenten Daten-URIs

3. CSS Tricks - SVG Fallbacks

Das folgende JavaScript-Snippet, das vom ersten Link kopiert wurde, ist alles, was Sie benötigen, um die SVG-Unterstützung in den meisten, wenn nicht allen Browsern zu erkennen und den Dateinamen zu ändern, um PNG-Fallbacks bereitzustellen.

function supportsSVG() {
    return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}
if (!supportsSVG()) {
    var imgs = document.getElementsByTagName('img');
    var dotSVG = /.*\.svg$/;
    for (var i = 0; i != imgs.length; ++i) {
        if(imgs[i].src.match(dotSVG)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

<DA01>

Wann wird SVG verwendet?

• Wann immer Sie können, da dies in der Regel die kleinste Dateigröße und Auflösung ist, kann es jedes Pixelverhältnis des Geräts verarbeiten (z. B. Retina-Bildschirme).
• Wenn Ihre Grafik für Vektordateiformate geeignet ist (insbesondere Symbole)
• Wenn Sie den Luxus haben, nur moderne Browser ansprechen zu müssen (SVG-Unterstützung ist für einige Browser relativ neu)

Wann werden Symbolschriften verwendet?

• Wenn Sie eine umfangreiche Reihe von Symbolen benötigen
• Wenn Sie wie bei SVG die Vorteile von Vektordateiformaten nutzen möchten
• Wenn Sie den Luxus haben, nur moderne Browser anzusprechen (die Unterstützung von Web-Schriftarten ist für einige Browser relativ neu)

</DA01>

Warum ist SVG die beste Option?

• Skaliere aus einer Datei wunderbar auf jede Größe (es ist nicht erforderlich, @2x.jpgfür Retina-Bildschirme zu dienen oder die Grafik zu dehnen)

• Sehr oft kleinere Dateigrößen als JPEG und PNG

• Das Logo muss fast nie auf Qualität verzichten

• Erleichtert das reaktionsschnelle Design in vielerlei Hinsicht

Anmerkungen

• Inline-SVGs werden seltener unterstützt. Aus Sicherheitsgründen ist es daher derzeit am besten, über Image-Tags eine Verknüpfung zu den Dateien herzustellen. (Wenn Sie die Grafik an einer anderen Stelle wiederverwenden möchten, z. B. bei Navigationssymbolen, möchten Sie sie trotzdem extern verknüpfen, damit der Browser sie zwischenspeichert und Zeit beim Laden anderer Seiten spart.)

• IE unterstützt SVGZdas für SVG-Grafiken verfügbare komprimierte Format nicht. Um die größtmögliche Kompatibilität zwischen Browsern und früheren Versionen zu gewährleisten, empfiehlt es sich, diese SVG 1.0zu diesem Zeitpunkt zu verwenden.

• Sie können mit SVG weiterhin Sprite-Sheets erstellen, ähnlich wie mit anderen Bildformaten. Verwenden Sie jedoch prozentbasierte Werte, anstatt tatsächliche Pixelwerte zum Definieren der x- und y-Koordinaten der einzelnen Bilder zu verwenden.

  Was ist mit den Fällen, in denen Prozentwerte nicht genau genug sind?

  Sie sollten das Sprite-Sheet mit dem Ziel erstellen, sowohl die Breite als auch die Höhe durch 100 teilen zu können und ganze Zahlen oder Zahlen mit höchstens 1 Dezimalstelle zu erhalten. Wenn Sie beispielsweise 7 x 10px x 10pxSymbole in einem Sprite-Arbeitsblatt anordnen , erstellen Sie keine Leinwand 70px x 10px.

  Warum? Denn wenn Sie 100 durch 7 dividieren, erhalten Sie 14.285714285714285714285714285714, was als gerundeter Prozentsatz definitiv irgendwo eine unvollkommene Mathematik verursachen würde.

  Erstellen Sie stattdessen eine 80px x 10pxZeichenfläche und sorgen Sie sich nicht um die leeren 12,5%. Die Symbole werden in Schritten von genau 12,5% angezeigt, was natürlich einfacher zu handhaben ist.

Sie sollten .jpeg für Fotos oder Bilder mit vielen Farben verwenden. Der Dateityp .gif ist nützlich für animierte Bilder oder wenn Transparenz erforderlich ist, die Verwendung jedoch abnimmt. Das beliebteste Format ist .png, das auch Alphatransparenz und eine größere Farbpalette bietet als der Dateityp .gif. Eine detailliertere Übersicht finden Sie in Jonathan Snooks Artikel " Which Image Format Is Best" .

Eine schöne Formel könnte sein, JPEG für Fotos und PNG für alles andere zu verwenden.

Natürlich, wenn Sie Grafiken haben, die keine Alphatransparenz benötigen und weniger als 256 Farben haben, spart Ihnen GIF möglicherweise etwas Bandbreite, aber es ist definitiv auf dem Weg nach draußen.

Ich benutze PNG für so ziemlich alles, da es nicht die Kompressionsartefakte hat, die JEPG hat, und es ist heutzutage nahezu universell kompatibel (ich habe ein paar Seiteneditoren gesehen, die es nicht gut finden, wie zum Beispiel die Desktop-Version der SiteBuilder-Software von Homestead, aber das war's).

Sie sollten Ihr Bild in der Basis mit der gewünschten Komprimierungs- / Qualitätsstufe auswählen.

Im Web dreht sich alles um die Geschwindigkeit beim Herunterladen von Informationen. Weniger um die Größe eines Bildes, besser um die Geschwindigkeit beim Laden einer Seite.

JPG : Für Bilder mit Millionen von Farben (Fotografie)

PNG und GIF : Für Transparenz und wenige Farben. Ich benutze es nur unter 64/128 verschiedenen Farben, aber im Allgemeinen unter 256. (Symbole, Vektorgrafiken, die gerastert werden müssen, kontrastreiche Farben, Farbverläufe mit wenigen Farben)

Wie wähle ich zwischen PNG und GIF?

Überprüfen Sie zunächst die Komprimierungs- / Qualitätsoptimierung und wählen Sie aus, wer Ihnen ein besseres Ergebnis bei geringerem Gewicht liefert. Ich verwende immer noch weitgehend GIF und es ist manchmal besser als PNG für die gleiche Art von Bildern. Unterscheiden Sie nicht ein Format für ein anderes, sondern wählen Sie einfach das Format aus, das für Ihre Optimierung besser geeignet ist.

• Wählen Sie GIF: für animierte Bilder mit nicht mehr als 256 Farben
• Wenn Sie keine Animation benötigen, können Sie das PNG auswählen. Wähle das richtige PNG: Es gibt 2 Arten 8bit und 24bit. 8bit ist in der Regel eine bessere Version des GIF ohne Animation für Qualität / Komprimierung (aber wie gesagt, nicht immer, probieren Sie es aus, wenn Sie für das Web speichern). 24bit hat keine Komprimierung (verwenden Sie es also kaum für einen speziellen Grafikeffekt) und verfügt über das Alpha-Level für die Verwendung von Farbtransparenz (alte IE-Browser unterstützen dies nicht, wenn Sie keinen speziellen Filter oder .htc-Verhalten auf die Seite anwenden ).

Ich kann aus verschiedenen Artikeln ersehen , dass 90% der Webdesigner immer noch der Meinung sind, dass PNG nur ein verlustfreies Format ist . Viele Fachleute wissen nicht einmal über die Existenz von PNG-8 Bescheid.

Aber offensichtlich sollte PNG-8 anstelle von PNG-32 für das Web verwendet werden. Weil es 2x-5x kleinere Dateigrößen mit akzeptabler Qualität bietet.

Manchmal ist es schwierig zu entscheiden, welche Komprimierung für ein Bild besser ist. Zum Beispiel, wenn es kein Foto ist, aber viele Farben und Verläufe hat. Mit diesem Tool können Sie beide verlustbehafteten Formate visuell vergleichen und die beste Variante auswählen.

Hier ist ein nützliches Tool, um verlustbehaftete PNG- und JPEG-Formate zu vergleichen: PNG vs JPEG

Die wichtigsten Webgrafikformate sind GIF, JPG und PNG. Es ist wichtig, die Unterschiede zu kennen und das beste Format für jedes Bild zu wählen, damit die Bilder gut aussehen und so kompakt wie möglich sind, damit sie schnell auf dem Bildschirm Ihres Website-Besuchers angezeigt werden.

GIF - Grafikinformationsformat

Das GIF-Grafikformat eignet sich am besten für Bilder mit nur wenigen Farben: Diagramme, Grafiken oder Text, die als Grafiken festgelegt sind. Je weniger Farben Sie verwenden, desto effizienter sind GIF-Dateien. GIF-Dateien ...

• kann bis zu 256 Farben enthalten.

• Unterstützung einer Funktion namens Transparenz, bei der eine der 256 Farben als transparent festgelegt ist. Dies verhindert, dass Ihre Grafiken aussehen, als wären sie in einem Kästchen, da der Hintergrund der Datei unsichtbar ist und der Hintergrund der Webseite sichtbar wird.

• kann animiert werden. In einer einzelnen Datei sind viele Bilderrahmen und ein Index gespeichert, der angibt, wie lange jeder Rahmen angezeigt werden soll. Animiertes GIF wird als Standard-Image-Datei behandelt, sodass es mit dem Standard-Tag geladen wird.

• sind verlustfrei, was bedeutet, dass die Bildqualität durch den Komprimierungsprozess nicht beeinträchtigt wird.

• können interlaced werden, so dass sie beim Laden von niedrigerer zu höherer Qualität eingeblendet werden. Dies gibt Ihren Besuchern etwas zu sehen, während sie warten.

• sind nicht gut für Fotos - Sie verlieren an Qualität und die Dateien werden nicht kompakt. Verwenden Sie das JPG-Grafikformat für Fotos.

JPG - Joint Photographic Experts Group

Das JPG-Grafikformat eignet sich am besten für Bilder mit vielen Farben, z. B. Fotos oder gescannte Grafiken. JPG-Dateien ...

• kann bis zu 16 Millionen Farben enthalten.

• Unterstützung variabler Komprimierung. Sie können jedes einzelne Bild mehr oder weniger komprimieren. Je mehr Komprimierung Sie anwenden, desto mehr Qualität verlieren Sie. Zwar können mit diesem Grafikformat Dateigrößen relativ klein gestaltet werden, doch müssen Sie häufig Kompromisse zwischen Dateigröße und Bildqualität eingehen. Mit neuerer Grafiksoftware erhalten Sie vor dem Speichern eine Vorschau. Auf diese Weise können Sie mit verschiedenen Komprimierungsstufen experimentieren, um den besten Kompromiss zwischen Qualität und Dateigröße zu finden.

• Es gibt drei Arten: Baseline oder Standard, Baseline optimiert oder Standard optimiert und progressiv. Baseline wurde für Browser entwickelt, die wir heutzutage für veraltet halten (z. B. Internet Explorer Version 1). Die optimierte Baseline bietet mehr Komprimierung als die Standard-Baseline, und praktisch jeder Browser kann heute ein solches Bild lesen. Während des Herunterladens wird eine progressive JPG-Datei wie eine Interlaced-GIF-Datei erstellt, die von einer groben Darstellung des Bildes bis zum fertigen Aussehen reicht. Dies ist zwar ein schönes Webgrafikformat, ältere Browser unterstützen dieses Format jedoch nicht alle.

• eignen sich nicht für Bilder mit nur wenigen Farben, z. B. als Grafiken festgelegte Texte oder Bilder mit Bereichen mit flachen Farben. Wenn Sie JPG für diese Grafiken verwenden, sind sie größer als erforderlich und sehen "fleckig" aus.

PNG - Progressive Network Graphics

PNG ist das neueste Webgrafikformat. PNG-Dateien ...

• werden von allen modernen Browsern unterstützt. Diese Dateien werden in älteren Browsern möglicherweise nicht angezeigt. Daher kann die Verwendung dieses Grafikformats dazu führen, dass einige Ihrer Website-Besucher Ihre Bilder nicht sehen können.

• sind kompakt und vielseitig und können die besten Eigenschaften von GIF und JPG kombinieren, z. B. die Fähigkeit, transparente Hintergründe zu haben, oder die Fähigkeit, Bilder mit Millionen von Farben aufzunehmen.

• sind immer noch nicht weit verbreitet, vor allem, weil sie von älteren Browsern nicht unterstützt werden.

Wann welche verwenden?

Durch die Auswahl des richtigen Webgrafikformats können Sie sicherstellen, dass Ihre Bilder gut aussehen und schnell auf dem Computer Ihres Besuchers angezeigt werden. Wenn Sie das falsche Format auswählen, sehen Ihre Bilder schlecht aus und es dauert ewig, bis sie heruntergeladen werden.

Der häufigste Grafikfehler im Web ist die Verwendung des falschen Grafikformats für die Bilder. Aber die Wahl ist wirklich ganz einfach ...

• Wenn Ihre Grafiken viele Farben enthalten (z. B. ein Foto), wählen Sie JPG.

• Wenn Ihre Grafiken nur wenige Farben haben, wählen Sie GIF. Verwenden Sie bei Verwendung von GIF optimierte Paletten, die nur die verwendeten Farben enthalten. Sie können die Dateigröße halbieren.

In einer idealen Welt käme es darauf an:

JPEG - Für Rasterbilder und Fotos

PNG - Für Vektorgrafiken (z. B. Logos usw.)

Leider unterstützt Internet Explorer 6 (leider immer noch eine große Anzahl von Benutzern) keine Transparenz in PNG-Bildern. Wenn Ihr PNG Transparenz enthält, kann dies zu Problemen führen. Glücklicherweise gibt es einen Hack, mit dem dieses Problem umgangen werden kann, allerdings nicht auf elegante Weise:

http://24ways.org/2007/supersleight-transparent-png-in-ie6 http://www.alistapart.com/articles/pngopacity/

(EDIT: Ich denke auch, dass auch IE 7 Probleme mit einigen Funktionen von PNGs hat.)

GIFs haben nur zwei Vorteile gegenüber PNG:

1. (Fast) perfekte Browserunterstützung (obwohl keine Transparenz, das ist also kein großer Bonus)
2. Sie können animiert sein, animierte Grafiken sollten jedoch im Webdesign sparsam eingesetzt werden.

BEARBEITEN: PNG ist GIF immer vorzuziehen, wenn es unterstützt und verwendbar ist, da PNG ein offenes Format ist.

Wie am häufigsten erwähnt, eignet sich JPEG für die Fotografie und PNG für Grafiken mit Texten und Grafiken. GIF hat den einzigen Vorteil, dass es Animationen unterstützt, die sehr vorsichtig verwendet werden sollten.

Ein guter Tipp ist, Ihr Bild als JPEG und PNG zu exportieren. Fast immer führt das Format, das für Ihre Grafik besser ist, zu einer kleineren Datei. Fotos werden kleiner als JPEG und Grafiken kleiner als PNGs. Wenn Sie sich nicht sicher sind, welche Sie wählen sollen, kann dies eine gute Entscheidung sein.