JPG
Verlustbehaftet…
Für Fotos. Transparente Stellen werden beim Export weiss.
SEHEN · VERÄNDERN · VERSTEHEN
Grafik-Codierung
Ein Bild. Fünf Werkzeuge. Entdecke, was in einer Bilddatei steckt.
Die Bilddateien werden vorbereitet.
Welches Format passt zum Bild?
Vergleiche dasselbe Motiv bei gleichem Ausschnitt. Die Grössen stammen aus den tatsächlichen Dateien.
PNG
Kompression ohne zusätzliche Bildverluste…
PNG verändert beim Komprimieren keine Pixelwerte. Eine vorherige Farbreduktion wird dadurch nicht rückgängig gemacht. Beim Vergrössern bleibt das Pixelraster sichtbar.
SVG
Vektor—
Beschreibt beim Beispiel Formen und Verläufe. Ein Foto wird durch Umbenennen nicht zur Vektorgrafik.
Die passende Datei hängt vom Motiv ab
Was spart bei JPG Speicher?
Entdecke den Unterschied zwischen weniger Farbauflösung und stärkerer Kompression.
Einfach erklärt: JPG baut Bilder aus Mustern
Stell dir einen Baukasten vor: Eine helle Fläche, ein weicher Verlauf, ein paar Streifen. Durch Mischen dieser Muster entsteht ein kleiner Bildblock.
JPG beschreibt für jeden Block mit 8 × 8 Pixeln, wie stark die bekannten Muster vorkommen. Eine gleichmässige Fläche oder ein sanfter Verlauf braucht oft nur wenige wichtige Muster.
1 Wähle einen Bildblock
2 Mische die Muster
Bewege einen Regler. Stärke 0 bedeutet «aus». Ein Minus kehrt bei den Verläufen und Streifen hell und dunkel um.
3 Lass feine Muster weg
Weshalb spart das Platz?
Die Muster sind fest bekannt. JPG muss deshalb vor allem ihre Stärken als Zahlen beschreiben. Beim stärkeren Komprimieren werden kleine Beiträge gerundet oder zu 0. Viele Nullen lassen sich anschliessend besonders platzsparend speichern. Dafür können feine Details verloren gehen.
Nur in Muster umzurechnen spart noch keinen Platz. Das Sparen entsteht durch das Vereinfachen und das geschickte Speichern der Zahlen.
Probiere selbst: Erzeuge im rechten Block eine gleichmässige graue Fläche mit nur einem aktiven Muster.
Zwei Bilder zum Nachbauen
Stelle die ersten vier Musterstärken so ein, dass dein Bild dem Zielbild möglichst ähnlich sieht. Feine Streifen sind in diesen Übungen ausgeschaltet. Kleine Abweichungen sind erlaubt.
Wir zeigen 6 von 64 möglichen Mustern und nur Helligkeit. Das ist ein vereinfachtes Lernmodell: «Feine Muster weglassen» zeigt einen möglichen Verlust. Echtes JPG vereinfacht die Musterstärken je nach Einstellung unterschiedlich. Die Musteranzahl ist keine Dateigrösse. Diese Demo verändert dein gemeinsames Arbeitsbild und dessen Downloads nicht.
Referenz · Arbeitsbild
Komprimierte Datei
…Von der Farbe zur kleineren Datei
- Farbraum: Y beschreibt die Helligkeit; Cb und Cr beschreiben Farbdifferenzen. Die Kanalansicht allein reduziert noch keine Auflösung.
- Farbauflösung: Im Lernmodell mittelt 4:2:2 die Farbwerte zweier Nachbarpixel, 4:2:0 die Farbwerte eines 2×2-Felds. Die Helligkeit bleibt dabei ungemittelt.
- Blöcke und Quantisierung: Die DCT zerlegt 8×8-Blöcke in grobe und feine Muster. Quantisierung rundet deren Koeffizienten. Dabei gehen Details verloren.
- Verlustfrei verpacken: Die verbleibenden Werte werden anschliessend platzsparend codiert, beispielsweise mit Huffman-Codierung.
Die Farbauflösung und der Block unten sind Lernmodelle. Die herunterladbare JPG-Datei wird nach der Farbauflösungs-Simulation vom Browser codiert; dessen interne Farbunterabtastung und Quantisierung können abweichen. Eine Qualität von 100 % garantiert keine verlustfreie Datei. Bei Fotos im JPG-Format enthält bereits die Referenz frühere Kompressionsverluste.
Einen 8×8-Block untersuchen
Klicke auf eine Bildstelle. Das Modell zeigt den Helligkeitsblock vor und nach DCT und Quantisierung. Am Bildrand wird der äusserste Pixel wiederholt.
Helligkeit Y
DCT-Koeffizienten
Quantisiert
Rekonstruiert
Wie viele Farben braucht dein Bild?
Reduziere die Abstufungen der drei RGB-Kanäle. Beobachte vor allem Verläufe und Schatten.
Original
Reduzierte Farbtiefe
Diese RGB-Farben sind möglich
Speicherbedarf: theoretisch dicht gepackte RGB-Werte, ohne Kompression, Transparenz, Zeilenauffüllung und Dateikopf. Die PNG-Download-Datei verwendet 8-Bit-Kanäle und kann deshalb eine andere Grösse haben. Ein Bit je RGB-Kanal ergibt 8 Farben, kein reines Schwarz-Weiss-Bild.
Ein Pixel unter der Lupe
Wähle einen Pixel im Bild. Bei starkem Zoom stehen die Werte für Rot, Grün und Blau von oben nach unten direkt im Pixel.
Arbeitskopie
Pixel anklickenWie wird eine Farbe codiert?
RGB speichert Rot, Grün und Blau. Bei 8 Bits je Kanal reicht jeder Wert von 0 bis 255. Drei Kanäle benötigen 24 Bits. Der Hexcode fasst dieselben Werte in sechs Hexziffern zusammen. Alpha beschreibt zusätzlich die Deckkraft; 0 ist transparent und 255 vollständig deckend. Koordinaten beginnen links oben bei (0, 0).
PNG: gleiche Pixel, kleinere Datei?
Untersuche die Kompression ohne zusätzliche Bildverluste. Eine kleinere Farbpalette kann dagegen Farben verändern.
Original
Pixelwerte des Arbeitsbilds erhalten
Palette und Dateigrösse
Komprimieren oder Farben verändern?
Prädiktionsfilter und DEFLATE sind verlustfrei. Sub speichert byteweise die Differenz zum linken Farbwert; Up die Differenz zur vorherigen Zeile. Die Rechnung erfolgt modulo 256. Der PNG-Decoder kann die Werte exakt zurückrechnen. Anschliessend komprimiert DEFLATE die gefilterten Daten.
Eine kleinere Farbpalette ist ein anderer Schritt: Ähnliche Farben werden zusammengefasst. Das kann Farben und bei transparenten Bildern auch Alpha-Abstufungen verändern. Dithering verteilt den Farbfehler auf Nachbarpixel. Die anschliessende PNG-Kompression erhält die bereits reduzierten Pixel wieder verlustfrei. Unsere Palette wird tatsächlich als indizierte PNG gespeichert; eine kleinere Palette ergibt nicht bei jedem Motiv eine kleinere Datei, besonders mit Dithering.
Vom Ausprobieren zum Verstehen
Nutze die Werkzeuge, prüfe deine Antworten und öffne Hinweise oder Lösungen bei Bedarf.