SVG-, PNG- und JPG-Bildformate: Vor- und Nachteile. PNG-Bild – So öffnen, bearbeiten und konvertieren Sie die Datei PNG-Dateien

Darüber hinaus bietet PNG als kostenloses Format gegenüber GIF zahlreiche praktische Vorteile für den Webdesigner:

• Bessere Komprimierung: Bei den meisten Bildern erreicht PNG eine kleinere Dateigröße als GIF
• Größere Farbtiefe: PNG bietet Truecolor mit bis zu 48 Bit, während wir in GIF nur über eine 256-Farben-Palette verfügen
• Alphakanal-Transparenz: Während GIF nur binäre Transparenz bietet, ermöglicht PNG praktisch unbegrenzte Transparenzeffekte, indem es einen Alphakanal für Transparenz bietet

Es ist erwähnenswert, dass PNG im Gegensatz zu GIF keine Animationen zulässt. Es gibt zwar einen MNG-Standard (Multiple-Image Network Graphics), der dies ermöglicht, aber von Webbrowsern und Grafikeditoren nicht so weithin unterstützt wird.

Sie fragen sich wahrscheinlich, warum PNG im Web kein so weit verbreitetes Format ist, wenn es so gut ist wie beworben. Die Antwort liegt größtenteils in einer falschen Vorstellung über das Format und die Browserunterstützung dafür.

Wegen Internet Explorer 6 und frühere Versionen unterstützen nicht alle PNG-Funktionen (einschließlich Alpha-Kanal-Transparenz). Die Leute glauben (obwohl dies nicht stimmt), dass Internet Explorer PNG überhaupt nicht oder zumindest keine Transparenz unterstützt. Tatsächlich unterstützen Internet Explorer 5 und 6 genügend PNG-Spezifikationen, um es funktionell mit nicht animierten GIF-Bildern gleichwertig (oder besser) zu machen. Alle anderen genannten Browser, einschließlich Firefox, Netscape 6 und höher, Mozilla, Opera 6 und höher, Safari und Camino, unterstützen die PNG-Transparenz vollständig.

Abgesehen von diesem Missverständnis über die integrierte Browserunterstützung GIF-Animation war (und ist bis heute) der Hauptgrund für seinen Erfolg. Allerdings ist die Verwendung von GIF im Laufe der Jahre im Vergleich zu anderen Technologien (z. B. Flash), die sich immer besser für Animationen eignen, immer weniger beliebt geworden.

Transparenz ist ein wesentliches Merkmal von GIF und PNG und oft der Grund, warum ein Webdesigner das zu verwendende Format auswählt. Obwohl PNG eine umfassendere Unterstützung für Transparenz bietet, müssen Webdesigner häufig eine GIF-Version von Bildern erstellen, um sie an ältere Browser anzupassen. Mit CSS ist dies möglich (und etwas trivial), indem GIF-Bilder für ältere Browser und hochwertige PNG-Bilder an Browser gesendet werden, die diese verstehen. Für einen Webdesigner bedeutet dies jedoch eine doppelte Arbeit und daher gehen die Leute den Weg des geringsten Widerstands und verwenden weiterhin GIF-Bilder.

Deshalb haben wir uns einige Gründe angesehen, warum GIF immer noch so beliebt ist, aber die meisten davon basieren auf einem Missverständnis der Konzepte oder der Verwendung eines vertrauten Arbeitsablaufs. Mit einigen Grundkenntnissen über PNG und seiner zuverlässigen Verwendung in Browsern können Sie alle Vorteile nutzen, die es zu bieten hat.

JPEG ist ein weiteres allgegenwärtiges Webformat und in den meisten Fällen, beispielsweise bei Fotos (und dergleichen), sogar besser als PNG oder GIF. PNG soll nicht mit JPEG konkurrieren. Die JPEG-Komprimierung erzeugt bei der Arbeit mit Fotos deutlich kleinere Dateien als PNG. Andererseits erzeugt PNG kleinere Dateien, wenn die Bilder Text, künstlerische Linien, Logos, „flache“ Farben usw. enthalten.

Schauen wir uns nun an, wie man PNG im Webdesign verwendet. Ich habe alle Dateien für jedes Beispiel in einem separaten Ordner gesammelt, der bei Freunden von ED verfügbar ist.

In den letzten Jahren hat sich das Gefälle - weicher Übergang Der Unterschied zwischen zwei oder mehr Farben ist zum besten Freund eines Webdesigners geworden. Besonders beliebt sind dezente, kaum sichtbare Farbverlaufsfüllungen, die, ohne aufzufallen, ein Gefühl von Tiefe und Textur erzeugen.
Manchmal ist GIF die beste Wahl für einen Farbverlauf. Wenn der Farbverlauf ein einfacher zweifarbiger Übergang ist, funktioniert GIF darin einwandfrei. Allerdings führt die Beschränkung von GIF auf nur 256 Farben häufig zu auffälligen und unregelmäßigen „Streifen“ bei komplexeren Farbverlaufsübergängen. JPEG hingegen kann einige ziemlich nette Farbverläufe ausgeben, allerdings oft auf Kosten einer größeren Dateigröße. Während JPEG-Verläufe im Allgemeinen recht gut sind, müssen Sie bedenken, dass JPEG eine verlustbehaftete Komprimierung verwendet, was bedeutet, dass das resultierende Bild niemals mit der Qualität des unkomprimierten Bildes mithalten kann.

