Bilder im WWW ulmeier.ch 1

Bilder im WWW

Bilder im WWW ulmeier.ch 2

Was sind Bilder?

Aufbau von Bildern Grösse Bildmasse in Pixel Auflösung Bildauflösung in dpi

Aus diesen Grössen ergibt sich das Gewicht Dateigröße in KB

Bilder im WWW ulmeier.ch 3

Grösse

Verwendungszweck Layout Aussage Bildschirmgrösse

Ideal für Website (1/4 Seite) 400*500px

Bilder im WWW ulmeier.ch 4

Auflösung

Anzahl Pixel in einer Strecke

10 Dots (Pixel)/Inch(25.4mm)

10 dpi100 dpi => 10x10 Pixel

Verdoppelung der Auflösung vergrössert die Datenmenge um das Vierfache

Bilder im WWW ulmeier.ch 5

BILDAUFLÖSUNG

Bildschirmdarstellung Ein Bildschirm kann in der Regel eine

Auflösung von 72 dpi wiedergeben Eine höhere Auflösung bringt ausser einer

unnötig grossen Datenmenge keine Qualitätsverbesserung

Bilder im WWW ulmeier.ch 6

BILDAUFLÖSUNG

Websites Empfohlene Basisgrösse für Bilder

425 x 283 Pixel mit Auflösung 72 dpi Dateigrösse ca. 36 KB Um grosse Ladezeiten zu vermeiden

sollten grosse Dateimengen vermieden werden

Bilder in JPEG oder GIF komprimieren Summe aller Bilder max. 100 – 120 Kbyte

Bilder im WWW ulmeier.ch 7

Auflösung optimieren

Web => 72 dpi Bildschirm => 96 dpi Word => 150 dpi Druck => 300 dpi

Bilder im WWW ulmeier.ch 8

Dateiformate

JPEG GIF PNG

Bilder im WWW ulmeier.ch 9

DATEIFORMATE

JPEG Joint Photographers Expert Group Komprimierungsformat Rechnet Bilddaten bis auf 10% der

Dateigrösse herunter Damit verbunden sind natürlich

Qualitätsverluste Einsatz vor allem im Web-Bereich

Bilder im WWW ulmeier.ch 10

DATEIFORMATE

GIF Graphic Interchange Format Komprimierungsformat Bilder werden auf 256 Farben reduziert noch kleinere Datenmengen als JPEG Unterstützt zudem die Abspeicherung

transparenter Flächen Einsatz vor allem im Web-Bereich

Bilder im WWW ulmeier.ch 11

PNG

Portable Network GraphicsVorteile von JPEG und GIF 16.7 Mio Farben Transparenz

Nachteil Internet Explorer (- IE 6.0) keine

Transparenzen möglich

Bilder im WWW ulmeier.ch 12

Bilder optimieren

Programme Irfan View Microsoft Office Picture Manager Photoshop Elements Gimp Photoshop

Weitere……