U6: Webgerechte Bilder

Größe: px

Ab Seite anzeigen:

Download "U6: Webgerechte Bilder"

Felix Engel
vor 5 Jahren
Abrufe

Konzeption Gestaltung U6: Webgerechte Bilder BILDAUFLÖSUNG UND GRÖSSE Auflösung bestimmt die Anzahl an Punkten (dots), die pro Längeneinheit (cm oder inch) zur Verfügung steht und wird demzufolge n

1 Konzeption Gestaltung U6: Webgerechte Bilder BILDAUFLÖSUNG UND GRÖSSE Auflösung bestimmt die Anzahl an Punkten (dots), die pro Längeneinheit (cm oder inch) zur Verfügung steht und wird demzufolge n der Einheit dpi (dots per inch) oder dpcm (dots per cm) angegeben. Um eine optimale Bildqualität zu erreichen, muss die Bildauflösung hoch genug sein und beispielsweise 300 dpi betragen. Physikalische Auflösung Die physikalische Auflösung gibt an, wie viele Bildpunkte (Pixel) pro Längeneinheit (inch) dargestellt werden. Die Einheit ist ppi (pixel per inch). Früher 72 oder 96 ppi - Heute stimmt dies nicht mehr (Vielzahl an internetfähigen Endgeräten mit unterschiedlicher Auflösung) Hierbei geht der Trend eindeutig in Richtung hohe Auflösungen von 400 ppi oder höher. Die Pixel werden also immer kleiner und die Bildqualität hierdurch immer besser. Logische Auflösung Im Unterschied zur physikalischen gibt die logische Auflösung die absolute Anzahl an Bildpunkten (Breite x Höhe) in Pixel (px) an. Ein Bild mit einer Größe von x 640 Pixel würde das Display des iphones komplett füllen, das Display des Mac Books jedoch nicht einmal zu einem Viertel. Relative Angaben Sie erkennen, dass Sie durch Angabe der logischen Auflösung ein Bild immer nur an bestimmte Endgeräte anpassen können. Aus diesem Grund geht man beim Webdesign mehr und mehr dazu über, mittels CSS3 relative Angaben zu machen, die sich auf die Größe des Displays oder Browserfensters beziehen. Beispiel: Durch die Angabe width: 100% wird festgelegt, dass das Bild immer die gesamte Breite des Displays bzw. Browserfensters haben soll. Es wird also in Abhängigkeit vom Endgerät skaliert. Bildgröße Konflikt: Bilder zu klein = schlechte Auflösung Bilder zu groß = lange Ladezeiten Es muss deshalb immer ein Kompromiss zwischen Bildgröße und Dateigröße gefunden werden. Dateigröße Beispiel: RGB-Bild in Full-HD x x 24 Bit = Bit Nehmen wir eine hohe Downloadrate von 5 MBit/s = Bit/s an, so würde der Download des Bildes dennoch knapp 10 s dauern! Das Rechenbeispiel zeigt, dass die Datenmenge unkomprimierter Bilder für die Nutzung im Internet deutlich zu hoch ist. Es kommen deshalb nur Dateiformate in Frage, die die Dateigröße reduzieren.

PIXELGRAFIKEN GIF Graphics Interchange Format Veteran der Dateiformate auf Webseiten - neuere PNG-Format GIF in etlichen Punkten überlegen - immer noch sehr viele GIF- Bilder im Internet -

2 PIXELGRAFIKEN GIF Graphics Interchange Format Veteran der Dateiformate auf Webseiten - neuere PNG-Format GIF in etlichen Punkten überlegen - immer noch sehr viele GIF- Bilder im Internet - komprimiert Bilder verlustfrei nach dem LZW-Algorithmus. maximal 256 Farben speichern (in Farbtabelle angezeigt; einzelne Farben löschbar, A transparent anlegbar) Perzeptiv werden Farben die durch unsere Augen am besten wahrgenommenwerden Selektiv ist auch eine perzeptive Farbtabelle, wobei jedoch Webfarben und breite Farbbereiche bevorzugt werden. Wenn die Grafik weniger als 256 Farben enthält, empfiehlt es sich, die Farben auf die benötigte Anzahl zu reduzieren. Hierdurch lässt sich die Dateigröße etwas verringern. B GIF gestattet es, eine oder mehrere Farbe(n) transparent zu machen D. Markieren Sie hierzu die Farbe(n) in der Tabelle A und klicken Sie auf das Transparenz-Icon E. D & E Dithering = Simulation von Farben. Dies bedeutet, dass nicht vorhandene Farben vorgetäuscht werden, indem man Pixel mit ähnlichen Farben mischt. Diffusion ist die gewählte Dithering-Methode. Sie streut die Pixel nach einem Zufallsmuster und erzielthiermit sehr gute Ergebnisse. Interlaced = Bild erscheint im Internet nach und nach und wird dabei schärfer Wegen der Beschränkung auf 256 Farben eignet sich das GIF-Format nicht für Fotos oder andere Vorlagen mit vielen Farben. Für GIF geeignet sind hingegen: Infografiken, Diagramme, Buttons, Logos, Strichzeichnungen, Schrift F G

