Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Tutorial - Bildkomprimierung für Webseiten
zurück: Hintergrund-Grafik zentrieren weiter: tabelle von 2 seiten nebeneinander drucken Unbeantwortete Beiträge anzeigen
Neues Thema eröffnen   Neue Antwort erstellen     Status: Diskussion Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
maninweb
Microsoft Excel MVP 2014


Verfasst am:
21. Jan 2007, 10:26
Rufname: maninweb
Wohnort: Aachen

Tutorial - Bildkomprimierung für Webseiten - Tutorial - Bildkomprimierung für Webseiten

Nach oben
       

Hallo zusammen...

Zum Einstieg in das Forum ein weiteres kleines Tutorial, welches ein
paar Grundtechniken, speziell für Anfänger und Anfängerinnen, in Bezug
zur Bildkomprimierung erklären soll. Anregungen sind natürlich willkommen.

1. Einleitung

Kaum eine Webseite kommt heutzutage ohne Bilder aus. Es bedarf
jedoch einer gewissen Vorbereitung, Grafiken und Fotos für das Web
aufzubereiten. Dieses kleine Tutorial soll ein kleiner Wegweiser zur
Bildoptimierung sein.

Die gelungene Komprimierung setzt natürlich die Qualität des Original-
bildes voraus. Unscharfe, unter- oder überbelichtet Fotos sind bis zu
einem gewissen Maße noch mit guter Bildbearbeitung zu retten, was
aber entsprechende Erfahrung voraussetzt, ansonsten sollte auf deren
Gebrauch verzichtet werden.

Der erste Schritt, bevor wir an die weitere Verarbeitung gehen, ist eine
Kopie des Bildes zu erstellen. Nichts ist ärgerlicher als ein Bild zu
vergeigen und kein Original mehr zur Verfügung zu haben.

Grundsätzlich sollte das zu komprimierende Bild in die Größe skaliert
werden, in der es nachher auf der Webseite eingebunden wird.

Möchte man beispielsweise ein Bild mit 200 Pixel x 400 Pixel in die Seite
einfügen so verbietet es sich ein 1024px x 860px mit den HTML Angaben
width und height auf die gewünschte Größe zu skalieren. Die Qualität der
Darstellung wird unterirdisch sein. Und ausserdem würden deshalb nicht
weniger Bytes geladen.

Die meisten Bildbearbeitungsprogramme bieten die Möglichkeit die Bild-
größe zu manipulieren. Dies geht entweder über Prozentangaben oder direkt
mit der Eingabe der Höhe oder Breite in Pixel. Dabei sollte auf propor-
tionale Skalierung geachtet werden. Meist findet sich in diesem Dialog-
fenster auch eine Angabe über die Auflösung des Bildes. Da eine Webseite
ausschließlich auf dem Monitor dargestellt wird, reicht eine Auflösung
von 72 dpi (dots per inch) für den PC aus. So, nun haben wir die Voraus-
setzung für die Komprimierung geschaffen.

Jetzt muss entschieden werden welches Dateiformat zur Anwendung kommt.
Wir beschränken uns in diesem Tutorial auf die zwei gängigsten Formate
GIF und JPEG. Grundsätzlich kann man als Faustregel zur Wahl der Formate
sagen, das flächige Grafiken, Logos, Banner und Schrift, sowie S/W Bilder
am besten als GIF wiedergegeben werden. Fotos, Grafiken mit Farbverläufen
und kontrastreiche Bilder sollten als JPG komprimiert werden.

2. Das GIF-Format

Das GIF-Format stammt vom amerikanischen Online-Dienst CompuServe.
Es enthält eine Farbpalette, die 256 Farben - 8 Bit pro Pixel - umfasst.

Seit 1987 bietet das GIF-Format auch die Möglichkeit des Interlaced Modus.
Die Grafik wird beim Laden nicht zeilenweise eingelesen und aufgebaut,
sondern schichtweise. Die Grundstruktur der Grafik ist insofern sehr
schnell am Bildschirm verfügbar. Beim weiteren Einlesevorgang wird die
Grafik dann immer deutlicher und feiner aufgelöst.

Eine weitere Besonderheit des GIF-Formats ist das Darstellen einer
transparenten Hintergrundfarbe. Die Grafik kann also nahtlos in den
Hintergrund des HTML-Dokumentes eingefügt werden.

3. Das JPEG-Format

