Welche Webgrafikformate sollen verwendet werden?

Wann sollten Sie JPG verwenden?

• fotografische Bildsprache
• wenn Kompression keine Rolle spielt

Wann sollten Sie PNG verwenden

• wenn Sie Transparenz brauchen
• wenn Sie Muster haben (Hintergründe)

Wann man GIF verwendet

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

_{* Mit dem Aufstieg der CSS-Animation als praktikable Option für fast alle Browser ist die Verwendung des .GIF-Formats immer weniger das bevorzugte Format für Webanimationen. .jpg, .png, und .gifkönnen alle so eingestellt werden, dass sie mit CSS eine "animierte" Funktion haben. Obwohl animierte Gifs in bestimmten Anwendungsszenarien attraktiv im Webdesign verwendet werden können, sind Ausnahmen selten, daher ist es in der Regel am besten, sie einfach zu vermeiden .}

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

(aus doppelter Frage migriert)

Dies hängt ganz 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, Ansammlungen geometrischer Elemente anstelle von Ansammlungen von Pixeln). SVG ist unbegrenzt skalierbar, während Bitmap-Grafiken beim Vergrößern an Qualität verlieren.

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

Browser-Kompatibilität:

• PNG-Grafiken werden von allen Browsern unterstützt, mit Ausnahme von IE 6, wenn das PNG Alpha-Transparenz enthält (die transparenten Teile werden als durchgehendes Grau dargestellt), und alle Versionen von IE , wenn sich das PNG in einem HTML-Element mit einer Deckkraft von weniger als 100 befindet % (aber das ist ein Grenzfall).

• SVG ist noch nicht immer eine Option, da die Browserunterstützung derzeit nicht 100%ig 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 von allen Browsern unterstützt, solange es im RGB-Modus und nicht im CMYK-Modus gespeichert wird (wenn Ihr Programm die Unterscheidung nicht trifft, ist es wahrscheinlich die Standardeinstellung).

Sie sollten sich einiger wichtiger Faktoren bewusst sein...

Erstens gibt es zwei Arten der Komprimierung: Lossless und Lossy .

• Verlustfrei bedeutet, dass das Bild verkleinert wird, jedoch ohne Qualitätseinbußen.
• Verlustbehaftet bedeutet, dass das Bild (noch) kleiner gemacht wird, was jedoch zu Lasten der Qualität geht. Wenn Sie ein Bild immer wieder in einem verlustbehafteten 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) speichern kann, die vom Autor in einer sogenannten Farbkarte gesteuert werden
• Direkt bedeutet, dass Sie viele tausend Farben speichern können , die nicht direkt vom Autor ausgewählt wurden

BMP – verlustfrei / indiziert und direkt

Dies ist ein altes Format. Es ist verlustfrei (keine Bilddaten gehen beim Speichern verloren), aber es gibt auch wenig bis gar keine Komprimierung, was bedeutet, dass das Speichern als BMP zu SEHR großen Dateigrößen führt. Es kann sowohl indexierte als auch direkte Paletten haben, 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, worin sich BMP auszeichnet oder von anderen Formaten nicht besser gemacht wird.

GIF - Nur verlustfrei / indiziert

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 BMP, da tatsächlich eine gute Komprimierung verwendet wird, aber es kann nur eine indizierte Palette speichern. Dies bedeutet, dass für die meisten Anwendungsfälle nur maximal 256 verschiedene Farben in der Datei enthalten sein können. Das klingt nach ziemlich wenig, und das 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.

JPEG - Verlustbehaftet / 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 wahrnimmt. Infolgedessen handelt es sich um ein verlustbehaftetes Format, und das wiederholte Speichern derselben Datei führt dazu, dass mit der Zeit mehr Daten verloren gehen. Es hat eine Palette von Tausenden von Farben und eignet sich daher hervorragend für Fotos, aber die verlustbehaftete Komprimierung bedeutet, dass es schlecht für Logos und Strichzeichnungen ist: Sie sehen nicht nur unscharf aus, sondern solche Bilder haben im Vergleich zu GIFs auch eine größere Dateigröße!

