Wie viele von Ihnen verbringe ich viel Zeit damit, Grafiken für das Web zu speichern. Wenn ich also im Web surfe, erkenne ich fast instinktiv Optimierungsfehler. So wie ein Setzer einen Kerning-Fehler aus einer Meile Entfernung erkennen kann oder ein Football-Fan einen verpatzten Defensivspielzug allein durch die Formation erkennt.
Ich nehme Blogging Tips nicht aufs Korn, es ist ein toller Blog, den ich gerne lese, aber sie haben gerade ein neues Design gestartet, das eine große, fette rote Kopfzeile mit umgekehrten Blockbuchstaben aufweist. Dies ist **klassisches** GIF-Gebiet, aber sie haben JPG verwendet. JPG verursacht in diesem Fall Artefakte um die Buchstaben herum, da die Komprimierung dies bewirkt. Sehen Sie unten
Wann sollten Sie JPG und wann sollten Sie GIF verwenden?
Die Verwendung von Bildern ist ein wichtiger Bestandteil von CSS, daher ist es gut, diese Informationen griffbereit zu haben
Verwenden Sie GIF, wenn Ihre Grafik eine relativ geringe Anzahl von Farben verwendet, harte Kanten, große Flächen mit einfarbiger Farbe aufweist oder binäre Transparenz benötigt. Diese exakt gleichen Regeln gelten für 8-Bit-PNGs. Sie können sie fast genau wie GIF-Dateien betrachten. PNGs können keine Animationen wie GIF, sind aber oft kleiner in der Dateigröße.
Verwenden Sie JPG, wenn Ihre Grafik eine hohe Anzahl von Farben verwendet, Verläufe enthält oder fotografische Elemente enthält.
Dies sind nur Faustregeln.
Wie alle Regeln sind auch diese dazu da, gebrochen zu werden. Es gibt viele Umstände, unter denen sie nicht zutreffen. Zum Beispiel können fotografische Bilder, die ziemlich klein und eher eintönig sind, hervorragend mit GIF funktionieren. Ebenso können Verläufe manchmal mit GIF-Kompression zu coolen Effekten werden. Letztendlich sollten Sie einige Tests durchführen und sehen, was am besten aussieht. Das ist die Schönheit des 4-fach „Optimiert speichern als“-Dialogs in Photoshop.
Was ist mit PNG?
Mmmmm. 32-Bit-PNGs. Es ist ein so schönes Format, nicht wahr? Verlustfreie Komprimierung. ALPHA-Transparenz. Gammakorrektur. 48-Bit-Farbe. Oft kleinere Dateigrößen. Was gibt es da nicht zu lieben? Nun, der Hauptgrund für die Verwendung von PNG ist diese wunderschöne Transparenz, und genau das funktioniert nicht in IE 6 und niedriger. Es gibt einige Tricks, die man anwenden kann, um es zu ermöglichen, aber es ist oft ziemlich viel Mühe. PNG ist sicherlich nutzbar. Ich benutze es oft, da es das native Format der Screenshots ist, die ich mache, aber für die meisten ist PNG nichts weiter als ein Flirt. Sobald IE 6 vom Radar verschwindet, werden wir eine breitere Nutzung erleben.
RE: PNGs
Ich liebe PNGs, ich benutze sie oft trotz IE6-Nutzern. Was ich kürzlich versucht habe, ist die Verwendung eines PNG und die Bereitstellung eines IE6-spezifischen Stylesheets, das GIF-Dateien anstelle von PNGs verwendet.
Das tut zwei Dinge
A) Hält die Seite für diejenigen, denen es wichtig ist, hübsch (warum sollten wir die bestrafen, die neue Technologien annehmen)
B) Hält die IE 6-Verlierer (ich meine Benutzer) die Webseiten so sehen, wie sie es gewohnt sind, grob und nicht so glatt wie beabsichtigt.
Die Verwendung eines alternativen Stylesheets ist eine großartige Idee, aber manchmal ist die Anwendung des PNGs einfach nichts, was ein GIF leisten kann. Zum Beispiel ein Schattenwurf. Das PNG vervielfacht sich schön über dem, was sich darunter befindet (ohne zu wissen, was sich darunter befindet), aber das GIF kann das nicht. Man muss einfach eine matte Farbe wählen und damit arbeiten, was nervig sein kann.
Ich verwende oft PNGs für Seitenhintergründe, habe aber immer festgestellt, dass die Farben in PNG und die für die Körperfarbe angegebene Farbe in IE nie ganz übereinstimmen.
Dann entdeckte ich http://entropymine.com/jason/tweakpng/
und alle (na ja, viele) meiner Probleme waren gelöst.
Sehr interessant. Das muss ich mir ansehen.
Bezüglich GIF vs. JPG vs. PNG ist das eine Regel, die die meisten Leute nicht wirklich kennen (spreche aus vergangenen Erfahrungen). Es ist eine Sache, die das Design ein wenig besser aussehen lässt...
Danke, dass Sie das darauf hinweisen, Chris. Design ist nicht meine Stärke, daher schätze ich die Tipps.
Früher habe ich für Logos meistens JPEGs und für andere Grafiken auf der Website GIFs verwendet. Zukünftig werde ich die von Ihnen angesprochenen Punkte berücksichtigen :)
Hallo Kevin!
Ja, wie gesagt, ich wollte dich nicht aufs Korn nehmen =) Ich bin zufällig Leser von Blogging Tips, habe es bemerkt und es hat die Idee für den Beitrag angeregt. Ich bin froh, dass es hilfreich sein konnte.
Tippfehler in der Zeile unter dem roten, verpixelten Logo. „Wann sollten Sie JPG und wann sollten Sie GIF verwenden?“ wen = when
Hier ist ein Tipp
Wenn Sie Ihre Bilder als PNG 24-Bit speichern, haben Sie eine schöne Transparenz, die in IE6 nicht funktioniert. Wenn Sie Ihre Bilder jedoch als PNG 8-Bit speichern, haben Sie eine grottenschlechte Transparenz wie bei GIFs, aber sie funktioniert in IE6, und Sie behalten die kleinere Größe und sanftere Übergänge zwischen den Farben.
Die Frage, die Sie sich stellen sollten, ist also: Soll ich JPG oder PNG verwenden?
@delFuego: Sehr guter Punkt. Ich habe nie wirklich darüber nachgedacht, 8-Bit-PNGs zu verwenden, aber ich glaube, Sie haben Recht, es könnte genauso gut sein. Das heißt, in Fällen, in denen die Dateigröße tatsächlich kleiner ist und Sie die Animationsmöglichkeiten von GIF nicht benötigen.
Vielen Dank für diese Informationen. Nächstes Mal, wenn ich Bilder für das Web vorbereite, werde ich Ihren Beitrag im Hinterkopf behalten.
Ich bin froh, dass delFuego die 8-Bit-PNGs erwähnt hat, da diese das sind, was ich immer anstelle von GIFs verwendet habe. Ideal für statische Bilder, bei denen man sonst gezwungen wäre, GIF für die Optimierung zu verwenden.
Ich bin jetzt ein totaler Konvertit auf PNG-8. Der einzige Grund, warum ich GIF noch verwenden würde, sind die seltsamen zufälligen Umstände, unter denen es besser komprimiert, und wenn man Animationen braucht. Ich denke, das Missverständnis, das die Leute haben, ist, dass sie, wenn sie PNG denken, normalerweise an PNG-24 denken, das ist PNG mit Alpha-Transparenz und Dateigrößen, die normalerweise viel höher sind als bei jedem anderen Format.
PNG-8 ist für den Moment eine verdammt gute Option.
Hallo, ich bin wahrscheinlich etwas spät für diesen Kommentar, und ich sehe, dass Sie sich sowieso in Richtung PNG-8 bewegen, aber ich denke, es gibt einen Schreibfehler auf der Seite
Sollte der Satz „oder binäre Transparenz benötigt“ nicht am Ende des Abschnitts „GIF verwenden“ und nicht am Ende des Abschnitts „JPG verwenden“ stehen?
Jedenfalls ein guter Artikel, das ist auch etwas, das mich oft beschäftigt, danke.
Tim