sslxy

bildbearbeitung-und-grafikalltag

Nicht große Kunst, sondern tägliche technische Bildarbeit: scannen, säubern, formatieren, verkleinern und so ausgeben, dass ein Bild überhaupt sinnvoll ins Netz oder Archiv passt.

Bildbearbeitung war im Alltag lange weniger eine Frage kreativer Selbstverwirklichung als eine nüchterne technische Aufgabe. Ein Bild musste gescannt, geradegezogen, vom Staub befreit, beschnitten, im passenden Format gespeichert und auf eine Größe gebracht werden, die Speicher, Leitung und Zielmedium nicht unnötig überforderte. Gerade für Webarbeit war das oft Handwerk im wörtlichen Sinn.

Frühe Grafikprogramme, Scan-Nacharbeit, GIF, JPEG und die praktische Frage nach sinnvoller Dateigröße gehören deshalb zusammen. Es ging nicht darum, ein Bild „irgendwie schön“ zu machen, sondern darum, dass es überhaupt lesbar, brauchbar, sauber komprimiert und im vorgesehenen Einsatzkontext technisch vernünftig wurde.

Diese Seite bleibt deshalb bewusst praxisnah. Keine große Designer-Erzählung, sondern Alltag: Scans ausrichten, Kontrast retten, Dokumente lesbar halten, Webgrafiken leicht machen, Farb- und Formatentscheidungen treffen und verstehen, warum kleine Bilder früher echte Arbeit waren.

System Diagnostic

> IMAGE / SCAN / WEBGRAPHICS ANALYSIS
INPUT Scanner / Archivbild / alte Vorlagen / Bildschirmgrafiken / Webmotive BASIC WORK Beschneiden / Drehen / Tonwert / Kontrast / Staub / Lesbarkeit / Formatwahl CLASSIC FORMATS GIF für palettenbasierte Webgrafik / JPEG für Fotos / TIFF für hochwertige Arbeits- und Archivbestände MODERN FORMATS PNG verlustfrei mit Alpha / WebP verlustfrei oder verlustbehaftet / AVIF mit moderner Kompression, hoher Farbtiefe und Transparenz COLOR Farbraum und eingebettetes ICC-Profil bestimmen, wie Zahlen als sichtbare Farbe interpretiert werden RESOLUTION Pixelmaße bestimmen digitale Detailmenge; PPI/DPI beschreiben Ausgabe- oder Erfassungskontext und sind nicht dasselbe MASTER Original oder Rohscan / verlustfreie Arbeitsdatei / veröffentlichte Webderivate getrennt erhalten REAL LIMITS Speicher / Leitung / Browser / Monitor / Dateigröße / Ladezeit WEB GOAL brauchbare Bilder bei möglichst wenig Ballast ERROR SOURCES falsche Auflösung / zu aggressive Kompression / unsaubere Schärfung / unnötig große Dateien MINDSET nicht Effekt zuerst, sondern Klarheit, Lesbarkeit und technische Ruhe
Kleine Bilder waren früher nicht „klein gerechnet“, sondern oft mühsam ehrlich erarbeitet.

Chronologie

frühe Phase

Grafik als Datei

Bilder sind noch schwer, Speicher knapp und Formatwahl unmittelbar technisch spürbar.

Scannerzeit

Nacharbeit

Scans müssen gedreht, bereinigt, beschnitten und in eine tatsächlich nutzbare Form gebracht werden.

Webphase

GIF und JPEG

Jedes Kilobyte zählt. Dateigröße, Ladezeit und Browserverträglichkeit werden zu echten Arbeitsfaktoren.

später

Routine

Bildarbeit bleibt handwerklich: nicht spektakulär, aber für saubere Webseiten und Archive unverzichtbar.

[image/fundamentals]

Grundsatz: Bildarbeit ist Technik

Bildbearbeitung wird oft so behandelt, als beginne sie erst bei sichtbaren Effekten. Im Alltag beginnt sie viel früher: bei der Frage, ob die Vorlage überhaupt sauber erfasst ist, ob Horizonte stimmen, ob Schriften lesbar bleiben, ob Kontrast zu hart oder zu weich ist und welches Dateiformat das Bild nicht unnötig ruiniert. Genau dort liegt die eigentliche Arbeit.

Gerade im Web- und Archivalltag zählt nicht bloß, dass ein Bild „schön“ aussieht. Es muss zur Aufgabe passen. Ein Foto für die Seite braucht andere Entscheidungen als ein gescanntes Dokument, ein Logo andere als eine alte Aufnahme, eine Webgrafik andere als eine größere Arbeitsdatei. Ohne diese Trennung wird Bildbearbeitung beliebig.

[Image Workflow] nüchterne Reihenfolge
> Vorlage erfassen
> Bild korrigieren
> sinnvolles Format wählen
> Dateigröße kontrollieren
> erst dann ausgeben oder veröffentlichen