Gut für: Fotos. Auch Steigungen.

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 jedoch ein paar Nachteile: Erstens kann es keine Animationen wie GIF unterstützen (gut kann es, aber nur Firefox scheint es zu unterstützen, im Gegensatz zu GIF-Animationen, die von jedem Browser unterstützt werden). Zweitens hat es einige Support-Probleme mit älteren Browsern wie IE6. Drittens haben wichtige Programme wie Photoshop eine sehr schlechte Umsetzung des Formats. (Verdammt, Adobe!) PNG-8 kann nur 256 Farben speichern, wie GIFs.

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

Wichtiger Hinweis: Photoshop hat in seinen neuesten Versionen endlich Unterstützung für Alpha-Transparenz hinzugefügt. Wenn Sie ein älteres haben, gibt es jedoch Möglichkeiten, Photoshop PNG-24-Dateien in PNG-8-Dateien zu konvertieren und dabei ihre 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, genau wie JPEG). In dieser Hinsicht ist es BMP sehr ähnlich, außer dass PNG Bilder tatsächlich komprimiert, sodass es zu viel kleineren Dateien führt. Leider sind PNG-24-Dateien immer noch viel größer als JPEGs, GIFs und PNG-8s, sodass Sie immer noch überlegen müssen, ob Sie wirklich eine verwenden möchten.

Auch wenn PNG-24s 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 größer als ein entsprechendes JPEG-Bild, mit sehr geringer Verbesserung der sichtbaren Qualität. (Natürlich kann dies ein wünschenswertes Ergebnis sein, wenn Sie sich keine Gedanken über die Dateigröße machen und die bestmögliche Bildqualität erhalten möchten.)

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

SVG - Verlustfrei / Vektor

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

Zum Beispiel:

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

Darüber hinaus werden SVG-Dateien mit XML geschrieben und können daher in einem Texteditor geöffnet und bearbeitet werden, sodass sie bei Bedarf im Handumdrehen bearbeitet werden können. Beispielsweise könnten Sie JavaScript verwenden, um die Farbe eines SVG-Symbols auf einer Website ähnlich wie Text zu ändern (dh es ist kein zweites Bild erforderlich).

Ich hoffe das hilft!

JPG:

Vorteile :

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

Unannehmlichkeiten:

• 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

Unannehmlichkeiten:

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

Verwendet :

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

GIF:

Vorteile :

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

Unannehmlichkeiten:

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

Verwendet :

• Animiertes Gif (ich verwende sie hauptsächlich in Newslettern)
• Symbole
• Animiertes Favicon \o/
• Logos

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

Für Fotos:

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

Das stimmt zwar nicht zu 100 %, ist aber eine gute Faustregel. Sehen Sie sich die anderen Antworten auf diese Frage an, um mehr über die anderen Formate zu erfahren. Sehen Sie sich auch an, welches Rasterbildformat besser für die digitale Anzeige von Bildern geeignet ist, wenn keine Transparenz vorhanden ist; 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 heutzutage absolut keinen Grund, SVGs nicht bereitzustellen. Sie werden auf fast die gleiche Weise wie jedes normale Bild implementiert und sind viel vielseitiger.

Der Workflow für jeden modernen Website-Designer wurde also nicht vollständig geändert, sondern aktualisiert. Sie bereiten weiterhin PNGs und JPEGs für Grafiken vor und stellen sie bereit, aber sie sind nur Fallbacks, wenn SVG nicht funktioniert.

Was ist ein SVG?

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

Hier sind einige Ressourcen, um mehr darüber zu erfahren, wie man die Fallback-Technik erreicht:

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

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

3. CSS-Tricks - SVG-Fallbacks

Das folgende JavaScript-Snippet, das aus dem ersten Link kopiert wurde, ist alles, was Sie brauchen, 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 sollten Sie SVG verwenden?

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

Wann man Icon-Fonts verwendet

• Wenn Sie einen umfangreichen Satz von Symbolen benötigen
• Wenn Sie wie SVG die Vorteile von Vektordateiformaten nutzen möchten
• Wenn Sie den Luxus haben, nur auf moderne Browser abzielen zu müssen (die Unterstützung von Webfonts ist für einige Browser relativ neu)

</DA01>

Warum ist SVG die beste Option?

• Skalieren Sie von einer Datei aus wunderbar auf jede Größe (keine Notwendigkeit, @2x.jpgfür Retina-Bildschirme zu dienen oder die Grafik zu dehnen)

• Sehr häufig kleinere Dateigrößen als JPEG und PNG