Der Name JPEG stammt von der Joint Photographic Experts Group, die den
JPEG-Kompressionsalgorithmus entwickelt hat. JPEG ist ein Algorithmus
zum Komprimieren verschiedenster Graphikformate. Dieses Format ist
in der Lage ca. 16 Mio. Farben darzustellen. Der Algorithmus besteht
zwar aus 5 Stufen, stark vereinfacht kann man sich das so vorstellen,
dass in Pixelquadraten von minimal 4 Pixeln (bei stärkerer Komprimierung
entsprechend mehr) ein Durchschnittsfarbwert gebildet wird.

Die JPEG-Kompression ist ein verlustbehaftetes Verfahren. Ist ein Bild
einmal komprimiert, lassen sich die Originaldaten nicht mehr herstellen.
Jedes weitere Abspeichern der Datei führt zu einer wiederholten
Komprimierung

4. Beispiele

Jetzt sollte es schon leichter sein zu entscheiden welches Format grund-
sätzlich zu wählen ist. An zwei Beispielen wollen wir mal die verschiedenen
Möglichkeiten durchgehen, um zu einem optimalen Ergebnis zu gelangen.

Fangen wir mit folgendem Bild an und stellen uns vor das Original läge
als Vektorgrafik - z.B. Corel Draw, Illustrator oder Freehand-Datei - vor…



Das Bild hier oben ist ein klassisches Beispiel für eine GIF-Komprimierung.
Wir haben hier eine flächige Grafik mit Schrift. Also speichern wir das Bild
als Kopie im GIF-Format ab, zunächst mit 256 Farben im Interlaced Modus.
Da jedes Grafikprogramm ein bisschen anders ist, suche nach Möglich-
keiten in diesem das Bild zu exportieren, Speichern unter, Umwandeln
oder ähnlichem. Wir erhalten eine Datei, die ca. 8 Kb groß ist.

Jetzt werden wir noch ein wenig daran rumschrauben, um die Dateigröße
zu verringern. Wir sehen, dass 256 Farben ein wenig überdimensioniert
sind und gehen in diesem Bereich runter:



So, hier habe ich nun 4 Farben im Interlaced Modus gewählt. Die Datei ist
nur noch 3 Kb groß. Wir sehen aber, dass ein Treppcheneffekt entsteht.
Nicht sehr schön. Ok, also noch mal, diesmal mit 16 Farben, wobei immer
mit 'Kopien' gearbeitet wird.



Das sieht schon ganz gut aus. Die Datei ist mit 4 Kb freundlich klein.
Da sie auch sehr schnell geladen sein wird können wir auch auf den
Interlaced Modus verzichten.

Was wäre denn, wenn wir das JPEG-Format für das Bild hier oben
gewählt hätten? In ähnlicher Dateigröße käme folgendes heraus:



Gruselig, nicht wahr? Um nur annähernd an die Qualität des GIF’s
heranzukommen bläht sich die JPG-Datei auf 12 Kb auf:



Somit wäre eine JPG-Datei um das dreifache größer als die GIF-Datei.
Ok, es ist hier nur ein Bild, aber was, wenn die Website viele Bilder
enthält, z.B. für's Menü, Teaser usw.? Dann machen sich die Bytes
durchaus bemerkbar und die Webseite lädt sich deutlich langsamer.

Nun ein Beispiel zum klassischen JPG-Format. Als Beispiel habe ich ein
Motiv - vielen Dank an photocase.com - gewählt, das grundsätzlich als
JPG komprimiert werden sollte. Das sind z.B. Darstellungen des Menschen,
Bilder mit Verläufen oder Fotos. Hier beinhaltet das Foto durch die Haut-
farbe eine größere Farbtiefe. Das folgende Bild habe ich schon mal
'vorkomprimiert', um das Forum hier nicht mit megagroßen Bildern
zu belasten. Dieses Foto ist mit einer 10%igen, oder Stufe 9-Kompression
abgespeichert (je nach Grafikprogramm). Die Dateigröße beträgt 13 Kb.
Ohne Komprimierung läge die Größe im JPG-Format bei ca. 50 Kb.



Wie Du siehst, ist das Bild scharf. Wenn man die 50Kb ins Verhältnis zu
den 13 Kb setzt, erkennt man man den Vorteil der JPG-Komprimierung.
Selbst bei einer sehr geringen Kompression ist die Qualität vom Original
kaum zu unterscheiden. Nun wollen wir aber sehen, ob wir die Größe
noch weiter nach unten drücken können...