„Gute Bildbearbeitung fällt oft gerade dadurch nicht auf, dass sie das Bild nicht künstlich laut macht.“

[image/source_master_output]

Quelle, Master, Bearbeitung und Ausgabe getrennt halten

Ein sauberer Bildworkflow beginnt mit der Trennung verschiedener Zustände. Das Original ist nicht dieselbe Datei wie die bearbeitete Fassung, und die Webausgabe ist nicht automatisch ein geeignetes Archivmaster.

Stufe Aufgabe
Original Physische Vorlage oder ursprüngliche digitale Datei möglichst unverändert erhalten.
Rohscan / Capture Erfassung mit ausreichender Auflösung, Farbtiefe und eingebettetem beziehungsweise dokumentiertem Profil.
Arbeitsmaster Verlustfreie oder möglichst verlustarme Bearbeitungsdatei mit ausreichend Reserven für spätere Änderungen.
Ausgabederivat Für Website, Druck, E-Mail oder Vorschau gezielt verkleinerte und optimierte Fassung.
Veröffentlichte Version Tatsächlich verwendete Datei einschließlich Dateiname, Abmessungen, Format und Veröffentlichungsdatum.
[Image_State_Chain]
> original remains untouched
> capture preserves available information
> master records deliberate corrections
> derivative is optimized for one purpose
> never rebuild the archive from the smallest web copy

Diese Reihenfolge verhindert, dass ein stark komprimiertes JPEG oder ein verkleinertes Webbild später fälschlich zum einzigen verbliebenen Ausgangsmaterial wird.

[image/raster_vector]

Rastergrafik und Vektorgrafik

Rasterbilder bestehen aus einem festen Gitter einzelner Pixel. Fotos, Scans und Bildschirmaufnahmen gehören typischerweise in diese Gruppe. Vektorgrafiken beschreiben Formen, Linien, Kurven, Füllungen und Text mathematisch und werden erst bei der Ausgabe in Pixel umgesetzt.

Rastergrafik

Geeignet für Fotografien, gemalte Strukturen, Scans und komplexe Pixelinformationen. Vergrößerung über die vorhandene Detailmenge hinaus erzeugt keine neuen echten Bildinformationen.

Vektorgrafik

Geeignet für Logos, Symbole, Diagramme, Schrift und klare Formen. Skalierung bleibt grundsätzlich konturenscharf, solange Effekte und eingebettete Rasteranteile dies nicht einschränken.

Ein Logo sollte möglichst als Vektorquelle erhalten bleiben. Für die Website können daraus SVG- oder Rasterderivate entstehen. Ein eingescanntes historisches Logo bleibt dagegen zunächst eine Rasterquelle und muss bei Bedarf bewusst nachgezeichnet werden.

[image/pixels_ppi_dpi]

Pixelmaße, PPI und DPI

Die digitale Detailmenge eines Rasterbilds wird durch seine Pixelmaße bestimmt, beispielsweise 2400 × 1600 Pixel. PPI und DPI werden im Alltag häufig vermischt, beschreiben aber unterschiedliche Zusammenhänge.

Begriff Bedeutung
Pixelmaße Tatsächliche Anzahl der Bildpunkte in Breite und Höhe.
PPI Pixel pro Zoll bei einer vorgesehenen physischen Ausgabe- oder Erfassungsgröße.
DPI Punkte beziehungsweise Druckelemente pro Zoll eines Ausgabegeräts; nicht identisch mit Bildpixeln.
Ausgabebreite in Zoll = Pixelbreite / gewünschte PPI

Für eine Webseite ist zunächst entscheidend, wie viele CSS-Pixel das Bild im Layout einnimmt und welche physische Pixeldichte das Ausgabegerät besitzt. Eine bloße Änderung des PPI-Metadatenwerts ohne Neuberechnung verändert die Pixelanzahl und Dateigröße eines Webbilds nicht automatisch.

Scanauflösung nach Vorlageninformation

Die passende Scanauflösung hängt von Vorlage, Ziel und tatsächlicher optischer Scannerleistung ab. Ein kleines Foto für spätere Vergrößerung, ein gedrucktes Rasterbild, ein Textdokument und eine bereits digitale Bildschirmvorlage benötigen unterschiedliche Entscheidungen.

[image/software]

Frühe Grafikprogramme

Frühe Grafikprogramme mussten mit weniger Ressourcen auskommen und zwangen dadurch zu klareren Entscheidungen. Speicher, Rechenleistung und Monitorqualität setzten echte Grenzen. Genau deshalb lernte man schnell, dass jede Bearbeitung einen Preis hat – in Zeit, in Speicher, in Qualität oder in späterer Dateigröße.

Der Reiz lag dabei weniger im Effektfeuerwerk als in konkreter Arbeit: zuschneiden, drehen, Helligkeit anpassen, Schrift lesbar machen, Artefakte vermeiden, Dateiformate korrekt wählen. Gerade dieser nüchterne Umgang ist bis heute nützlich geblieben, weil er nicht vom Programmnamen abhängt, sondern von der technischen Aufgabe.