• Beim Logo muss man fast nie auf Qualität verzichten

• Erleichtert Responsive Design in vielerlei Hinsicht

Anmerkungen

• Unterstützung für Inline-SVGs ist weniger üblich, daher ist es aus Sicherheitsgründen im Moment am besten, die Dateien über Bild-Tags zu verlinken. (Wenn Sie die Grafik an anderer Stelle wiederverwenden möchten, z. B. Navigationssymbole, möchten Sie sowieso extern darauf verlinken, damit der Browser sie zwischenspeichert und Zeit beim Laden anderer Seiten spart.)

• IE unterstützt nicht SVGZ, das für SVG-Grafiken verfügbare komprimierte Format. Für größtmögliche Kompatibilität zwischen Browsern und aktuellen Vorgängerversionen sollten Sie es am besten zu SVG 1.0diesem Zeitpunkt verwenden.

• Sie können Sprite-Sheets mit SVG immer noch auf die gleiche Weise erstellen wie mit anderen Bildformaten, aber anstatt tatsächliche Pixelwerte zu verwenden, um die x- und y-Koordinaten jedes Bildes zu definieren, verwenden Sie prozentuale Werte.

  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 zusammen in einem Sprite-Sheet anordnen, erstellen Sie keine Leinwand, die 70px x 10px.

  Wieso den? Denn wenn Sie 100 durch 7 teilen, erhalten Sie 14.285714285714285714285714285714, was als gerundeter Prozentsatz definitiv irgendwo zu einer unvollkommenen Mathematik führen würde.

  Erstellen Sie stattdessen eine 80px x 10pxLeinwand und sorgen Sie sich nicht um die leeren 12,5 %. Die Symbole werden in Schritten von genau 12,5 % angezeigt, was natürlich viel 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, wird aber immer weniger verwendet. Das beliebteste Format ist .png, das auch Alpha-Transparenz und eine größere Farbpalette als der Dateityp .gif bieten kann. Eine detailliertere Übersicht finden Sie in Jonathan Snooks Artikel „ Welches Bildformat ist das Beste“ .

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

Wenn Sie natürlich Grafiken haben, die keine Alpha-Transparenz benötigen und weniger als 256 Farben haben, kann GIF Ihnen möglicherweise etwas Bandbreite sparen, aber es ist definitiv auf dem Weg nach draußen.

Ich verwende PNG für so ziemlich alles, da es nicht die Komprimierungsartefakte hat, die JEPG hat, und es heutzutage nahezu universell kompatibel ist (ich habe ein paar Website-Editoren gesehen, die es nicht gut finden, wie z die Desktop-Version der SiteBuilder-Software von Homestead, aber das war es auch schon).

Sie sollten Ihr Bild in der Basis auf der Ebene der Komprimierung/Qualität auswählen, die Sie erreichen möchten.

Beim Web dreht sich alles um die Geschwindigkeit beim Herunterladen von Informationen, und je kleiner die Größe eines Bildes ist, desto besser ist 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 verwende es nur unter 64/128 verschiedenen Farben, aber im Allgemeinen unter 256. (Symbole, Vektorbilder, die gerastert werden müssen, kontrastreiche Farben, Farbverläufe mit wenigen Farben)

Wie wählt man zwischen PNG und GIF?

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

• 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 wählen. Wählen Sie das richtige PNG: Es gibt 2 Arten von 8-Bit und 24-Bit. 8bit ist tendenziell eine bessere Version des GIF ohne Animation für Qualität/Komprimierung (aber wie gesagt nicht immer, schau es dir an, wenn du für das Web speicherst). 24bit hat keine Komprimierung (verwenden Sie es also kaum für spezielle Grafikeffekte) und hat den Alpha-Wert 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 entnehmen, dass 90 % der Webdesigner immer noch denken, dass PNG nur ein verlustfreies Format ist . Viele Fachleute wissen nicht einmal von der Existenz von PNG-8.

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 liefert.

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. Dieses Tool ermöglicht es, beide verlustbehafteten Formate visuell zu vergleichen und die beste Variante auszuwählen.

Hier ist ein nettes 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 auszuwählen, damit die Bilder gut aussehen und so kompakt wie möglich sind, damit sie schnell auf dem Bildschirm Ihrer Website-Besucher erscheinen.

GIF - Grafisches Informationsformat