Oups, das war wohl ein wenig zuviel des Guten. Bei Stufe 3, also hoher
Kompression über 80%, beträgt die Dateigröße zwar nur 3 Kb aber es
treten unschöne, so genannte Artefakte auf. Daran kann man sehr schön
sehen, wie sich die Komprimierung auswirkt. Wie schon oben erwähnt
wird eine Anzahl von Pixel im Quadrat auf eine Durchschnittsfarbe
zusammengefasst. Sind die Quadrate zu groß sieht das Bild sehr
verpixelt aus. Also wählen wir mal einen schönen Mittelwert von
Stufe 6 – 7, oder 60 – 70%.



Dies ist ein sehr zufrieden stellendes Ergebnis. Das Bild ist vom Original
nicht zu unterscheiden und hat eine Größe von 5 Kb. Damit kann man
prima leben. Im Gegenzug machen wir mal den Versuch diese Bild als
GIF zu komprimieren. Mit gleicher Dateigröße sähe das so aus:



Dieses Bild ist zwar nur 7 Kb groß, dafür musste es aber auf 8 Farben
reduziert werden. Mit 256 Farben kommen wir auf sage und schreibe
30 Kb. Also keine wirkliche Alternative!



5. Transparenzfarbe setzen

Bilder sind ja nicht immer rechteckig. Deshalb entsteht häufig die Anfor-
derung eine Transparenzfarbe zu setzen, so dass nur noch Konturen oder
Teilinhalte des Bildes zu sehen sind. Grundsätzlich kann eine Transparenz-
farbe nur bei bestimmten Bildformaten gesetzt werden. Das geht bei
den hier vorgestellten Typen nur bei GIF-Bildern. Betrachten wir mal
unser GIF von vorhin. In der Regel kann man im Grafikprogramm eine
Farbe als 'Transparent' bestimmen, hier bei unserem GIF habe ich
zunächst mal 'weiss' als transparente Farbe gesetzt.

Solange der Hintergrund der Webseite weiß ist, ist alles in Ordnung.
Aber angenommen ich möchte gerne einen blauen Hintergrund haben.
Das Ergebnis könnte dann so aussehen:



Nicht wirklich optimal. Am Besten ist es also die Hintergrundfarbe des
Bildes der der Webseite anzupassen.



6. Schlussworte

Es empfiehlt sich bei der Bildkomprimierung ein wenig mit den
Einstellungen zu experimentieren, bis das Ergebnis zufrieden
stellend ist.

Gut komprimierte Bilder sind ein Aushängeschild für Sorgfalt und
Professionalität, und erfreuen die Besucher/innen Eurer Website.

Ich hoffe, dass Euch dieses Tutorial gefallen hat und machem bzw.
mancher ein wenig weiter geholfen hat.

Gruss

_________________
Der größte Aberglaube der Gegenwart ist der Glaube an die Vorfahrt.
Jacques Tatischeff - auch bekannt als Jacques Tati
20FCC4FD0E3240C59522E3F0C4695941
SG ;-)
Freizeitprogrammierer


Verfasst am:
13. Okt 2013, 21:44
Rufname:


AW: Tutorial - Bildkomprimierung für Webseiten - AW: Tutorial - Bildkomprimierung für Webseiten

Nach oben
       

Hallo,

man sollte vielleicht noch anmerken, dass für die Wiedergabe von Screenshots weder JPG noch GIF wirklich optimal sind, das gilt für JPG per se, und für GIFs wenn die Anzahl der der Farben 256 übersteigt. Grund: der JPG-Algorithmus zerstört die Kantenschärfe, und GIFs können mehr als 256 Farben nur durch Dithering (= Farbrasterung) darstellen. Alternativ blieben da z.B. das .BMP- oder das PIC-Format, die mehr Farben darstellen können als GIF bei absoluter Kantenschärfe, allerdings sind diese Formate in Ermangelung effizienter Kompression nur bei kleineren Bildern anzuraten.
Bzw bei PICs ist es meines Wissens möglich per LZH zu komprimieren, das ist verlustfrei und so effizient, wie möglich.
Auch nicht ganz unwichtig: um Screenshots optimal zu skalieren sollte man auf "weiche" Interpolationsverfahren wie z.B. "Bikubisch" verzichten. Screenshots am besten immer per "Pixelwiederholung" skalieren.

Grüße

_________________
Problem exists between keyboard and chair...^^
Marsupilami72
Office-VBA-Programmierer


Verfasst am:
14. Okt 2013, 10:39
Rufname:
Wohnort: Goslar