Gute Programme blieben meist deshalb im Einsatz, weil sie ruhig arbeiteten, nicht weil sie besonders laut wirkten. Wenn ein Werkzeug verlässlich öffnete, speicherte, stapelweise Bilder nicht ruinierte und den Benutzer nicht mit unnötigem Theater aufhielt, war das oft mehr wert als eine lange Liste künstlicher Möglichkeiten.

Im sslxy-Zusammenhang gehört dazu auch die Frage, ob ein Bild später wirklich wieder auffindbar und weiterverwendbar bleibt. Ein Programm, das eine schöne Einzeldatei erzeugt, aber keine ruhige, nachvollziehbare Arbeitsweise unterstützt, war im Alltag schnell weniger wert als ein schlichtes Werkzeug mit sauberer Ausgabe.

[image/scan_cleanup]

Scan-Nacharbeit

Ein Scan ist fast nie schon das fertige Bild. Gerade bei Dokumenten, Fotos, alten Drucksachen oder Archivmaterial ist Nacharbeit der eigentliche Kern. Schiefe Vorlagen, Staub, Randreste, unruhiger Hintergrund, zu schwacher Kontrast oder leicht graue Papierreste machen einen Scan nicht unbrauchbar, aber eben auch noch nicht brauchbar genug.

  • Beschneiden: unnötige Ränder, Schräglagen und Fremdflächen entfernen.
  • Drehen und begradigen: besonders bei Dokumenten und Fotos wichtig für ruhige Lesbarkeit.
  • Tonwert und Kontrast: nicht maximal aufdrehen, sondern so einstellen, dass Inhalt sichtbar bleibt.
  • Staub und Flecken: nur so weit bereinigen, dass das Bild sauberer wird, nicht künstlich glatter als die Vorlage.
  • Lesbarkeit vor Effekt: ein leicht nüchterner, sauberer Scan ist meist wertvoller als ein künstlich „verschöntes“ Ergebnis.

Die größere Scan-Seite daneben liegt auf scanner-und-bilddigitalisierung.htm. Hier geht es stärker um den Bildalltag nach der Erfassung.

[image/tone_histogram]

Tonwerte, Histogramm und Kontrast

Ein Histogramm zählt, wie viele Pixel in unterschiedlichen Helligkeits- beziehungsweise Kanalbereichen liegen. Es zeigt Verteilung und mögliche abgeschnittene Bereiche, bewertet aber nicht automatisch, ob das Motiv inhaltlich gut oder schlecht ist.

  • Schwarzpunkt: legt fest, welche dunklen Werte als tiefstes Schwarz erscheinen.
  • Weißpunkt: legt den hellsten noch differenzierten beziehungsweise ausgegebenen Bereich fest.
  • Mitteltöne: beeinflussen die wahrgenommene Helligkeit ohne zwingend beide Endpunkte zu verschieben.
  • Clipping: mehrere unterschiedliche Vorlagenwerte werden zu vollständig Schwarz oder Weiß und verlieren Differenzierung.
  • Kanalprüfung: RGB-Kanäle können einzeln früher ausreißen als die zusammengefasste Helligkeit.

Bei historischen Fotos und Dokumenten ist ein leicht vergilbter oder weicher Ton nicht automatisch ein Fehler. Die Bearbeitung muss entscheiden, ob sie die Vorlage dokumentieren oder eine neutralisierte Nutzungskopie erzeugen soll. Beides darf als getrennte Version existieren.

[image/nondestructive_work]

Nichtdestruktive Arbeitsweise

Nichtdestruktiv bedeutet, dass Korrekturen reversibel bleiben oder wenigstens nicht die einzige hochwertige Ausgangsdatei überschreiben. Das kann über Ebenen, Masken, Einstellungsebenen, Entwicklungseinstellungen oder schlicht über getrennte Versionen geschehen.

Reversible Schritte

Beschnitt, Tonwert, Farbanpassung, Masken und Retusche bleiben als Bearbeitungsschritte veränderbar.

Gerenderter Master

Zusätzlich kann ein dokumentierter verlustfreier Zwischenstand sinnvoll sein, damit die Datei auch ohne die ursprüngliche Bearbeitungssoftware später lesbar bleibt.

Proprietäre Arbeitsdateien können Ebenen und Verlauf erhalten, sind aber möglicherweise langfristig stärker von einer bestimmten Software abhängig. Deshalb ist die Kombination aus nativer Arbeitsdatei, gerendertem verlustfreiem Master und dokumentiertem Export häufig robuster.

[image/bit_depth]

Farbtiefe und Kanalwerte

Farbtiefe beschreibt, wie viele diskrete Werte pro Kanal gespeichert werden können. Bei 8 Bit pro Kanal stehen 256 Werte zur Verfügung. Bei 16 Bit pro Kanal sind es 65.536 mögliche Zahlenwerte pro Kanal, sofern Format und Bearbeitungsprogramm diese Tiefe tatsächlich erhalten.