Der fragliche typische Hintergrundverlaufsstil wird für Schaltflächen, Blöcke oder einfach überall sonst verwendet. Es könnte wie in Abbildung 5-1 aussehen. Im Uhrzeigersinn von der oberen linken Ecke aus sehen wir das Originalbild (unkomprimiert), die GIF-Version, die PNG-Version und JPEG. Sie können sehen, dass das resultierende PNG die kleinste Größe hat (515 Byte). Dies ist viermal kleiner als ein GIF-Bild. JPEG ist mit 637 Byte etwas größer als PNG und weist aufgrund der verlustbehafteten Komprimierung auch eine geringere Qualität auf (obwohl die Fähigkeit des menschlichen Auges, den Qualitätsunterschied in diesem einfachen Beispiel zu erkennen, fraglich bleibt).

Abbildung 5-1
Photoshop-Bedienfeld – Für Web speichern,
Zeigt Dateigrößenunterschiede für dasselbe Bild in verschiedenen Formaten an

Manchmal müssen Sie ein Bild erstellen, das auf verschiedenen Substraten gleich funktioniert. Einige gängige Beispiele sind Logos und Symbole. GIFs dominieren diese Situationen traditionell, aber es gibt mehrere Gründe, warum PNG möglicherweise häufiger vorkommt beste Wahl in dieser Situation. PNG gewinnt in der Regel an Dateigröße für Logos oder andere einfache „Kunstwerke“. Darüber hinaus sorgt die inhärente Transparenz von PNG dafür einfache Erstellung einzelne Dateien, die auf jedem Hintergrund funktionieren. PNG bietet binäre Transparenz wie GIF, bietet aber auch die viel wünschenswertere Option eines Alphakanals, bei dem Pixel teilweise transparent sein können, anstatt nur ein- oder ausgeschaltet zu werden. Letzteres erhöht die Dateigröße, manchmal sogar größer als bei einem GIF mit binärer Transparenz, ermöglicht aber Anti-Aliasing an den Rändern Ihres Bildes und macht es eleganter, es über dem Hintergrund zu platzieren.

Allerdings habe ich ihr Konzept mit einem weißen Bild mit Schablonensymbolen überarbeitet. Sie verwendeten ein weißes Symbol auf einem transparenten Hintergrund, was im Allgemeinen sehr effektiv sein konnte. In diesem Fall Ihr Hintergrundfarbe Das CSS würde in einem quadratischen oder rechteckigen Bereich um das Symbol herum und nicht im Symbol selbst erscheinen.

Sowohl Dan als auch PJ verwendeten ein transparentes GIF anstelle eines PNG. Dies deckte ihre Anforderungen vollständig ab und sie mussten Pixelbilder erstellen, die zum Stil der Symbole passten. Mit PNG können Sie eine ähnliche Technik erreichen, jedoch mit einigen Vorteilen in Form von Anti-Aliasing und teilweiser Transparenz für die Verwendung in detaillierteren Symbolen.

Ich weiß, was Sie denken: Diese ganze PNG-Transparenz sieht gut aus, aber ist sie praktisch?

Die gute Nachricht ist, dass alle modernen Browser PNG-Bilder vollständig unterstützen, einschließlich der Alphakanal-Transparenz, deren Vorteile ich in den Beispielen gezeigt habe. Safari (alle Versionen), Firefox (alle Versionen), Opera (Versionen 6 und höher), Netscape (Versionen 6 und höher) und Mozilla (alle Versionen) werden alles tun, was ich von ihnen verlange. Aber es gibt eine schlechte Nachricht – der einzige Browser, den ich noch nicht erwähnt habe und den die meisten Ihrer Benutzer haben: Internet Explorer.

Internet Explorer 6 und niedriger unterstützen die im PNG-Format integrierte Alphakanal-Transparenz nicht. Seitdem die meisten der vielen Web-Surfer die Wahl (oder Nicht-Wahl) des Browsers hatten, hält diese klaffende Lücke Webdesigner von PNG fern. Aber mit der Veröffentlichung von Internet Explorer 7 erhielten wir volle Alpha-Unterstützung PNG-Transparenz in allen gängigen Browsern. Was kommt als nächstes? Gibt es Möglichkeiten, mit PNG-Alpha-Transparenz in Internet Explorer 6 und niedriger zu arbeiten? Wenn Sie also diesen Effekt nutzen möchten, steht Ihnen nichts mehr im Wege. Internet Explorer 6 und seine früheren Versionen erfordern mehr Aufmerksamkeit als nötig, aber es ist durchaus möglich.

