Aufgabe 5a - Digitale Medien im Internet
am Donnerstag, 21. Januar 2010, 12:27 im Topic 'Nutzung interaktiver Medien'
In diesem Beitrag werde ich mich mit dem Thema Bildkomprimierung beschäftigen und versuchen die gegebene Aufgabenstellung so gut es geht abzuarbeiten.
Bildkomprimierung und die Optimierung von Bildern für die Verwendung im Web
An erster Stelle sollte man sich mit den verschiedenen Dateitypen sprich den verschiedenen Eigenschaften dieser vertraut machen und dann in weiterer Folge das optimale Format für seinen Nutzen wählen.
Ich werde hier kurz die am häufigst verwendeten Bildformate erklären.
JPEG (kurz JPG als Dateiendung)
Das JPEG Format eignet sich hervorragend für Bilder welche aus Millionen von Farben bestehen, Zeichnungen mit extrem vielen Abstufungen und Bildern welche sehr viele Fabrverläufe haben. Ein großer Nachteil von JPEG ist der Qualitätsverlust bei Änderungen (durch Dekodierung und Rekodierung). Eine Transparenzsteuerung gibt es leider nicht.
GIF
Ein Bild im GIF Format kann maximal 256 Farben enthalten. GIF Bilder eignen sich besonders gut für flächige Grafiken, Buttons, Logos, sind jedoch weniger geeignet für Fotos. Bei Grafiken können hier jedoch extrem kleine Dateigrößen erreicht werden und die Komprimierung wird ohne Bildqualitätsverluste abgehandelt.
PNG
Grundlegend kann man sagen das, dass PNG Format die Vorteile der beiden oben erwähnten Formate in sich vereint. Und eine Transparenzsteuerung hier ebenso möglich ist.
Aufgabenbearbeitung
Nun zu den einzelnen Bildern, welche wir im Zuge dieser Aufgabe für die Nutzung im Web optimieren sollten. Für meinen Blog habe ich eine Bildgröße von 480x320 px gewählt da diese dann am besten mit meinem Blog harmonieren.
Erklärung zum Komprimierungsgrad:
0%tige Qualität des Originals = 100% Komprimierungsgrad
100%tige Qualität des Originals = 0 % Komprimierungsgrad
Bild 1 - Balkon
Daten des Originals:
Dateigröße: 11,5 MB
Bildgröße: 4.217 x 2.811 px
Daten des optimierten Bildes:
Dateigröße: 192 KB
Bildgröße: 480x320 px
Ich habe hier eine Qualitätsreduktion auf 70% gewählt, da dieses Bild doch einige Farbverläufe und Detailschattierungen hat und diese bei einer niedrigeren Qualität nicht mehr zu erkennen gewesen wären.
Bild 2 - Fenster
Daten des Originals:
Dateigröße: 7,56 MB
Bildgröße: 4.249 x 2.833 px
Daten des optimierten Bildes:
Dateigröße: 129 KB
Bildgröße:480x320 px
Ich habe hier eine Qualitätsreduktion auf 60% gewählt, im Vergleich zum ersten Bild ist hier durch die geringe Anzahl an Farben schon eine kleine Originalbildgröße gegeben jedoch würde eine zu starke Erhöhung des Komprimierungsgrades zu einigen unscharfen Bereichen führen.
Bild 3 - Grafik
Daten des Originals:
Dateigröße: 159 KB
Bildgröße: 800 x 600 px
Daten des optimierten Bildes:
Dateigröße: 78,7 KB
Bildgröße: 480x360 px
Ich habe hier eine Qualitätsreduktion auf 80% gewählt, um die weichen Farbübergänge ohne sichtbare Schattierungen wiederzugeben.
Un hier diese Grafik als GIF
Dateigröße: 46,2 KB GIF
Bildgröße: 480x360
Hier erkennt man deutlich, dass durch die begrenzte Zahl an möglichen Farben (Eigenschaft von GIF Format) die Übergänge nicht mehr brauchbar sind.
Bild 4 - Uhr
Daten des Originals:
Dateigröße: 5,70 MB
Bildgröße: 4.106 x 2.737 px
Daten des optimierten Bildes in hoher Qualität
Dateigröße: 126 KB
Bildgröße: 480x320 px
Ich habe hier eine Qualitätsreduktion auf 90% gewählt, da ansonsten die scharfe Abgrenzung vom blauen Hintergrund nicht mehr gegeben wäre und somit ein generell unscharfer Eindruck enstehen würde siehe nächstes Bild. Weiters zu erwähnen ist die nur kleine Reduktion der Dateigröße um 16 KB bei einer Komprimierungserhöhung von 60%!
Daten des optimierten Bildes in niedriger Qualität
Dateigröße: 110 KB
Bildgröße: 480x320 px
Hier mit einer Qualitätsreduktion auf nur 30% deutlich erkennbar der unscharfe Übergang von Hintergrund auf Uhrturm.
Bild 5 - Vögel
Daten des Originals:
Dateigröße: 4,17 MB
Bildgröße: 3.654 x 2.436 px
Daten des optimierten Bildes:
Dateigröße: 158 KB
Bildgröße: 480x320 px
Ich habe hier eine Qualitätsreduktion auf 50% gewählt, da dieses Bild im Original in Schwarz-Weiß (monochrome Graustufungen) vorliegt ergibt sich schon mal eine deutlich kleinere Dateigröße und durch diese Grundgegebenheit wird auch ein hoher Komprimierungsgrad nicht merklich zu extremen Bildqualitätsverlusten führen.
Bild 6 - Wasser
Daten des Originals:
Dateigröße: 3,74 MB
Bildgröße: 3.123 x 2.082 px
Daten des optimierten Bildes:
Dateigröße: 135 KB
Bildgröße: 480x320 px
Ich habe hier eine Qualitätsreduktion auf 40% gewählt, weil durch die Bewegung des Wassers schon im Original eine gewisse Unschärfe vorherrscht und dadruch keine wesentlichen Nachteile auftreten würden.
Abschliessend möchte ich auch noch auf einen noch nicht erwähnten Aspekt für die Darstellung von Bildern hinweisen. Meiner Meinung nach sind auch die Qualität und die Eigenschaften des Anzeigemediums ein wesentlicher Faktor für die Darstellung von Bildern.
All pictures Copyright © 2010 Reinhard Joechtl.
The use of the pictures for this exercise were granted by its owner.
Bildkomprimierung und die Optimierung von Bildern für die Verwendung im Web
An erster Stelle sollte man sich mit den verschiedenen Dateitypen sprich den verschiedenen Eigenschaften dieser vertraut machen und dann in weiterer Folge das optimale Format für seinen Nutzen wählen.
Ich werde hier kurz die am häufigst verwendeten Bildformate erklären.
JPEG (kurz JPG als Dateiendung)
Das JPEG Format eignet sich hervorragend für Bilder welche aus Millionen von Farben bestehen, Zeichnungen mit extrem vielen Abstufungen und Bildern welche sehr viele Fabrverläufe haben. Ein großer Nachteil von JPEG ist der Qualitätsverlust bei Änderungen (durch Dekodierung und Rekodierung). Eine Transparenzsteuerung gibt es leider nicht.
GIF
Ein Bild im GIF Format kann maximal 256 Farben enthalten. GIF Bilder eignen sich besonders gut für flächige Grafiken, Buttons, Logos, sind jedoch weniger geeignet für Fotos. Bei Grafiken können hier jedoch extrem kleine Dateigrößen erreicht werden und die Komprimierung wird ohne Bildqualitätsverluste abgehandelt.
PNG
Grundlegend kann man sagen das, dass PNG Format die Vorteile der beiden oben erwähnten Formate in sich vereint. Und eine Transparenzsteuerung hier ebenso möglich ist.
Aufgabenbearbeitung
Nun zu den einzelnen Bildern, welche wir im Zuge dieser Aufgabe für die Nutzung im Web optimieren sollten. Für meinen Blog habe ich eine Bildgröße von 480x320 px gewählt da diese dann am besten mit meinem Blog harmonieren.
Erklärung zum Komprimierungsgrad:
0%tige Qualität des Originals = 100% Komprimierungsgrad
100%tige Qualität des Originals = 0 % Komprimierungsgrad
Bild 1 - Balkon
Daten des Originals:
Dateigröße: 11,5 MB
Bildgröße: 4.217 x 2.811 px
Daten des optimierten Bildes:
Dateigröße: 192 KB
Bildgröße: 480x320 px
Ich habe hier eine Qualitätsreduktion auf 70% gewählt, da dieses Bild doch einige Farbverläufe und Detailschattierungen hat und diese bei einer niedrigeren Qualität nicht mehr zu erkennen gewesen wären.
Bild 2 - Fenster
Daten des Originals:
Dateigröße: 7,56 MB
Bildgröße: 4.249 x 2.833 px
Daten des optimierten Bildes:
Dateigröße: 129 KB
Bildgröße:480x320 px
Ich habe hier eine Qualitätsreduktion auf 60% gewählt, im Vergleich zum ersten Bild ist hier durch die geringe Anzahl an Farben schon eine kleine Originalbildgröße gegeben jedoch würde eine zu starke Erhöhung des Komprimierungsgrades zu einigen unscharfen Bereichen führen.
Bild 3 - Grafik
Daten des Originals:
Dateigröße: 159 KB
Bildgröße: 800 x 600 px
Daten des optimierten Bildes:
Dateigröße: 78,7 KB
Bildgröße: 480x360 px
Ich habe hier eine Qualitätsreduktion auf 80% gewählt, um die weichen Farbübergänge ohne sichtbare Schattierungen wiederzugeben.
Un hier diese Grafik als GIF
Dateigröße: 46,2 KB GIF
Bildgröße: 480x360
Hier erkennt man deutlich, dass durch die begrenzte Zahl an möglichen Farben (Eigenschaft von GIF Format) die Übergänge nicht mehr brauchbar sind.
Bild 4 - Uhr
Daten des Originals:
Dateigröße: 5,70 MB
Bildgröße: 4.106 x 2.737 px
Daten des optimierten Bildes in hoher Qualität
Dateigröße: 126 KB
Bildgröße: 480x320 px
Ich habe hier eine Qualitätsreduktion auf 90% gewählt, da ansonsten die scharfe Abgrenzung vom blauen Hintergrund nicht mehr gegeben wäre und somit ein generell unscharfer Eindruck enstehen würde siehe nächstes Bild. Weiters zu erwähnen ist die nur kleine Reduktion der Dateigröße um 16 KB bei einer Komprimierungserhöhung von 60%!
Daten des optimierten Bildes in niedriger Qualität
Dateigröße: 110 KB
Bildgröße: 480x320 px
Hier mit einer Qualitätsreduktion auf nur 30% deutlich erkennbar der unscharfe Übergang von Hintergrund auf Uhrturm.
Bild 5 - Vögel
Daten des Originals:
Dateigröße: 4,17 MB
Bildgröße: 3.654 x 2.436 px
Daten des optimierten Bildes:
Dateigröße: 158 KB
Bildgröße: 480x320 px
Ich habe hier eine Qualitätsreduktion auf 50% gewählt, da dieses Bild im Original in Schwarz-Weiß (monochrome Graustufungen) vorliegt ergibt sich schon mal eine deutlich kleinere Dateigröße und durch diese Grundgegebenheit wird auch ein hoher Komprimierungsgrad nicht merklich zu extremen Bildqualitätsverlusten führen.
Bild 6 - Wasser
Daten des Originals:
Dateigröße: 3,74 MB
Bildgröße: 3.123 x 2.082 px
Daten des optimierten Bildes:
Dateigröße: 135 KB
Bildgröße: 480x320 px
Ich habe hier eine Qualitätsreduktion auf 40% gewählt, weil durch die Bewegung des Wassers schon im Original eine gewisse Unschärfe vorherrscht und dadruch keine wesentlichen Nachteile auftreten würden.
Abschliessend möchte ich auch noch auf einen noch nicht erwähnten Aspekt für die Darstellung von Bildern hinweisen. Meiner Meinung nach sind auch die Qualität und die Eigenschaften des Anzeigemediums ein wesentlicher Faktor für die Darstellung von Bildern.
All pictures Copyright © 2010 Reinhard Joechtl.
The use of the pictures for this exercise were granted by its owner.