Mehr Farbtiefe erzeugt nicht automatisch mehr sichtbare Vorlagendetails. Sie bietet aber größere Reserven für starke Tonwert- und Farbkorrekturen, weil Rundung und Banding bei Zwischenberechnungen geringer ausfallen können.

Tiefe Praktische Rolle
1 Bit Schwarz oder Weiß; geeignet für klar binarisierte Strich- oder Textvorlagen, nicht für Grautöne.
8 Bit Grau 256 Helligkeitsstufen für Graustufenbilder.
8 Bit RGB 256 Werte je RGB-Kanal; verbreitete Web- und Ausgabetiefe.
16 Bit RGB Größere Bearbeitungsreserve für Scans, Fotografie und starke Korrekturen.
Indiziert Pixel speichern Verweise auf eine begrenzte Palette statt direkter RGB-Werte.
[image/color_management]

Farbräume und ICC-Profile

Ein RGB-Zahlenwert beschreibt allein noch keine eindeutig sichtbare Farbe. Ein Farbraum legt fest, welche Primärfarben, welcher Weißpunkt und welche Tonwertcharakteristik gemeint sind. Ein ICC-Profil verbindet gerätebezogene Werte mit einem standardisierten farbmetrischen Bezug.

sRGB

Bewährter Austauschfarbraum für gewöhnliche Webausgabe und breite Kompatibilität. Er bildet nicht jede Farbe moderner Wide-Gamut-Geräte ab.

Display P3

Größerer Farbumfang als sRGB. Eine korrekte Darstellung setzt farbmanagementfähige Software und ein geeignetes Display voraus.

Scannerprofil

Beschreibt, wie die Messwerte eines konkreten Scanners und seiner Erfassungsbedingungen farbmetrisch zu interpretieren sind.

Monitorprofil

Beschreibt die tatsächliche Anzeigecharakteristik des Monitors und dient der Umrechnung für die Darstellung.

Zuweisen und konvertieren sind verschieden

Ein Profil zuzuweisen verändert die Interpretation vorhandener Zahlenwerte. Eine Konvertierung berechnet neue Werte, damit das visuelle Erscheinungsbild im Zielfarbraum möglichst erhalten bleibt. Eine falsche Zuweisung kann das Bild sichtbar verändern, obwohl kein Pixelwert umgerechnet wurde.

[image/alpha_transparency]

Alpha, Transparenz und matte Kanten

Ein Alphakanal beschreibt die Deckkraft eines Pixels getrennt von seinen Farbkanälen. Vollständig transparent und vollständig deckend sind nur die Endpunkte; dazwischen können weiche Übergänge gespeichert werden.

GIF kennt klassisch nur eine als transparent markierte Palettenfarbe. PNG, WebP und AVIF können dagegen echte abgestufte Transparenz speichern. Das ist für weiche Schatten, Logos, runde Kanten und Überlagerungen wichtig.

Gerade und vormultiplizierte Alpha-Werte

Manche Systeme speichern RGB unabhängig von Alpha, andere führen bereits mit Alpha multiplizierte Farbwerte. Werden diese Varianten falsch interpretiert oder gegen die falsche Hintergrundfarbe exportiert, entstehen helle oder dunkle Säume an transparenten Kanten.

[image/formats]

Dateiformate

Dateiformate waren und sind keine Nebensache. Sie entscheiden darüber, wie ein Bild gespeichert, geladen, weiterbearbeitet und im Web oder Archiv genutzt werden kann. Wer falsche Formate wählt, produziert nicht nur größere Dateien, sondern oft auch unnötigen Qualitätsverlust.

Format Praktische Rolle
GIF Palettenformat für einfache Webgrafiken und Animationen; maximal 256 Paletteneinträge pro Bild beziehungsweise Frame und nur einfache Transparenz.
JPEG Verlustbehaftete Fotokompression ohne Alphakanal; Dateigröße und Artefakte hängen stark von Qualität, Inhalt und wiederholtem Speichern ab.
TIFF Flexibler Container für hochwertige Arbeits- und Archivdateien; konkrete Kompression, Farbtiefe und Metadaten müssen dokumentiert werden.
PNG Verlustfreie Rastergrafik mit Graustufen, Palette oder Truecolor und optionalem Alphakanal.
WebP Webformat mit verlustbehafteter oder verlustfreier Kompression, Transparenz und Animation.
AVIF Moderne, auf AV1 basierende Bildkompression mit verlustbehafteten und verlustfreien Modi, Transparenz, hoher Farbtiefe, HDR und Wide Gamut.
SVG Vektorformat für Logos, Symbole und Diagramme; kann Text, Formen und eingebettete Rasterbilder enthalten.

Wichtig ist die nüchterne Trennung: Ein Logo als JPEG ist oft unsauber. Ein Foto als GIF wird schnell grob oder farblich unruhig. Das Format sollte nicht nach Gewohnheit, sondern nach Bildinhalt gewählt werden.