AW: Tutorial - Bildkomprimierung für Webseiten - AW: Tutorial - Bildkomprimierung für Webseiten

Nach oben
       

Mir fehlt in dieser Aufstellung das .png-Format - das komprimiert verlustfrei und kann sämtliche Farben darstellen - inklusive alpha-Kanal für Transparenz.
_________________
Gruß,
Martin

Bitte keine Fragen per PN - dafür ist das Forum da!
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
14. Okt 2013, 13:43
Rufname:
Wohnort: Aachen


AW: Tutorial - Bildkomprimierung für Webseiten - AW: Tutorial - Bildkomprimierung für Webseiten

Nach oben
       

Hallo Marsupilami72,

Das Tutorial ist von 2007(!). Zu dieser Zeit wurde das PNG-Format noch nicht durchgehend von allen Browsern unterstützt. Wenn ich mich recht entsinne, waren es damals jeweils nur die neusten Versionen und dann auch noch nicht mal zuverlässig mit der Alpha-Transparenz. Gnädigerweise haben sich einige alte (vor allem IE)-Versionen endgültig verabschiedet und die Unterstützung ist kein Thema mehr.

Es steht dir frei, das Tutorial zu ergänzen oder in einem neuen Thread zu erstellen.

Gruß,
womaninweb

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
Neues Thema eröffnen   Neue Antwort erstellen Alle Zeiten sind
GMT + 1 Stunde

Diese Seite Freunden empfehlen

Seite 1 von 1
Gehe zu:  
Du kannst Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen

Verwandte Themen
Forum / Themen   Antworten   Autor   Aufrufe   Letzter Beitrag 
Keine neuen Beiträge Wichtig: HTML & CSS Forum: Tutorial - Vertikales CSS-Menü mit Unterpunkten 0 maninweb 5763 15. Jun 2009, 19:43
maninweb Tutorial - Vertikales CSS-Menü mit Unterpunkten
Keine neuen Beiträge Wichtig: HTML & CSS Forum: Tutorial - Slider-Effekt mit CSS 0 maninweb 6839 13. Feb 2009, 17:27
maninweb Tutorial - Slider-Effekt mit CSS
Keine neuen Beiträge Wichtig: HTML & CSS Forum: Tutorial - Fotoqualität verbessern mit GIMP 0 maninweb 8403 20. Jan 2009, 20:25
maninweb Tutorial - Fotoqualität verbessern mit GIMP
Keine neuen Beiträge Wichtig: HTML & CSS Forum: Tutorial - CSS Menü inklusive Anleitung für Grafiken 0 maninweb 10821 22. Dez 2008, 15:02
maninweb Tutorial - CSS Menü inklusive Anleitung für Grafiken
Keine neuen Beiträge Wichtig: HTML & CSS Forum: Tutorial - HTML, XHTML und CSS 3 maninweb 10905 30. März 2007, 12:42
waldwuffel Tutorial - HTML, XHTML und CSS
Keine neuen Beiträge Frontpage Forum: FP 2003 - kein Aufruf von Webseiten möglich 0 Gasthexe 984 06. Apr 2010, 07:23
Gasthexe FP 2003 - kein Aufruf von Webseiten möglich
Keine neuen Beiträge HTML & CSS Forum: Tutorial zu Imagemaps 4 Tom2002 3618 14. Jul 2009, 10:14
wilbour2 Tutorial zu Imagemaps
Keine neuen Beiträge MS Expression Web Forum: Webseiten Bearbeitung und Erstellung 1 Bernd d.R. 1205 08. Jul 2008, 14:17
maninweb Webseiten Bearbeitung und Erstellung
Keine neuen Beiträge Frontpage Forum: Bilder fehlen in abgespeicherten Webseiten 0 Gast 1484 27. Sep 2007, 19:53
Gast Bilder fehlen in abgespeicherten Webseiten
Keine neuen Beiträge Frontpage Forum: zwei Webseiten mit Frontpage abgleichen 2 manela 1494 14. Dez 2006, 21:09
manela zwei Webseiten mit Frontpage abgleichen
Keine neuen Beiträge Frontpage Forum: Webseiten Größe 6 vipern 7682 08. Jun 2006, 10:47
waldwuffel Webseiten Größe
Keine neuen Beiträge Frontpage Forum: webseiten veröffentlichen 2 toni 2202 23. März 2004, 16:23
Gast webseiten veröffentlichen
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: HTML CSS