Internet Explorer verfügt über verschiedene native Filter. Sie werden in CSS verwendet, sind aber kein Teil der offiziellen CSS-Spezifikation. Mit anderen Worten: Sie sind im Web nicht standardisiert. Leider unterstützen Internet Explorer 6 und niedriger das PNG-Format (das vom W3C empfohlen wird) nicht vollständig, aber Microsoft verfügt über einen Filter, der diesen Mangel beseitigt: AlphaImageLoader.

Laut einem Abschnitt auf der offiziellen Website von Microsoft zeigt AlphaImageLoader „ein Bild innerhalb der Grenzen eines Objekts und zwischen dem Hintergrund des Objekts und seinem Inhalt an.“ Mit anderen Worten: AlphaImageLoader lädt ein PNG-Bild mit seiner vollen Transparenz, lädt es jedoch als eigene Ebene, unter der sich der Inhalt des Objekts befindet, auf das es angewendet wird. Auf diese Weise geladene PNG-Bilder wirken eher wie Hintergrundbilder als wie Vordergrundbilder (obwohl sie tatsächlich über dem Hintergrund des Objekts „sitzen“).

Grundsätzlich können Sie AlphaImageLoader einfach in CSS auf img-Elemente anwenden und das Ergebnis genießen. Das Bild wird zuerst geladen, die Transparenz bleibt erhalten, aber dann wird das Bild erneut geladen – als vorderer Inhalt des Objekts – mit undurchsichtigen Bereichen (wodurch Ihre transparente Version „beschattet“ wird).

Sie können kein transparentes PNG als Hintergrund verwenden CSS-Bild für ein (X)HTML-Element (z. B. for) und erwarten Sie, dass AlphaImageLoader die Aufgabe im Internet Explorer ordnungsgemäß erledigt. Denken Sie daran, dass AlphaImageLoader Ihr Bild zwischen dem Hintergrund und dem Vordergrund des Objekts einfügt. Während Ihr Bild also in seiner ganzen transparenten Pracht geladen wird, wird es auch weiterhin so geladen Hintergrundbild CSS und ohne Ihre wunderbaren durchscheinenden Pixel.

Kehren wir zu einem der früheren Beispiele zurück und versuchen, es korrekt in Internet Explorer zu laden. Erinnern Sie sich an Channel 49, den Fernsehsender in Topeka? Ich bin sicher, ja. Abbildung 5-21 zeigt, wie die Site im Internet Explorer 6 aussieht.

Abbildung 5-21
Die Überschrift 49abcnews.com, gerendert in Internet Explorer 6 für Windows, mit intakter PNG-Transparenz.

Der HTML-Code für den oberen Teil des Wetters sieht so aus, wie Sie es vielleicht schon erraten haben:

Derzeit in Topeka, KS:
82° bewölkt
Holen Sie sich die Wettervorhersage und mehr ...

Sie sehen ein Bild, und es ist definitiv ein PNG; sogar der Internet Explorer lädt es einwandfrei. Die geheime Zutat hierfür ist JavaScript. Ich habe tatsächlich ein bisschen DOM-Skripting verwendet, um das img-Element im Handumdrehen zu entfernen und durch ein div-Element zu ersetzen, das – Sie haben es erraten – AlphaImageLoader verwendet. JavaScript wird in bedingten Kommentaren beschrieben, einem weiteren praktischen, aber völlig nicht standardisierten Idiom von Microsoft, das in Internet Explorer integriert ist. Mit bedingten Kommentaren können Sie Code nur für eine bekannte Version von Internet Explorer verwenden. Der Code wird von allen anderen Browsern ignoriert und hat daher keinerlei Auswirkungen auf sie. Im Site-Element www.49abcnews.com finden Sie:

Dank der ersten Zeile wird dieses Skript bei LTE IE6 nur dann in das gerenderte Dokument aufgenommen, wenn es in einer Version von Internet Explorer kleiner oder gleich (dies wird durch LTE angezeigt) 6 angezeigt wird. Alle anderen Browser, einschließlich der Der neu eingetroffene Internet Explorer 7 wird dies völlig ignorieren.

Was ist also in der JavaScript-Datei „fixWeatherPng.js“ enthalten? Lass uns einen Blick darauf werfen:

