PNG-Bilder statt JPG und GIF?

Bildformate neu entdecken

JPG und GIF dominieren im Web nach wie vor. Doch das PNG-Format ist inzwischen ebenfalls problemlos einsetzbar und bietet einige wesentliche Vorzüge.

© Archiv

Bildformate neu entdecken

Die dominierenden Bildformate im Internet sind bis heute JPG und GIF. Dagegen machte PNG (Portable Network Graphics) vor allem bis einschließlich Version 6 des Internet Explorers nicht unerhebliche Probleme. Eigentlich schon 1985 entwickelt, fristete PNG zu Beginn ein Schattendasein.Das Problem waren die Kosten - das von Unisys und Compuserve entwickelte Format war lizenzpflichtig und wurde somit bis zum Auslaufen des Patents von weiten Teilen der Netzgemeinde einfach ignoriert.

Genau betrachtet vereint PNG die Vorzüge der beiden anderen Bildformate und kann Grafiken mit bis zu 48 Bit Farben abspeichern und trotz allem verlustfrei komprimieren. Dabei stehen eine Qualität von 16 Millionen Farben sowie 256 Transparenzstufen zur Verfügung.

Alphatransparenz

Der wesentliche Vorteil von PNG ist jedoch die Umsetzung der Alpha Transparenz. Bei GIF können Sie zwar eine Farbe wählen und diese transparent darstellen, mehr ist jedoch nicht möglich. Außerdem handelt es sich dabei auch um eine binäre Entscheidung, denn Sie können für einen Farbwert die Transparenz entweder aktivieren oder nicht. Ein Transparenzwert von 50 Prozent ist technisch mit GIF nicht realisierbar.

Eines der Hauptargumente für PNG ist die Funktionalität in diesem Umfeld. Das richtige Grafikprogramm wie Gimp oder Photoshop vorausgesetzt, können Sie Ihre Bilder entsprechend bearbeiten und anschließend auch im Web darstellen.

Einsatzgebiete

Eine Darstellung, die Sie mit PNG einfach realisieren können, ist beispielsweise der Backscreen-Effekt, bei welchem Sie einen festen Hintergrund haben und auf einem transparenten Layer, der ein wenig vom Hintergrund abgehoben ist, die Inhalte darstellen.

Wenn Sie dies ohne PNG umsetzen, benötigen Sie zwei Versionen des Hintergrundbilds: eine Datei mit dem eigentlichen Hintergrund, der eine normale Grafik darstellt und eine weitere Datei, welche bereits vordefiniert die Transparenz mitbringt.

Mit PNG benötigen Sie zwar auch zwei Dateien, die Umsetzung ist jedoch deutlich einfacher: Neben der eigentlichen Hintergrunddatei mit beliebigem Format ist nur noch eine PNG-Datei notwendig, beispielsweise ein schwarzes oder weißes Quadrat mit einem halbtransparenten Hintergrund.

Mit diesem Ansatz ist der Hintergrund immer noch sichtbar, aber Sie haben eine Arbeitsfläche, auf der Sie Ihre Inhalte darstellen können. Beim Aufbau dieser Seite müssen Sie nur wenig beachten. In der HTML-Seite setzen Sie lediglich über CSS Ihr Hintergrundbild.

<style type="text/css" media="screen">
body { background: #000000
url(hintergrund.jpg) 50% 0 no-repeat;}</style>

Damit die Darstellung auch ordnungsgemäß erfolgt, sollten Sie zusätzlich darauf achten, dass Sie Ihren HTML-Header komplett konfigurieren.

<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/
xhtml" xml:lang="de" lang="de">

Im nächsten Schritt kommt die PNG-Grafik zum Einsatz. Dazu setzen Sie ein div-Tag und weisem diesen anschließend die transparente PNG-Grafik zu. Ihre HTML-Seite erweitern Sie im Body-Bereich wie folgt:

<div id="png_rahmen">Content</div>

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.