[Format Choice]
> photo: JPEG prüfen
> logo/icon: GIF oder anderes kantenfreundliches Format prüfen
> scan/archive: Arbeitsformat getrennt von Webformat halten
> rule: Format folgt Inhalt und Zweck
[image/classic_formats]

GIF, JPEG und TIFF

GIF und JPEG prägten den Weballtag über lange Zeit besonders stark. Der Unterschied zwischen beiden ist nicht theoretisch, sondern unmittelbar sichtbar. GIF lebt von klaren Flächen, geringer Farbzahl und scharfen Kanten. JPEG lebt davon, dass Fotos auch bei starker Verdichtung noch halbwegs brauchbar wirken – solange man es nicht übertreibt.

GIF

ruhig für Logos, Icons, Schriften, Grafikelemente und harte Konturen. Für Fotos meist zu grob oder farblich eingeschränkt.

JPEG

sinnvoll für fotografische Inhalte, aber nur so stark komprimieren, dass Blockartefakte und Matschbildung nicht das Bild übernehmen.

Gerade in der Praxis lernte man schnell: Ein Bild ist nicht „klein“, nur weil man die Kompression brutal hochzieht. Dann wird es oft einfach nur hässlicher. Wirkliche Optimierung bedeutet, Bildinhalt, Abmessung und Format zusammen zu denken.

TIFF als Arbeits- und Archivcontainer

TIFF kann unterschiedliche Farbräume, Farbtiefen und Kompressionsverfahren enthalten. Der Dateiname allein garantiert deshalb weder Verlustfreiheit noch langfristige Eignung. Für ein Archivmaster werden konkrete Eigenschaften wie Kompression, Farbtiefe, Profil, Metadaten und Seitenstruktur dokumentiert.

„Ein kaputtkomprimiertes Bild ist nicht effizient. Es ist nur kleiner und zugleich schlechter.“

[image/png_webp_avif]

PNG, WebP und AVIF

PNG

PNG speichert Rasterbilder verlustfrei und unterstützt indizierte Farben, Graustufen, Truecolor sowie optional einen Alphakanal. Es eignet sich für Logos, Screenshots, Diagramme, Textgrafik und hochwertige verlustfreie Webbilder, kann bei fotografischem Material aber deutlich größer als verlustbehaftete Formate werden.

WebP

WebP unterstützt verlustbehaftete und verlustfreie Kompression, Transparenz und Animation. Damit kann ein Format verschiedene typische Aufgaben von JPEG, PNG und GIF übernehmen. Die konkrete Qualität hängt weiterhin von Encoder, Einstellungen und Bildinhalt ab.

AVIF

AVIF basiert auf AV1-Bildcodierung und unterstützt verlustbehaftete wie verlustfreie Speicherung, Transparenz, hohe Farbtiefen, Wide Gamut, HDR und Bildsequenzen. Bei kleinen oder textreichen Bildern muss besonders geprüft werden, ob Chroma-Subsampling oder starke Kompression farbige Kanten und feine Details beschädigt.

Eigenschaft PNG WebP AVIF
Verlustfrei ja ja ja
Verlustbehaftet nein ja ja
Alpha ja ja ja
Animation in aktueller Spezifikation als APNG ja Bildsequenzen möglich
Typische Stärke verlustfreie Kanten, Text, Screenshots flexible Webausgabe hohe Kompression und moderne Farb-/HDR-Fähigkeiten

Ein modernes Format ist nicht automatisch für jede Datei kleiner oder sichtbar besser. Vergleichsexporte müssen bei realer Anzeigegröße, Zielbrowsern und denselben Qualitätskriterien geprüft werden.

[image/jpeg_artifacts]

JPEG-Artefakte und Generationsverlust

JPEG zerlegt Bilder in Blöcke, wandelt Farb- und Helligkeitsinformation und quantisiert Frequenzanteile. Bei stärkerer Kompression werden feine Informationen gröber gespeichert. Typische Folgen sind Blockbildung, Ringing an Kontrastkanten, verschmierte Texturen und Farbbluten.

Wird ein JPEG geöffnet, verändert und erneut als JPEG gespeichert, wird nicht einfach die alte Kompression unverändert weitergereicht. Eine neue verlustbehaftete Codierung kann zusätzliche Schäden erzeugen. Mehrere Bearbeitungsgenerationen sollten deshalb aus einem verlustfreien Master oder möglichst aus der ursprünglichen Quelle entstehen.

[image/palette_dither]

Palette und Dithering

Bei indizierten Bildern speichert jeder Pixel keinen vollständigen RGB-Wert, sondern einen Index in eine begrenzte Farbtabelle. Die Qualität hängt deshalb davon ab, wie die Palette aus dem Bildinhalt gebildet und wie fehlende Zwischenfarben angenähert werden.