Window.attachEvent("onload", fixWeatherPng); Funktion fixWeatherPng() ( var img = document.getElementById("weatherImage"); var src = img.src; img.style.visibility = "hidden"; var div = document.createElement("DIV"); div.style. filter = "progid:DXImageTransform.Microsoft. AlphaImageLoader(+ src + "", sizing="scale")"; // Der Kürze halber wurden einige 49abcnews.com-spezifische CSS-Stile weggelassen. img.replaceNode(div); )

Lassen Sie uns Schritt für Schritt analysieren, was das Skript tut. Zuerst teilen wir dem Browser mit, dass wir die Funktion „fixWeatherPng“ ausführen möchten, wenn die Seite geladen wird. Der Rest des Skripts ist die Funktion selbst.

Beginnen wir zunächst mit der Suche nach dem Bild, mit dem wir arbeiten möchten, anhand seines id-Attributs und speichern es in der Variablen img. Wir speichern das src-Attribut (URL zur Bilddatei) in der src-Variablen. Dann verstecken wir das img-Element, indem wir es freilegen CSS-Eigenschaft Sichtbarkeit zu ausgeblendet.

Als Ergebnis ersetzen wir das ursprüngliche img-Element (das ausgeblendet ist) durch ein neu erstelltes div-Element, an das der AlphaImageLoader erfolgreich angehängt wird.

Die Verwendung von DOM-Skripten zum Einfügen Ihres AlphaImageLoader – das Filtern von Bits im laufenden Betrieb – hat seinen hässlichen, aber notwendigen Nachteil – falsches CSS. Darüber hinaus gibt es außerhalb Ihres (X)HTML-Markups nicht-semantische div-Elemente. Und solange dies alles in bedingten Kommentaren beschrieben wird, besteht für andere Browser keine Chance, durch den Code von Microsoft beschädigt zu werden. (handyblogger: Hier versucht Jeff subtil auf Microsofts „ungeschickte“ Lösung hinzuweisen)

Wenn Sie etwas falsch machen müssen, können Sie es zumindest extrahieren und von allem anderen, wo es nicht benötigt wird, getrennt aufbewahren.

PNG-ähnlich Grafikformat, bietet viel technische Vorteileüber die üblicherweise in GIFs verwendeten hinaus. Tatsächlich sind die Vorteile so groß, dass PNG als Nicht-Fotografikformat längst eine dominierende Stellung hätte einnehmen können. Die mangelnde Unterstützung einiger der wichtigeren PNG-Funktionen durch den Internet Explorer, etwa die Alphakanal-Transparenz, hat daher viele Webentwickler abgeschreckt. Aber es gibt zwei sehr gute Gründe, warum Sie vor PNG keine Angst haben sollten.

Erstens: Sogar Internet Explorer 6 und seine früheren Versionen unterstützen PNG fast vollständig in einer Art und Weise, wie GIF es kann (mit Ausnahme von Animationen natürlich). PNG erzeugt fast immer kleinere Dateien, wodurch sie schneller geladen werden und weniger Ressourcen verbrauchen.

Zweitens: Internet Explorer 7 bietet volle Unterstützung für PNG-Alpha-Transparenz. Die Effekte, die mit der gesamten Palette an transluzenten Optionen erzielt werden können, sind nahezu grenzenlos. Ich gehe davon aus, dass Designern, die interessante Möglichkeiten finden, PNG-Transparenz wie die in diesem Artikel beschriebenen zu verwenden, die Tür zu einer neuen, noch nie dagewesenen Ebene von Stilen geöffnet wird. Ich habe Ihnen einige nützliche Ideen gegeben, was Sie mit PNG-Transparenz erstellen können, aber hören Sie hier nicht auf. Sieh es dir selbst an!

Auszug aus Web Standards Creativity von Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin und Rob Weychert; herausgegeben von Freunden von ED. Copyright Jeff Croft 2007. Verwendung mit Genehmigung von Apress, Inc.

Das PNG-Bildformat ist eines der beliebtesten und bietet Benutzern die Möglichkeit, komprimierte Bilder ohne Qualitätsverlust zu speichern. PNG wird vor allem zum Bearbeiten von Grafiken oder im Internet verwendet. Als Nächstes betrachten wir mehrere einfache Möglichkeiten, wie Sie eine Datei dieses Formats auf Ihrem Computer öffnen können.

Es gibt verschiedene Methoden zum Öffnen von PNG-Dateien zum Anzeigen und Bearbeiten. Sie müssen nur die unten aufgeführten Anweisungen befolgen und das Öffnen des Bildes wird nicht schwierig sein.

Im Internet gibt es viele Grafikeditoren und spezielle Software zum Betrachten und Bearbeiten von Bildern. Sie stellen dem Benutzer eine Vielzahl von Funktionen und Werkzeugen zur Verfügung, die das Arbeiten mit Bildern so komfortabel wie möglich machen. Schauen wir uns den Vorgang des Öffnens eines PNG-Bildes am Beispiel des GIMP-Programms an:

Wenn Ihnen GIMP aus irgendeinem Grund nicht zusagt, empfehlen wir Ihnen, sich damit vertraut zu machen volle Liste Programme zum Betrachten von Bildern finden Sie in unserem Artikel unter dem folgenden Link. Dort finden Sie bestimmt etwas Passendes.

In Fällen, in denen verschiedene Manipulationen erforderlich sind Bild öffnen Profitieren Sie von speziellen Grafikeditoren mit erweiterter Funktionalität und einer Vielzahl unterschiedlicher Tools. Mehr darüber erfahren Sie in unserem Artikel unter dem folgenden Link.

Alle Versionen des Windows-Betriebssystems verfügen über einen integrierten Bildbetrachter. Es kann auch zum Öffnen von PNG-Dateien verwendet werden. Schauen wir uns diesen Prozess genauer an:

Wenn Sie alle PNG-Bilder über einen Standard-Viewer öffnen möchten Windows-Fotos, folge diesen Schritten:

Jetzt werden standardmäßig alle PNG-Dateien mit geöffnet Standardmittel Fotos ansehen. Um das zu öffnende Programm zu ändern, befolgen Sie einfach die gleichen Schritte und wählen Sie eine andere Software aus.

In diesem Artikel haben wir uns das genauer angeschaut einfache WegeÖffnen von Bildern im PNG-Format. Wie Sie sehen können, in dieser Prozess Es gibt nichts Kompliziertes und alles ist in wenigen Schritten erledigt.

Eine PNG-Datei ist ein Rasterbild, das im Portable Network Graphic-Format gespeichert ist. Jedes PNG-Bild enthält eine Palette – eine Reihe verwendeter Farben. Um die Dateigröße zu reduzieren, wird eine verlustfreie Komprimierung mit dem Deflate-Algorithmus verwendet. Wird hauptsächlich im Internet als Bilder für Webseiten verwendet. Das Format wurde als Ersatz für GIF entwickelt, das bis 2004 zusätzlich zu seinen Mängeln Einschränkungen bei der Verwendung in freier Software aufwies. Das neue PNG-Format löste diese Probleme. Insbesondere werden ein 8-Bit-Alphakanal und Farbtiefen von bis zu 48 Bit unterstützt. Während im GIF-Format nur volle Transparenz möglich ist und die Farbpalette auf nur 256 Farben (8 Bit) beschränkt ist. Allerdings unterstützt dieses Format im Gegensatz zu seinem Vorgänger keine Animationen. Zu diesem Zweck wurde ein weiteres MNG-Format erstellt. Auch die Verwendung der CMYK-Palette in PNG-Dateien ist nicht möglich, da dieses Format nicht für die professionelle Arbeit mit Grafiken gedacht ist. PNG-Dateien können in jedem Browser und fast jedem Bildbetrachtungs- und Bearbeitungsprogramm geöffnet werden. IN Windows-Datei mit einer PNG-Erweiterung kann per Doppelklick mit der Maus geöffnet werden.

Die Dateierweiterung .png steht für ein PNG-Bild. Das Anzeigen und Bearbeiten eines Rasterbilds im PNG-Format ist mit möglich folgende Programme: Microsoft Windows Fotos, Microsoft Windows Photo Viewer, Microsoft Paint, Adobe Photoshop CC. Außerdem können die aufgeführten Programme Bilder, Bilder und Zeichnungen dieses Formats konvertieren.

Eine PNG-Datei kann mit speziellen Programmen geöffnet werden. Öffnen dieses Format, laden Sie eines der vorgeschlagenen Programme herunter.

Die PNG-Erweiterung ist ein Dateiformat, das zum Speichern von Bildern ohne Qualitätsverlust verwendet wird. Dies ist das beliebteste Fotoformat im Internet, das speziell für die Verwendung im Web entwickelt wurde.

Eine Datei mit der Dateierweiterung PNG ist eine Datei Tragbare Netzwerkgrafiken. Das Format verwendet verlustfreie Komprimierung und gilt allgemein als Alternative zu GIF. Aber im Gegensatz zu GIF unterstützen PNG-Dateien keine Animationen.

Das PNG-Format bietet sowohl Graustufen- als auch Vollfarbfotos und transparente Ebenen werden unterstützt. Die PNG-Komprimierung ist normalerweise besser als die in GIF verwendete. JPG ist manchmal PNG überlegen, aber die Komprimierung kann in Bildern mit Text oder in kontrastreichen Bereichen zu Artefakten führen.

Zum Öffnen von PNG-Dateien können Sie einen beliebigen Internetbrowser oder Grafikeditor verwenden. Sowohl Windows- als auch Mac OS-Plattformen verfügen über integrierte Mechanismen zum Anzeigen solcher Bilder.

Der PNG-Standard-Fotobetrachter von Windows wird häufig zum Öffnen von PNG-Dateien verwendet, da er Systemprogramm Windows. Aber es gibt viele andere Möglichkeiten, sie anzuzeigen.

Alle Browser (wie Chrome, Firefox, Internet Explorer usw.) zeigen PNG-Dateien, die Sie im Internet öffnen, automatisch an, sodass Sie nicht jede PNG-Datei, die Sie anzeigen möchten, auf Ihren Computer herunterladen müssen. Sie können Ihren Browser auch verwenden, um PNG-Dateien, die Sie bereits auf Ihrem Computer haben, mit der Tastenkombination Strg + O zu öffnen. Die meisten dieser Programme unterstützen auch Drag-and-Drop, sodass Sie die PNG-Datei einfach in den Browser ziehen können, um sie zu öffnen .

Es gibt auch mehrere Offline-Möglichkeiten, solche Bilder zu öffnen – diese sind etwas Besonderes Grafikeditor. Einige beliebte sind XnView, IrfanView, FastStone Image Viewer, Google Drive, Eye of GNOME und gThumb. Zum Bearbeiten von PNG-Dateien können Sie fast jedes der aufgeführten Programme, die Anwendungen Paint und Paint.NET, das beliebte Dienstprogramm GIMP sowie das bekannte Adobe Photoshop verwenden.

Bilddateien können konvertiert werden verschiedene Wege Konvertieren Sie beispielsweise mit verschiedenen Programmen in und aus PNG online Dienste. Dies kann beispielsweise mit dem PNG-Editor – Photo Converter – erfolgen.

Eine Bilddatei, die im PNG-Format (Portable Network Graphic) gespeichert ist. Enthält eine Bitmap aus Farben und verwendet verlustfreie Komprimierung, ähnlich einer .GIF-Datei, jedoch ohne Kopierbeschränkungen. Wird normalerweise zum Speichern von Webbildgrafiken verwendet.

Das PNG-Format (gelesen als PNG) wurde als Reaktion auf die Einschränkungen des GIF-Formats entwickelt, vor allem um die Farbunterstützung zu erhöhen und ein patentfreies Bildformat bereitzustellen. Während GIF-Dateien nur undurchsichtige oder vollständig transparente Pixel unterstützen, können PNG-Bilder außerdem einen 8-Bit-Transparenzkanal enthalten, der einen Farbwechsel von undurchsichtig zu transparent ermöglicht.

PNG-Bilder können nicht wie GIF-Bilder animiert werden. Aber das zugehörige .MNG-Format kann animiert werden. PNG-Bilder unterstützen CMYK nicht, da sie nicht für den professionellen Grafikgebrauch gedacht sind. PNG-Bilder werden von den meisten Webbrowsern unterstützt.

Mac OS X 10.4 und höher speichert Screenshots als PNG-Dateien. Ubuntu Linux speichert auch gedruckte Screenshots im PNG-Format.

MIME-Typ: image/png

Laden Sie das Programm für das PNG-Format herunter

In diesem Artikel möchte ich über eine sehr unangenehme Funktion von Photoshop sprechen, die beim Speichern auftritt transparente Bilder in PNG24. Nehmen wir das Originalbild und kopieren wir ein Fragment in PNG24. Ich habe es so gemacht: Mit dem Werkzeug „Polygonales Lasso“ habe ich ein Fragment ausgewählt, es kopiert und in ein neues Dokument eingefügt und es dann mit „Für Web speichern“ gespeichert:

PNG24, 456 KB

Wie wir in Teil 1 herausgefunden haben, besteht ein Bild in PNG24 im Wesentlichen aus zwei Ebenen: einer RGB-Ebene, die Informationen über die Farbe jedes Pixels enthält, und einem Alpha-Kanal, der Informationen über deren Transparenz enthält.

Es ist logisch anzunehmen, dass in vollständig transparenten Bereichen eine bestimmte Farbe vorhanden sein sollte, um das Bild effektiv zu packen. Dies ist jedoch, was Photoshop in der RGB-Ebene gespeichert hat (ich habe das über den Seashore-Editor gesehen):

Und das bloße Auge kann erkennen, dass große Fragmente absolut unnötiger Informationen zurückbleiben:

Wenn Sie keine anderen Editoren verwenden möchten (ein solcher Nachteil ist mir beispielsweise in Adobe Fireworks nicht aufgefallen), schlage ich eine einfache Möglichkeit vor, diesen Fehler in Photoshop zu beheben. Unsere Aufgabe besteht darin, alle Informationen in vollständig transparenten Bereichen durch eine Farbe zu ersetzen (vorzugsweise Schwarz, um keinen Zweifel daran zu haben, dass diese Bereiche das geringste Gewicht in Bytes haben).

1. Öffnen Sie das Beispiel in Photoshop und wählen Sie das Bild auf der Ebene aus: Klicken Sie bei gedrückter Strg-Taste auf das kleine Ebenenbild in der Ebenenpalette.

2. Wechseln wir in den Schnellmaskenmodus (Q-Taste).

3. Belassen Sie mithilfe von Bild → Anpassungen → Schwellenwert nur die Maskenpixel, deren Farbe schwarz war. Ziehen Sie dazu den Schieberegler ganz nach links.

4. Verlassen Sie den Schnellmaskenmodus (Q-Taste) und kehren Sie die Auswahl um (Auswählen → Umkehren oder Strg+Umschalt+I). Es bleiben nur vollständig transparente Pixel ausgewählt.

5. Füllen Sie den ausgewählten Bereich mit Schwarz (es gibt viele Möglichkeiten, zum Beispiel über Bearbeiten → Füllen).

6. Kehren Sie die Auswahl erneut um und fügen Sie der Ebene eine Maske hinzu (Symbol in der Ebenenpalette).

7. Jetzt führen wir „Für Web speichern“ aus und sehen, wie das Bild auf wundersame Weise um 122 KB „dünner“ wird.

Ich wiederhole noch einmal, dass alle Aktionen sehr praktisch in Aktionen aufgezeichnet und anschließend mit einem Tastendruck ausgeführt werden.

Fortgesetzt werden.

Bei der Kommunikation mit meinen Kollegen auf verschiedenen Seminaren und im Studio kam ich zu dem Schluss, dass der einzige Vorteil des PNG-Formats für viele in der ehrlichen Transluzenz liegt. Wenn Sie im Internet nach Informationen zu diesem Format suchen, fällt Ihnen leicht auf, dass Webentwickler in zwei Lager gespalten sind. Die ersten schreiben darüber, wie wunderbar dieses Format ist, indem sie rein technische Daten verwenden, die für normale Programmierer und Designer unverständlich sind (z. B. über die Überlegenheit von Deflate-Komprimierungsalgorithmen gegenüber LZW), während andere unterschiedlich dumme Kommentare über die Nutzlosigkeit von hinterlassen PNG, ohne sich überhaupt die Mühe zu machen, in die Essenz der in der Spezifikation beschriebenen Dinge einzutauchen.

Versuchen wir herauszufinden, welche Vorteile dieses Format bietet, um zu lernen, wie man sie bei der Vorbereitung von Illustrationen für das Web nutzt.

Beginnen wir mit der Terminologie. Ich gehe davon aus, dass die meisten Leser Photoshop verwenden und auf die Namen PNG-8 und PNG-24 gestoßen sind. Dabei handelt es sich nicht um zwei unterschiedliche Formate, sondern lediglich um Variationen desselben PNG. Mit dem Format können Sie drei Arten von Bildern speichern: Graustufen (ein Kanal wird zur Beschreibung des Bildes verwendet – Weiß), indizierte Farben (eine Farbpalette wird verwendet, wie bei GIF) und Echtfarben (drei Kanäle werden verwendet – RGB).

Der wichtigste Vorteil des PNG-Formats sind natürlich neue Komprimierungsalgorithmen. Jeder erinnert sich, dass GIF nur horizontale Bereiche derselben Farbe effektiv komprimiert? Diese Einschränkung können Sie jetzt vergessen:

Der zweite wichtige Vorteil ist die Zeilenfilterung (Scanline-Filterung oder Delta-Filter), dank derer der PNG-Packer viel bequemere Daten für die Komprimierung erhalten kann.

Schauen wir uns ein Beispiel dafür an, wie sie funktionieren. Nehmen wir ein 5x5 Pixel großes Bild mit einem horizontalen Farbverlauf und zeigen wir, wie es in einer Datei gespeichert werden kann (jede Zahl hat eine eindeutige Farbe).

Wie Sie dem Beispiel entnehmen können, würde ein GIF-Encoder Zeichenfolgen komprimieren, die sich horizontal nicht gut packen lassen (da sich dieselben Farben vertikal ausbreiten). So kann ein PNG-Encoder diese Daten konvertieren:

Vor jeder Zeile erschien die Zahl 2. Dies ist der Filter, der auf die Zeile angewendet wurde. In diesem Fall ist es der Up-Filter, der dem Decoder mitteilt: „Nehmen Sie für das aktuelle Pixel den Wert des darüber liegenden Pixels und addieren Sie den aktuellen Wert dazu.“ In unserem Fall ist es 0, da sich die Farben des aktuellen und des oberen Pixels nicht unterscheiden. Und diese Daten können effizienter gepackt werden, wenn wir ein ausreichend großes Bild haben.

Warum habe ich geschrieben Vielleicht? Denn in unserem idealisierten Fall wäre folgendes Schema effektiver:

Hier wird Filter 1 namens Sub angewendet, der dem Decoder sagt: „Nehmen Sie den Wert des Pixels links vom aktuellen und addieren Sie den aktuellen Wert dazu.“ In diesem Fall 1.

Nach dem Filtern werden alle Zeichenfolgen (zusammen mit den Filterwerten) zu einer Sequenz zusammengefasst, die dann mithilfe von Deflate-Algorithmen komprimiert wird (deren Diskussion würde den Rahmen dieses Artikels sprengen).

Schauen wir uns die Filter an:

Einem aufmerksamen Leser fällt möglicherweise auf, dass Filter nicht auf die gesamte Datei, sondern auf Zeilen angewendet werden.

Das bedeutet es jede die Zeichenfolge kann haben meins Filter. Es stellt sich heraus, dass es 5 Bildhöhen zum Filtern eines Bildes geben kann. Generell besteht die Aufgabe eines guten Encoders genau darin, solche Filterwerte auszuwählen, bei denen die Dateigröße minimal ist. Leider macht Photoshop seine Arbeit nicht immer gut, daher kommen verschiedene Dienstprogramme wie OptiPNG und PNGCrush zur Rettung, die in vielen Durchgängen unterschiedliche Filtermethoden und Datenkomprimierungsstrategien auswählen und so das Volumen einiger komplexer Bilder erheblich reduzieren. Beachten Sie jedoch, dass diese Programme keine Reduzierung der Größe jeder Datei garantieren, sondern lediglich versuchen, sie zu finden der beste Weg Datenkodierung.

Ein weiterer schmerzhafter Fehler von Photoshop ist, dass es nicht weiß, wie man Bilder im Graustufenmodus speichert, also nicht weiß, wie man die Farbtiefe reduziert. Auch hier ersparen wir uns die oben genannten Dienstprogramme, die nach Möglichkeit die Farbtiefe reduzieren, ohne die Bildqualität zu beeinträchtigen.

Die Vorteile von Graustufen gegenüber Truecolor liegen auf der Hand: Beispielsweise wird Weiß im ersten Fall (im Dezimalsystem) als Zahl 255 und im zweiten Fall als 16777215 geschrieben.

Mit dem Wissen über das Speichern von Daten im PNG-Format können wir es nun bei der Vorbereitung von Bildern für das Web nutzen. Mehr dazu in den folgenden Artikeln.

Sie sind hier, weil Sie eine Datei haben, deren Dateierweiterung auf „.png“ endet. Dateien mit der Dateierweiterung „.png“ können nur von bestimmten Anwendungen gestartet werden. Es ist möglich, dass es sich bei „.png“-Dateien um Datendateien und nicht um Dokumente oder Medien handelt , was bedeutet, dass sie überhaupt nicht zum Ansehen gedacht sind.

PNG-Dateien sind komprimierte Rasterbilddateien, die normalerweise für visuelle Elemente auf einer Website und anderen Webgrafiken implementiert werden. Der Bildinhalt dieser .png-Dateien besteht aus Indexfarben, die durch Bitmap-Bilder integriert werden, und die in diesen .png-Dateien implementierten verlustfreien digitalen Bildkomprimierungs- und Kodierungsspezifikationen ähneln den in GIF-Dateien integrierten Komprimierungsstandards. Das PNG-Format, auch als tragbare Netzwerkgrafiken bekannt, wurde entwickelt, um die Einschränkungen von GIF-Bildern in Bezug auf Farbunterstützung und Patentlizenzierung aufzuheben. Der Transparenzkanal dieser PNG-Dateien wurde verbessert, um 8-Bit-Unterstützung zu implementieren. CMYK-Unterstützung ist in diesen PNG-Dateien nicht verfügbar.

Starten Sie eine PNG-Datei oder eine andere Datei auf Ihrem PC, indem Sie darauf doppelklicken. Wenn Ihre Dateizuordnungen korrekt eingerichtet sind, wird die Anwendung, die Ihre PNG-Datei öffnen soll, sie öffnen. Möglicherweise müssen Sie die richtige Anwendung herunterladen oder kaufen. Es ist auch möglich, dass Sie die richtige Anwendung auf Ihrem PC haben, aber noch keine .png-Dateien damit verknüpft sind. Wenn Sie in diesem Fall versuchen, eine PNG-Datei zu öffnen, können Sie Windows mitteilen, welche Anwendung für diese Datei die richtige ist. Von da an wird beim Öffnen einer PNG-Datei die richtige Anwendung geöffnet.

Adobe Photoshop CS6 für Mac

ACD Systems Canvas 14

ACD-Systeme ACDSiehe 15

Eine PNG-Datei (Portable Network Graphic) bezieht sich auf Rasterbilder. Das PNG-Format enthält eine bestimmte Farbpalette, die in der Zeichnung verwendet wird. Dieses Grafikformat wird im World Wide Web häufig verwendet, um Webseiten mit verschiedenen Bildern bereitzustellen. Dank der Verwendung des Deflate-Komprimierungsalgorithmus Rasterbilder, mit der Dateierweiterung PNG, können ohne offensichtlichen Qualitätsverlust komprimiert werden.

Wir haben dieses Dateiformat entwickelt, um das GIF-Format zu ersetzen, da für letzteres lange Zeit ein kostenpflichtiges Format erforderlich war Software. Unter den Besitzern von Webressourcen sind PNG-Bilder für ihre hervorragenden Eigenschaften im Vergleich zu ähnlichen Formaten bekannt. PNG unterstützt Farbtiefen bis zu 48 Bit. Der Hauptunterschied zwischen GIF besteht darin, dass eine solche Grafikdatei auf nur 8 Bit (insgesamt 256 Farben) beschränkt ist. Sie sollten wissen, dass PNG im Gegensatz zu GIF keine Animationseffekte unterstützt.

Sie können eine Datei mit der Erweiterung PNG mit praktisch jedem Anzeigeprogramm öffnen. Im Operationssaal Windows-System Das Öffnen von PNG ist durch einen einfachen Doppelklick mit der Maus möglich, um die Bilder anzuzeigen. Dieses Bildformat läuft in jedem Webbrowser. Wenn der Benutzer das gespeicherte Bild in der PNG-Version ändern muss, reicht es aus, Bildbearbeitungsprogramme wie Adobe Photoshop oder Microsoft Windows Photos sowie Corel PaintShop oder ACD Systems zu verwenden.

Diese Dateierweiterung ist sehr beliebt und enthält alle notwendigen Grafikinformationen für Vollfarbbilder von guter Qualität.