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.

Bildformate neu entdecken

© 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 zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".