Dithering verteilt unterschiedliche vorhandene Farben räumlich, sodass das Auge einen Zwischenwert wahrnimmt. Das kann Verläufe verbessern, erzeugt aber zusätzliches Musterrauschen und kann die verlustfreie Kompression verschlechtern.

Ohne Dithering

Ruhige Flächen und kleine Dateien, aber sichtbare Farbstufen und harte Übergänge bei zu kleiner Palette.

Mit Dithering

Glatter wirkende Übergänge, jedoch körnigere Struktur und möglicherweise höhere Dateigröße.

Für Logos und klare Icons ist eine bewusst gewählte kleine Palette oft besser als automatisch stark geditherte Ausgabe. Für historische Bildschirmgrafik kann das ursprüngliche Dithering selbst Teil des dokumentierten Erscheinungsbilds sein.

[image/size_optimization]

Größenoptimierung

Größenoptimierung war früher eine echte Arbeitsdisziplin. Langsame Leitungen, knapper Speicherplatz und frühe Browser machten Bildgrößen sofort spürbar. Ein schweres Bild war nicht nur „ein bisschen größer“, sondern direkt mit schlechterem Seitenaufbau, längerer Wartezeit und träge reagierenden Seiten verbunden.

  • Bild zuerst in der richtigen Abmessung anlegen, nicht riesig speichern und später im Browser verkleinern lassen.
  • Nur so viel Qualität behalten, wie der reale Einsatzzweck braucht.
  • Fotos und harte Grafiken getrennt behandeln.
  • Vorschau, Kontrolle und reale Seitenwirkung testen statt nur auf Dateigröße zu starren.
  • Nicht unnötig doppelt speichern und mehrfach neu komprimieren.
[Optimization Rule]
> right size first
> right format second
> right compression third
> then image becomes web-usable instead of merely smaller
[image/resampling_sharpening]

Skalierung und Ausgabeschärfung

Beim Verkleinern oder Vergrößern muss ein neues Pixelraster berechnet werden. Der Interpolationsfilter bestimmt, wie Quellpixel in Zielpixel eingehen. Unterschiedliche Filter reagieren verschieden auf feine Strukturen, harte Kanten und Rauschen.

  • Nächster Nachbar: erhält harte Pixelblöcke; sinnvoll für Pixelgrafik, ungeeignet für Fotos.
  • Bilinear: schnell und weich, kann Details sichtbar glätten.
  • Bikubisch: berücksichtigt mehr Nachbarwerte und liefert häufig ausgewogenere fotografische Ergebnisse.
  • Lanczos und verwandte Filter: können Details gut erhalten, aber an harten Kanten Ringing erzeugen.

Schärfung sollte auf die endgültige Ausgabegröße abgestimmt werden. Eine stark geschärfte große Arbeitsdatei kann nach weiterer Verkleinerung unnatürliche Halos entwickeln. Deshalb bleibt eine ungeschärfte oder nur grundkorrigierte Masterfassung erhalten; die Ausgabeschärfung erfolgt am fertigen Derivat.

[image/web_everyday]

Webgrafiken im Alltag

Für Webseiten war Bildarbeit nie nur Dekoration. Headergrafiken, kleine Vorschauen, Logos, Hinweisbilder, Dokumentfotos oder Archivmaterial mussten technisch zu Seite, Layout und Ladeverhalten passen. Gerade bei statischen Seiten mit nüchterner Architektur stören zu schwere oder unruhige Bilder sofort.

Der Alltag bestand deshalb selten aus spektakulären Bildprojekten, sondern aus vielen kleinen Entscheidungen: Wo reicht ein kleines GIF? Wo braucht es ein moderat komprimiertes JPEG? Welche Größe ist sichtbar sinnvoll? Was bringt dem Besucher wirklich etwas und was ist bloß Ballast?

Gerade diese Fragen machten Webgrafik zu echter Arbeit. Kleine Bilder entstanden nicht nebenbei. Sie mussten oft mühsam so vorbereitet werden, dass sie auf frühen Monitoren, langsamen Verbindungen und einfachen Browsern überhaupt ordentlich wirkten.

Die frühe Webpraxis steht ergänzend auf erste-webseiten-1995-1996.htm. Dort wird deutlicher, warum Bildgröße, HTML-Struktur und Übertragungsgeschwindigkeit damals untrennbar zusammengehörten.

[web/responsive_images]

Responsive Images: nicht jedem Gerät dieselbe Datei senden

Ein responsives Layout allein verhindert nicht, dass ein Mobiltelefon eine viel zu große Bilddatei lädt. Mit srcset und sizes können mehrere Breitenvarianten derselben Darstellung angeboten werden. Der Browser wählt anhand von Layoutbreite, Pixeldichte und weiteren Bedingungen einen geeigneten Kandidaten.

<img
src="/bilder/motiv-900.jpg"
srcset="/bilder/motiv-480.jpg 480w,
/bilder/motiv-900.jpg 900w,
/bilder/motiv-1400.jpg 1400w"
sizes="(max-width: 700px) 100vw, 850px"
width="1400" height="933"
alt="Sachliche Beschreibung des Bildinhalts">