JPG Joint Photographic Experts Group Kompressionsverfahren DCT (Diskrete Cosinus Transformation) mehrstufiges mathematisches Verfahren reduziert Datenmenge deutlich ABER: Qualität bleibt erhalten

Bildaufbau (schrittweise, allmählicher Bildaufbau) B Die Möglichkeit des Einbindens von ICC-Profilen E spielt im Druck eine wichtige Rolle im Internet bislang (noch) nicht.

3 JPG Joint Photographic Experts Group Kompressionsverfahren DCT (Diskrete Cosinus Transformation) mehrstufiges mathematisches Verfahren reduziert Datenmenge deutlich ABER: Qualität bleibt erhalten Kompression allerdings verlustbehaftet Farbumfang erhalten (RGB-Bild bis zu 16,7 Mio Farben) A Bildqualität kann eingestellt werden Hohe Qualität = hohe Datenmenge, Ladezeit Progressiv = sukzessiver Bildaufbau (schrittweise, allmählicher Bildaufbau) B Die Möglichkeit des Einbindens von ICC-Profilen E spielt im Druck eine wichtige Rolle im Internet bislang (noch) nicht. Wenn Sie JPEG-Bilder für den Druck verwenden möchten, dann sollte die Qualität B immer auf 100 eingestellt werden. E Aufgrund des vollen Farbumfangs eignet sich JPEG immer dann, wenn Ihre Vorlagen viele Farben enthalten: Fotografien, Bilder mit Farbverläufen, Bilder mit Effekten und Filtern Bei scharfen Konturen wie bei Text oder in Grafiken hat das Kompressionsverfahren jedoch Schwächen und führt zu einem Verschmieren der Konturen. Sie erkennen dies bei starker Vergrößerung der Vorlage. Erkennbar wird die typische Blockbildung von 8 x 8 Pixel (roter Rahmen), die zu einer Vermischung der ursprünglich getrennten Farben führt

PNG Portable Network Graphics Es gibt zwei Versionen: PNG-8 und PNG-24 PNG-8 beschränkt die Farbanzahl auf 8 Bit = 256 (2 8 ) Farben und smöglichkeiten = gleich wie GIF-Dateien PNG-24 unbeschränkte

4 PNG Portable Network Graphics Es gibt zwei Versionen: PNG-8 und PNG-24 PNG-8 beschränkt die Farbanzahl auf 8 Bit = 256 (2 8 ) Farben und smöglichkeiten = gleich wie GIF-Dateien PNG-24 unbeschränkte Farbe = bis zu 16,7 Mio Farben - komprimiert verlustfrei (keine JPG Artefakte) - höhere Datenmengen - Qualität und Datenmenge nicht beeinflussbar - hat 8-Bit-Alphakanal für Transparenz = echte Freisteller möglich! WEBP neues von Dateiformat von Google bessere Kompression als JPG UNTERSTÜTZT: ICC-Profile, Transparenz, Animation

VEKTORGRAFIKEN unabhängig von ihrer Größe immer dieselbe hohe Qualität = verlustfrei skalierbar Vorteil bei Responsive Webdesign Unterstützte Grafiken: SVG Canvas SWF Proprietäres Format von Adobe

-Schriften als Pfade abspeichern (= Zeichensatzder Schrift nicht mehr erforderlich) -Animation -Einbindung von Pixelgrafiken Infografiken, Diagramme, Animierte Grafiken, Schriften (als Grafik)

5 VEKTORGRAFIKEN unabhängig von ihrer Größe immer dieselbe hohe Qualität = verlustfrei skalierbar Vorteil bei Responsive Webdesign Unterstützte Grafiken: SVG Canvas SWF Proprietäres Format von Adobe Flash SVG (Scalable Vector Graphics) SVG = XML-konforme Sprache (HTML5 direkt einbetten) -> dynamische Grafiken - sehr geringe Datenmengen. -Schriften als Pfade abspeichern (= Zeichensatzder Schrift nicht mehr erforderlich) -Animation -Einbindung von Pixelgrafiken Infografiken, Diagramme, Animierte Grafiken, Schriften (als Grafik) SVG-Vektorgrafiken werden aus Adobe Illustrator erzeugt Canvas ist mit HTML5 neu eingeführtes Element zur Erstellung von Vektorgrafiken -werden mit JavaScript erzeugt (HTML5 direkt eingefügt) - Linien, Rechtecke, Kreise, Ellipsen, Bézierkurven, Farbverläufe, Transparenzen,Text -Datenmenge sehr klein. -Einfache Animationen (drehen, skalieren, rotieren) möglich -Pixelgrafiken (Formate: PNG, GIF, JPEG) können eingebunden werden smöglichkeiten = wie bei SVG

Ähnliche Dokumente

Tagged Image File Format. Im Printbereich neben EPS sehr verbreitet.

Tagged Image File Format. Im Printbereich neben EPS sehr verbreitet. 1.1 Pixelgrafik (auch ) Beispiel: Bei en wird das Bild in kleine Quadrate (Pixel) zerlegt. Für jedes Pixel wird die entsprechende Farbe gespeichert. Ein Foto kann nur durch eine große Zahl von Pixeln realistisch