Grafik-Formate im Webbrowser

Wegen der Breite einiger Abbildungen empfehlen wir die rechte Spalte mit den aktuellen Meldungen auszublenden!

In den Anleitungen wird eine spezielle Schreibweise verwendet.

Ihr Webbrowser sollte die Standardgrafikformate PNG, JPEG , GIF und BMP darstellen können.

SVG können alle neueren Webbrowser wie Firefox, SeaMonkey, Opera, Safari außer Internet-Explorer, da braucht man ein Plugin. Leider ist das Verhalten bei SVG je nach Browser noch unterschiedlich.

Die übrigen Grafikformate sind zum Experimentieren gedacht, also kein muss.

Inhalt

• Grafiken (Webformate)
  • PNG-Format
  • JPEG-Format
  • GIF-Format
  • BMP-Format
  • Scalable Vector Graphics
    • Quelltext Analyse bei eingebetteten SVG-Formaten
• Grafiken (Sonstige)
  • TIFF-Format
  • Photoshop PSD-Format
  • JPEG2000 Image
  • Sun Raster Image

Grafiken

Grafiken

	Test	Beschreibung	Dateitypen	MIME-Type	Plugin / Anwendung empfohlen
	Abb. PNG-Beispiel eingebettet PNG-Beispiel download (Bei eingeschalteten JavaScript als Popup).	PNG-Format	*.png	image/png	Firefox
	Abb. JPEG-Beispiel eingebettet Abb. JPEG-Beispiel download (Bei eingeschalteten JavaScript als Popup).	JPEG-Format	*.jpeg *.jpg *.jpe	image/jpeg	Firefox
	Abb. GIF-Beispiel eingebettet Abb. GIF-Beispiel download (Bei eingeschalteten JavaScript als Popup).	GIF-Format	*.gif	image/gif	Firefox
	Abb. BMP-Beispiel eingebettet BMP-Beispiel download (Bei eingeschalteten JavaScript als Popup).	BMP-Format	*.bmp		Firefox
	Abb. TIFF-Beispiel eingebettet Abb. TIFF-Beispiel download (Bei eingeschalteten JavaScript als Popup).	TIFF-Format	*.tiff *.tif	image/tiff	Adobe Photoshop, Irfan View, Safari
	TIFF-Testbild aus dem Mozilla Plugin Support	TIFF-Format	*.tiff *.tif	image/tiff	Quicktime Player
	PSD-Beispiel download (Bei eingeschalteten JavaScript als Popup).	Photoshop PSD Format	*.psd		Adobe Photoshop, Irfan View
	Abb. SVG-Beispiel eingebettet aus Wikipedia Im Firefox-Browser wird das in SVG eingebettete PNG Bild angezeigt. Testbild aus Wikipedia	Scalable Vector Graphics	*.svg *.svgz	image/svg+xml	Firefox, Internet-Explorer mit Renesis Player Plugin Adobe Illustrator
	Abb. SVG-Beispiel eingebettet (RRZE lokal) Abb. SVG-Beispiel download (Bei eingeschalteten JavaScript als Popup).	Scalable Vector Graphics	*.svg *.svgz	image/svg+xml	Opera, Safari, Adobe Illustrator
	Abb. SVG-Beispiel eingebettet (Wikipedia lokal) Abb. SVG-Beispiel download (Bei eingeschalteten JavaScript als Popup).	Scalable Vector Graphics	*.svg *.svgz	image/svg+xml	Opera, Adobe Illustrator
	W3C Scalable Vector Graphics (SVG) 1.1 Test Suite	Scalable Vector Graphics	*.svg *.svgz	image/svg+xml	Siehe Quelltext Analyse bei eingebettetten SVG-Formaten
	Abb. JPEG 2000-Beispiel eingebettet JPEG 2000-Beispiel download (Bei eingeschalteten JavaScript als Popup).	JPEG 2000	*.jp2, *jpf	image/jpeg2000 image/jpeg2000-image image/x-jpeg2000-image	QuickTime Plugin, Irfan View Photoshop mit JPEG2000.8BI
	JPEG2000-Testbild aus dem Mozilla Plugin Support	JPEG 2000	*.jp2, *jpf	image/jpeg2000 image/jpeg2000-image image/x-jpeg2000-image	QuickTime Plugin,
	Testbild aus den Plugger Testing Grounds	Sun Raster Image	*.ras *.rs	image/x-sun-raster	Irfan View

Beim SVG-Format kommt es bei den unterschiedlichen Browsern noch zu Ungereimtheiten. Der InternetExplorer braucht ein zusätzliches Plugin.