width und height geben das intrinsische Seitenverhältnis an und helfen dem Browser, frühzeitig Platz zu reservieren. Sie ersetzen nicht die responsive CSS-Größe.

picture für Format- oder Motivauswahl

Das picture-Element kann alternative Formate oder bewusst anders beschnittene Motive anbieten. Der letzte enthaltene img-Knoten bleibt Fallback und Träger von Alternativtext, Abmessungen sowie Ladeattributen.

Lazy Loading ist für Bilder unterhalb des sichtbaren Bereichs nützlich. Das zentrale sichtbare Hauptbild sollte dagegen nicht unnötig verzögert werden. Optimierung bedeutet Auswahl, nicht pauschales Anwenden jedes Attributs.

[image/metadata_privacy]

Metadaten, Herkunft und Datenschutz

Bilddateien können technische und beschreibende Metadaten enthalten: Aufnahmezeit, Kameramodell, Belichtung, Ausrichtung, Farbprofil, Bearbeitungssoftware, Urheberangaben, Beschreibung und gegebenenfalls geografische Position.

Für das Archiv sind Metadaten wertvoll, weil sie Herkunft und technischen Zustand dokumentieren. Für eine öffentliche Webausgabe können einzelne Angaben dagegen unnötig, personenbezogen oder sicherheitsrelevant sein.

Metadaten Behandlung
ICC-Profil Für zuverlässige Farbwiedergabe normalerweise erhalten beziehungsweise gezielt in einen Ausgabefarbraum konvertieren.
EXIF-Ausrichtung Vor dem Export korrekt anwenden, damit reduzierte Metadaten nicht zu gedrehter Darstellung führen.
GPS Vor öffentlicher Veröffentlichung bewusst prüfen und meist entfernen, wenn kein sachlicher Zweck besteht.
Urheber und Beschreibung Kann für Herkunft, Rechteverwaltung und Auffindbarkeit wichtig sein.
Vorschaubilder Können ältere oder unbeschnittene Bildstände enthalten und müssen bei sensiblen Bildern geprüft werden.

Metadatenentfernung erfolgt an der öffentlichen Kopie. Das Archivmaster behält erforderliche Herkunfts- und technische Informationen, sofern ihre Speicherung rechtmäßig und sinnvoll ist.

[image/quality_control]

Qualitätskontrolle vor Veröffentlichung

Eine Datei wird nicht nur bei hundertprozentiger Vergrößerung beurteilt. Sie muss zusätzlich in der tatsächlichen Darstellungsgröße, auf hellem und dunklem Hintergrund sowie in der realen Seite geprüft werden.

  1. Pixelmaße: entsprechen sie dem vorgesehenen Layout und den angebotenen srcset-Stufen?
  2. Seitenverhältnis: wird nichts ungewollt gestaucht oder beschnitten?
  3. Farbe: ist ein geeignetes Profil eingebettet oder wurde bewusst nach sRGB konvertiert?
  4. Tonwerte: sind Schatten, Lichter und wichtige Schriftbereiche erhalten?
  5. Kompression: bleiben Kanten, Gesichter, Texturen und Farbflächen sauber?
  6. Transparenz: funktionieren Kanten auf den tatsächlich verwendeten Hintergründen?
  7. Metadaten: bleiben notwendige Angaben erhalten und unerwünschte private Angaben draußen?
  8. HTML: Alt-Text, Breite, Höhe und responsive Auswahl passen zum Inhalt.
  9. Dateiname: bleibt stabil, verständlich und ohne unnötige Sonderzeichen?
  10. Archiv: Original, Arbeitsmaster und Webderivat sind getrennt gesichert.
[Image_Release_Check]
> view at 100 percent
> view at actual layout size
> test light and dark backgrounds
> verify metadata and profile
> compare visual quality against transferred bytes
[image/common_errors]

Typische Fehler

Viele Bildprobleme wiederholen sich erstaunlich zuverlässig. Gerade deshalb lohnt sich nüchterne Routine. Die meisten Fehler entstehen nicht aus bösem Willen, sondern aus fehlender Trennung zwischen Vorlage, Format, Einsatzzweck und realem Ausgabeweg.

  • zu große Bilder nur per CSS oder HTML im Browser verkleinern
  • Pixelmaße mit PPI- oder DPI-Metadaten verwechseln
  • falsches Format für den Bildinhalt wählen
  • zu aggressive JPEG-, WebP- oder AVIF-Kompression
  • JPEG-Dateien über mehrere Bearbeitungsgenerationen erneut speichern
  • eingebettete Farbprofile entfernen oder falsch zuweisen
  • Transparenzkanten gegen den falschen Hintergrund vorbereiten
  • übertriebene Schärfung vor der endgültigen Skalierung
  • graue, schiefe oder staubige Vorlagen ohne kontrollierte Nacharbeit
  • Original, Arbeitsmaster und Webderivat miteinander überschreiben
  • GPS- und Vorschaumetadaten ungeprüft veröffentlichen
  • Bildbearbeitung nach Effektgeschmack statt nach Nutzung
