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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…
News
Video
SciFi-Action mit Ryan Gosling und Harrison Ford
Video
Agatha-Christie-Verfilmung mit Johnny Depp
Video
Kinostart: 23.11.2017