Für das JPEG 2000-Format sind zusätzlche Plugins erforderlich.

PNG-Format

Das Portable Network Graphics Format (PNG) ist ein Grafikformat für Rastergrafiken mit verlustfreier Bildkompression.

PNG: Portable Network Graphics (Wikipedia)

Opera kann die Transparenz in PNG-Grafiken nicht darstellen, wie man an den farbigen Punkten sieht.

JPEG-Format

Das JPEG File Interchange Format (JFIF) ist ein verlustbehaftetes Grafikformat zur Speicherung von Bildern, die nach der JPEG-Norm komprimiert wurden.

JPEG: File Intechange Format (Wikipedia)

 GIF-Format

GIF Das Graphics Interchange Format (GIF) ist ein Grafikformat mit guter verlustfreier Komprimierung für Bilder mit geringer Farbtiefe.

Darüber hinaus können mehrere Einzelbilder in einer Datei abgespeichert werden, die von Webbrowsern als Animationen interpretiert werden.

GIF: Graphics Interchange Format (Wikipedia)

 BMP-Format

Windows Bitmap (BMP) ist ein zweidimensionales Rastergrafikformat.

BMP: Windows Bitmap (Wikipedia)

 TIFF-Format

Das Tagged Image File Format (TIFF oder auch kurz TIF) ist ein Dateiformat zur velustfreien Speicherung von Bilddaten.

TIFF: Tagged Image File Format (Wikipedia)

 Photoshop PSD-Format

Photoshop Document (PSD) ist das Standard Dateiformat von Adobe Photoshop.

PSD: Photoshop Dokument (Wikipedia)

 Scalable Vector Graphics

Scalable Vector Graphics (SVG) ist ein Standard zur Beschreibung zweidimensionaler Vektorgrafiken in der XML-Syntax

Scalable Vector Graphics (Wikipedia)

Internet-Explorer-Plugin und Standalone Anwendung zur Anzeige von SVG-Grafiken.
Impressive Features: Fast and smart rendering of SVG Contents in a new level of quality and efficiency

Renesis Player (Download)

Adobe SVG Viewer Download Area (Adobe stellt den Support am 1.1.2009 ein)

• SVG Support in Firefox
• SVG Support in Opera
• W3C Scalable Vector Graphics (SVG) 1.1 Test Suite
• Adobe SVG Viewer - Scalable Vector Graphics - Examples

Quelltext Analyse bei eingebetteten SVG-Formaten

Eine Analyse der Quelltextes der Beispiele der W3C Scalable Vector Graphics (SVG) 1.1 Test Suite zeigt, dass das Verhalten bei SVG Grafiken in verschiedenen Webbrowsern unterschiedlich ist.

Tests in HTML using the <object> element:

Beispiel SVG www.w3.org

Ok: Firefox, Safari, Opera
Not ok::Internet-Explorer

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN">

<object data="../svggen/color-prof-01-f.svg" width="480" height="360" type="image/svg+xml"/>

Tests in HTML using <embed> element:

Beispiel SVG www.w3.org

Ok: Firefox, Safari, Opera, Internet-Explorer

<!DOCTYPE html PUBLIC  "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
<embed src="../svggen/color-prof-01-f.svg" width="480" height="360"/>

Tests in SVG using <image> element:

Beispiel SVG www.w3.org

Not ok::Firefox, Safari, Internet-Explorer, Opera

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<image id="svgImage" xlink:href="../svggen/color-prof-01-f.svg" height="360" width="480" y="77" x="10" />

Webdokumente des RRZE <img> Element:

SVG-Beispiel eingebettet (RRZE lokal)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<img alt="Abb. SVG-Beispiel eingebettet" src="bilder/rrze.svg" width="170"  height="98" /><br />

Ok: Opera
Not ok::Firefox, Safari, Internet-Explorer

JPEG 2000

JPEG 2000 ist ein Standard (ISO 15444) zur Bildkomprimierung, der auf der diskreten Wavelet-Transformation (DWT) beruht. Wie das bekannte JPEG ist er von der Joint Photographic Experts Group herausgegeben. JPEG 2000 beherrscht sowohl verlustfreie als auch verlustbehaftete Komprimierung

 JPEG 2000 (Wikipedia)

 Sun Raster Image

Sun Raster ist ein Grafik-Dateiformat von Sun.

MIME-Type: image/x-sun-raster

Letzte Änderung: 13. Maerz 2012, Historie