[image/archive_order]

Archiv und saubere Ablage

Bildarbeit hört nicht beim Export auf. Gerade im Archiv- und Weballtag muss nachvollziehbar bleiben, woher ein Bild stammt, welches Format als Arbeitsstand dient und welche Version tatsächlich veröffentlicht wurde. Ohne diese Ordnung wird spätere Nacharbeit unnötig kompliziert.

Eine saubere Trennung zwischen Rohscan, bearbeiteter Arbeitsdatei und Webversion hilft mehr als jede spontane Improvisation. Genau hier zeigt sich dieselbe Haltung wie bei Backups oder Datenordnung insgesamt: Nicht alles in einen Topf werfen, sondern Varianten und Zustände klar unterscheiden.

Die dazu passende Medien- und Laufwerksseite liegt auf laufwerke-und-diskettenstationen.htm. Die Archiv- und Sicherungsseite liegt auf datensicherung-und-backups.htm.

[Archive Order]
> original or raw scan behalten
> native Arbeitsdatei mit Ebenen getrennt halten
> gerendertes verlustfreies Master erzeugen
> Webausgaben separat versionieren
> Quelle, Bearbeitung und Ausgabe bleiben nachvollziehbar

Dateinamen und Seitenbezug

Ein Dateiname sollte Motiv, Variante und gegebenenfalls Jahr oder Verarbeitungsschritt erkennen lassen. Zufällige Kameranamen, Nummernfolgen und mehrfaches „final-neu-2“ erschweren spätere Zuordnung. Zusätzlich sollte dokumentiert sein, auf welcher Seite oder in welchem Projekt ein Derivat verwendet wurde.

[archive/long_term_images]

Langfristige Bildarchivierung

Langfristige Archivierung verlangt mehr als ein heute lesbares Dateiformat. Format, Profil, Metadaten, Dateiintegrität, Softwareabhängigkeit und Sicherungsstrategie müssen gemeinsam betrachtet werden.

  • Originaldatei: unverändert erhalten, sofern keine rechtlichen oder sicherheitsbedingten Gründe dagegensprechen.
  • Offenes Masterformat: zusätzlich ein gut dokumentiertes, verbreitetes und möglichst verlustfreies Format speichern.
  • Farbinformation: ICC-Profil einbetten oder den Farbraum eindeutig dokumentieren.
  • Metadaten: Herkunft, Datum, Rechte, Beschreibung, Scanparameter und Bearbeitungsgeschichte erhalten.
  • Prüfsummen: unbeabsichtigte Veränderungen der Archivdateien erkennen.
  • Mehrere Kopien: Bildarchiv nicht nur auf demselben Rechner oder Datenträger halten.
  • Formatbeobachtung: Lesbarkeit und Softwareunterstützung regelmäßig prüfen und bei Bedarf kontrolliert migrieren.
  • Derivate reproduzierbar machen: Größen, Qualitätsstufen und Exportregeln dokumentieren.

TIFF, PNG, JPEG/JFIF und weitere verbreitete Formate können je nach Bildtyp und Anforderungen Teil einer Erhaltungsstrategie sein. Entscheidend ist nicht nur die Endung, sondern die konkrete Ausprägung der Datei und die vorhandene Dokumentation.

[documentation/image_sources]

Technische Referenzen

Die Format- und Farbmanagementabschnitte orientieren sich an den Spezifikationen beziehungsweise systemnahen Unterlagen von W3C, International Color Consortium, Google, Alliance for Open Media und Library of Congress.

Konkrete Scanparameter, Archivvorgaben, Druckprofile und Rechteinformationen bleiben vom einzelnen Projekt und der jeweiligen Vorlage abhängig.

[image/conclusion]

Fazit: kleine Bilder, echte Arbeit

Bildbearbeitung und Grafikalltag waren lange keine nebensächlichen Komfortthemen, sondern praktische Technikarbeit. Scans mussten gerettet, Grafiken bereinigt, Formate bewusst gewählt und Dateigrößen kontrolliert werden. Wer das nicht sauber machte, bekam unruhige Archive, langsame Seiten und sichtbar schlechte Ergebnisse.

Gerade deshalb bleibt diese Arbeit interessant. Sie zeigt, wie eng Wahrnehmung, Technik und Disziplin zusammenhängen. Ein gutes Bild ist nicht nur ein Motiv, sondern auch eine saubere technische Entscheidung. Besonders im Web galt das schon früh und gilt bis heute.

[Final Rule] image routine
> scan clean
> edit carefully
> choose format intentionally
> optimize for real use
> then image becomes calm, useful and technically honest

„Früher waren kleine Bilder oft nicht klein, weil man auf einen Knopf drückte. Sie waren klein, weil man sie geduldig in eine brauchbare Form gebracht hatte.“