Back to Main Page

03.06.2022

A13 Bildformate

Es gibt viele verschiedene Bildformate, welche sich sowohl in der Verwendung wie aber auch im Komprimierungsalgorythmus stark unterscheiden.

• JPEG
  JPEG ist in der Lage grosse Bilder möglichst klein zu halten. Dabei verwendet es einen Komprimierungsalgoythmus, bei dem alle nicht relevaten Daten aus dem Bild entfernt werden. Aus diesem Grund brauchen JPEG Bilder extrem wenig Speicherplatz. Man sollte aber keine JPEG Bilder verwenden, wenn diese extrem Hochauflösend sein müssen.
• PNG
  PNG oder auch Portable Network Graphic kann wie auch JPEG Bilder Komprimieren. Der grundlegende Unterschied dabei ist aber, dass PNG keine Daten vernichtet. Aus diesem Grund braucht ein PNG zwar mehr Speicherplatz, hat aber auch die bessere Auflösung.
• GIF
  GIF Bilder bestehen nur aus 256 Farben (1 Byte). Aus diesem Grund nehmen sie noch weniger Speicherplatz ein als JPEG Bilder. Aufgrund der kleinen Farbwahl sollte man aber nur bei Diagrammen oder Grafiken auf ein GIF zurückgreifen.

A14 Komprimierung (Verlustfrei/Verlustbehaftete)

Modere Kamers können mittlerweile ohne grössere Probleme hochauflösende Bilder erstellen. Diese Bilder haben dann meistens eine Grösse um die 40 MB. Nun könnte man natürlich ohne grösser Problem hingehen und diese Bilder auf einer Website einbauen. Allerdings würde, dass zum einen unnötig Speicherplatz beanspruchen wie aber auch Netzwerktrafik also die Ladezeit einer Website verlangsamen. Auch bringt es relativ wenig diese Bilder auf einer Website einzubauen, da am Ende die meisten Computermonitore eh nicht die komplette Auflösung darstellen können.
Um dies zu verhindern, verwendet man normalerweise bei Bildern eine Komprimierung. Dabei unterscheidet man zwischen Verlustfreier und Verlustbehafteten Komprimierung.

Verlustfreie

Bei einer Verlustfreien Komprimierung ist man immer in der Lage wieder zu dem ursprungszustand zurückzukehren. Dass bedeutet so viel wie, dass wenn man das Bild wieder dekomprimiert es wieder in der gleichen Form vorliegt wie das Originalfoto. Nachteil einer Verlustfreien Dekomprimierung ist, dass diese meistens mehr Speicherplatz beanspruchen als die Verlustbehaftete.

Beispiele von PNG Filter:

________________
|       |       |
|   UL  |   U   |
|_______|_______|
|       |       |
|   L   |   X   |
|_______|_______|

• UP Eine Filterverfahren bei dem jedes einzelne Byte eines Bildes mit dem Bytes des darüberliegende Bytes verglichen wird. Alle nicht vorhandenen Bytes (Bytes am Rand des Bildes) werden mit 0 ersetz. Da der Vergleich 2er Bytes auch zu einem negativen Ergebnis führen könnte wird am Ende noch der Modules 256 vom Ergebnis genommen. Die Komplete Operation wäre also ` (X - U) % 256 = newValue`
• SUB Der Subfilter funktioniert ähnlich wie der Up Filter. Der Unterschied besteht darin, dass nun nichtmehr U sondern L also das Byte links von dem zu betrachtenden Byte verwendet wird ( (X - L) % 256 = newValue).
• AVG Wie AVG schon besagt, nimmt dieser Filter den Durchschnitt. Dabei wird der Durschnitt zwischen dem Up Filter und dem Sub Filter Wert genommen

      SUB + UP
  AVG = --------
          2
  

• PAETH Der Paeth Algorithmus ist der Komplexeste Filter. Dabei wird die kleinstmögliche Differenz gesucht und anschliessend verwendet.

  v1 = (X - L) % 256
  v2 = (X - U) % 256
  v3 = (X - UL) % 256
  newValue = min (v1, v2, v3)
  

  Der PNG Algorithmus verwendet bei einer Komprimierung nicht nur einer der oben beschriebenen Filterverfahren, sondern wählt für jede Zeile selber aus, welcher der am besten geeignete ist.

Verlustbehaftete

Bei einer Verlustbehafteten Komprimierung werden Daten, welche nicht wichtig sind aus dem Bild entfernt. Das bekannteste Beispiel davon stellt jpeg dar. Dabei werden für das menschliche Auge nicht sichtbare Informationen aus dem Bild entfernt. Auch wenn jpeg Bild am Ende viel kleiner sind kann man dafür nie mehr das Bild zu dem ursprünglichen Bild zurückverwandeln, da nichtmehr alle Informationen wiederhergestellt werden können. Dies ist auch der Grund, weshalb sich ein Bild problemlos von PNG to JPEG konvertieren lässt aber nicht umgekehrt.

A15 Rechtliche Grundlagen

Grundsätzlich haben alle Bilder ein Urheberrechte welches die Person besitzt welche das Bild erstellt hat. Wenn man nun Bilder auf seiner eigenen Website wiederverwenden möchte sollte man zuerst den Uhrheber um seine Zustimmung fragen. Alternativ kann man sich auch die rechte an den Bilder erkaufen (z.B. Stockfotos) oder Bilder verwenden bei denenen der Urheber grundsätzlich eine Weiterverwendung erlaubt.

A17 Aufbau einer CSS Regel

Eine CSS Regel hat immer einen Kopf (Selektor) welcher angibt für welche Elemente oder auch Elementtypen der CSS Wert angewendet werden sollte. Grundsätzlich gilt dabei:

• Klassen werden mit einem . eingeleitet z.B. .active
• Ids beginnen mit einem # z.B. #age-input
• HTML Elemente haben keinen Prefix p
• Default mässig gibt es auch ein Element, welches einfach mal für alles angewendet wird * Anschlissen kommt der Body welches wie ein JSON in name und wert aufgeteilt ist. Der name steht für die Art des Styles z.B. color und der wert steht für den Wert welcher angewant werden sollte also z.B. #ffffff für schwarz. Beispiel CSS Regel um alle Paragraphen fett und kursiv zu machen

  p {
  font-weight: bold;
  font-style: italic;
  }
  

  Reflexion

  Ich denke, dass ich letzte Woche gut weitergekommen bin im Unterricht. Ich hab noch eine B Kompentenz von HTML offen, welche ich mir vornehme auf nächstewoche zu lösen.