Das GIF-Grafikformat eignet sich am besten für Bilder mit nur wenigen Farben: Diagramme, Grafiken oder als Grafiken festgelegter Text. 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 wird. Dadurch sehen Ihre Grafiken nicht so aus, als wären sie in Kästchen, da der Hintergrund der Datei unsichtbar ist und den Hintergrund der Webseite durchscheinen lässt.

• kann animiert werden. In einer einzigen Datei sind viele Bilderrahmen und ein Index gespeichert, der angibt, wie lange jeder Rahmen gezeigt werden soll. Animiertes GIF wird als Standard-Bilddatei behandelt und daher mit dem Standard-Tag geladen.

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

• können interlaced werden, sodass sie beim Laden von geringerer zu höherer Qualität einzublenden scheinen. So haben Ihre Besucher 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 - Gemeinsame fotografische Expertengruppe

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.

• variable Komprimierung unterstützen. Sie können jedes einzelne Bild mehr oder weniger komprimieren. Je mehr Komprimierung Sie anwenden, desto mehr Qualität verlieren Sie. Während Dateigrößen mit diesem Grafikformat recht klein gemacht werden können, müssen Sie oft einen Kompromiss zwischen Dateigröße und Bildqualität eingehen. Neuere Grafiksoftware zeigt Ihnen vor dem Speichern eine Vorschau an – so können Sie mit verschiedenen Komprimierungsstufen experimentieren, um den besten Kompromiss zwischen Qualität und Dateigröße zu finden.

• Es gibt drei Typen: Baseline oder Standard, Baseline-optimiert oder Standard-optimiert und progressiv. Baseline wurde für Browser entwickelt, die wir heutzutage als veraltet ansehen würden (z. B. Internet Explorer Version 1). Baseline-optimiert bietet mehr Komprimierung als Standard-Baseline, und praktisch jeder Browser kann heute ein solches Bild lesen. Ein progressives JPG wird wie eine Interlaced-GIF-Datei beim Herunterladen erstellt und reicht von einer groben Darstellung des Bildes bis zu seinem fertigen Aussehen. Obwohl dies ein nettes Webgrafikformat ist, unterstützen nicht alle älteren Browser dieses Format.

• eignen sich nicht für Bilder mit nur wenigen Farben, wie z. B. als Grafiken festgelegter Text oder Bilder mit Bereichen mit flachen Farben. Wenn Sie JPG für diese Grafiken verwenden, werden sie größer als nötig und sehen „gesprenkelt“ aus.

PNG - Progressive Netzwerkgrafik

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

• werden von allen modernen Browsern unterstützt. Diese Dateien werden möglicherweise nicht in älteren Browsern angezeigt, sodass die Verwendung dieses Grafikformats dazu führen kann, 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, wie z. B. die Fähigkeit, transparente Hintergründe zu haben oder die Fähigkeit, Bilder mit Millionen von Farben aufzunehmen.

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

Wann verwende ich welche?

Die Wahl des richtigen Webgrafikformats kann sicherstellen, dass Ihre Bilder gut aussehen und schnell auf dem Computer Ihrer Besucher erscheinen. Wenn Sie das falsche Format wählen, sehen Ihre Bilder schlecht aus und das Herunterladen dauert ewig.

Der häufigste Grafikfehler, den Menschen im Internet machen, ist die Verwendung des falschen Grafikformats für ihre Bilder. Aber die Wahl ist eigentlich ganz einfach...

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

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

In einer idealen Welt würde es darauf hinauslaufen:

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 also Transparenz enthält, kann es zu Problemen kommen. Glücklicherweise gibt es einen Hack, mit dem dieses Problem umgangen werden kann, wenn auch nicht auf elegante Weise:

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

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

GIFs haben gegenüber PNG nur zwei Vorteile:

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

BEARBEITEN: PNG ist GIF immer vorzuziehen, wo es unterstützt und verwendet werden kann, da PNG ein offenes Format ist.

Wie bereits erwähnt, ist JPEG gut für Fotografie und PNG gut 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 ergibt das für Ihre Grafik bessere Format eine kleinere Datei. Fotos werden kleiner als JPEG und Grafiken kleiner als PNGs. Wenn Sie sich also nicht sicher sind, welche Sie wählen sollen, kann dies eine gute Entscheidung sein.