# Messprotokoll — Bildeinbindung tissots.ch **Datum:** 15. Oktober 2026 · **Grundlage:** sechs gelieferte Aufnahmen, Prototyp `tissots-redesign.html` Dieses Dokument hält fest, was gemessen wurde und was daraus folgt. Alle Zahlen sind berechnet, nicht geschätzt. Die Skripte liegen dem Paket nicht bei, die Verfahren sind aber so beschrieben, dass sie nachvollziehbar sind. --- ## 1. Eingangsmaterial | Datei | Pixel | KB | Helligkeit | Rot/Blau | Charakter | |---|---|---|---|---|---| | 01 Tellerdessert Schokolade | 2353 × 1568 | 139 | 116.1 | 1.25 | neutral | | 02 Tartelettes in Reihe | 2353 × 1568 | 179 | 135.5 | 1.64 | warm | | 03 Cremetorte mit Blüten | 2212 × 1659 | 325 | 130.8 | 1.37 | warm | | 04 Petits-Fours-Platte | 2353 × 1568 | 183 | 146.4 | 1.52 | warm | | 05 Tellerdessert mit Sorbet | 2353 × 1568 | 152 | 136.4 | 1.43 | warm | | 06 Pralinéschachteln | 2353 × 1568 | 298 | 142.9 | 1.36 | warm | **Auflösung:** durchgehend ausreichend, alle über 2200px Breite. Kein Bild musste wegen Grösse ausscheiden. **Befund zur Einheitlichkeit:** Die Helligkeit streut über 30 Stufen (116 bis 146), der Rot/Blau-Wert von 1.25 bis 1.64. Bild 02 ist deutlich wärmer als Bild 01. Das ist der in der Vorbesprechung angekündigte Fall: In einer Kartenreihe nebeneinander wäre das sichtbar gewesen. ### Durchgeführte Harmonisierung Die Bilder für die Kartenreihe wurden aneinander angeglichen — gedeckelt auf **maximal ±8 % Kanalverstärkung und ±10 % Helligkeit**, damit sie angeglichen und nicht umgefärbt werden. Zielwerte sind die Mediane der Serie selbst (Rot/Blau 1.38, Helligkeit 137), nicht ein fremder Standard. | Bildslot | vorher (Helligkeit / R-B) | nachher | |---|---|---| | hero | 116.1 / 1.25 | 128.4 / 1.38 | | torten | 130.8 / 1.37 | 136.5 / 1.38 | | patisserie | 146.4 / 1.52 | 136.5 / 1.38 | | confiserie | 142.9 / 1.36 | 136.5 / 1.38 | | glace | 136.4 / 1.43 | 136.5 / 1.38 | | backstube | 135.5 / 1.64 | 136.5 / 1.39 | Der Farbwert liegt danach bei allen zwischen 1.38 und 1.39. Das Hero-Bild bleibt mit 128.4 bewusst dunkler als die Kartenbilder — es steht allein und nicht in einer Reihe, und die Deckelung bei ±10 % hat hier gegriffen. **Die Originaldateien liegen unverändert im Ordner `originale/`.** Wenn Ihnen die Angleichung zu weit geht, lässt sie sich jederzeit rückgängig machen; die Zuschnitte werden dann aus den Originalen neu erzeugt. --- ## 2. Zuordnung | Slot | Bild | Begründung | |---|---|---| | Hero | 01 Tellerdessert | Restaurantkontext. Passt zur Aussage „für Küchen mit Anspruch" — zeigt, wo das Produkt endet: auf dem Teller des Gastes. | | Torten | 03 Cremetorte | Einziges Tortenbild. Zeigt zugleich die Backstube im Hintergrund. | | Patisserie | 04 Petits Fours | Zeigt Bankettfähigkeit und Formatvielfalt in einem Bild. | | Confiserie & Pralinés | 06 Pralinéschachteln | Zeigt das Verkaufsformat, nicht nur das Produkt — für Detailhandel und Geschenklösungen das relevantere Argument. | | Glace & Sorbet | 05 Sorbet-Nocke | Einziges Bild mit sichtbarem Sorbet. | | Unsere Berufung | 02 Tartelettes in Reihe | Zeigt Handarbeit in Produktionsmenge — genau der Beleg, den dieser Abschnitt braucht. | ### Zwei bewusste Lücken Für **Kuchen** und **vegan/allergenarm** liegt kein Foto vor. Beide Karten zeigen im Prototyp eine schraffierte Platzhalterfläche mit dem Hinweis „Foto folgt". Die Alternative — die beiden Karten ans Ende verschieben, damit die Reihe geschlossen wirkt — wurde verworfen: Dann würde eine fehlende Datei die Reihenfolge der Produktgruppen bestimmen. Die Platzhalterfläche hält stattdessen die Proportion, das Raster behält seinen Rhythmus, und die Lücke ist als bekannt erkennbar statt als Versehen. **Zwei Aufnahmen fehlen also noch:** ein Vitrinen- oder Blechkuchen und ein veganes beziehungsweise allergenarmes Produkt. Ebenfalls noch offen: ein Porträt oder eine Aufnahme mit Personen in der Backstube, und ein Materialmakro. --- ## 3. Bildpipeline Pro Slot drei Breiten in drei Formaten, ausgespielt über `` mit `srcset` und `sizes`. - **AVIF** (Qualität 52) als erste Quelle - **WebP** (Qualität 72) als zweite - **JPEG** (Qualität 76, progressiv) als Rückfallebene im `` - `width` und `height` an jedem `` gesetzt, dazu `aspect-ratio` im CSS → **kein Layoutsprung** - Hero: `fetchpriority="high"`, kein Lazy-Loading (es ist das LCP-Element) - alle übrigen: `loading="lazy"` und `decoding="async"` - Zuschnitte: 3:2 für den Hero, 4:3 für Karten und Backstube, mittig, vertikal leicht nach oben versetzt **Formatgewinn:** Dieselbe Bildauswahl wiegt als JPEG 231 KB, als AVIF 87 KB — **62 % weniger**. --- ## 4. Übertragungsgewicht der beiden Fassungen Gerechnet für Desktop bei 1280px Fensterbreite, AVIF, nur die tatsächlich geladenen Dateien. | | Bilder gesamt | Differenz | |---|---|---| | **Fassung A** — volle Deckkraft, 1× | **87 KB** | — | | **Fassung A** — volle Deckkraft, 2× (Retina) | 177 KB | — | | **Fassung B** — zusätzlich drei Hintergründe | **266 KB** | **+179 KB, also +206 %** | Die drei Hintergrundbilder einzeln: Hero 46.8 KB, Sortiment 45.6 KB, Ablauf 86.8 KB. Auf schmalen Viewports lädt Fassung B die 800px-Variante statt der 1600px-Variante — das war eine bewusste Massnahme, um den Aufschlag auf dem Telefon zu begrenzen. --- ## 5. Kontrast in Fassung B Gemessen wurde nicht der Durchschnitt, sondern **der schlechteste Bildpunkt** unter jedem Textbereich. Verfahren: Das Kompositbild wird exakt so berechnet, wie der Browser es rendert (`0.10 × Bild + 0.90 × Flächenfarbe`), daraus die Leuchtdichte nach WCAG-Formel, daraus der Kontrast gegen jede Textfarbe — für jeden einzelnen Pixel. ### Heller Modus, 10 % Deckkraft auf `#FAF6F0` | Hintergrund | Fliesstext `#2A1715` | gedämpft `#5E4440` | Akzent `#7C352D` | |---|---|---|---| | Hero | 12.68 : 1 | 6.57 : 1 | 6.50 : 1 | | Sortiment | 12.66 : 1 | 6.56 : 1 | 6.49 : 1 | | Ablauf | 12.69 : 1 | 6.58 : 1 | 6.50 : 1 | ### Dunkler Modus, 12 % Deckkraft auf `#19100F` | Hintergrund | Fliesstext `#F5EDE4` | gedämpft `#C9B5A8` | |---|---|---| | Hero | 11.85 : 1 | 6.97 : 1 | | Sortiment | 11.88 : 1 | 6.99 : 1 | | Ablauf | 11.84 : 1 | 6.96 : 1 | **Ergebnis: auf 0.00 % der Fläche fällt irgendein Textpaar unter 4.5 : 1.** Der schlechteste Wert über alle Bänder, Modi und Textfarben liegt bei 6.49 : 1 — also noch über AAA für Fliesstext. **Das ist ausdrücklich eine Korrektur meiner eigenen Vorbehalte.** Ich hatte Kontrast als handhabbares, nicht als entscheidendes Risiko bezeichnet; die Messung bestätigt das. Wer gegen die Hintergrundvariante argumentieren will, kann sich auf Barrierefreiheit **nicht** berufen. Sie ist in dieser Umsetzung sauber. --- ## 6. Sichtbare Wirkung in Fassung B Gemessen als Streuung der Leuchtdichte, die das Bild einer sonst gleichmässigen Fläche hinzufügt: | Band | Flächenfarbe | zusätzliche Streuung | Kosten | |---|---|---|---| | Hero | `#FAF6F0` | 8.7 Stufen | 46.8 KB | | Sortiment | `#F2EAE0` | 9.5 Stufen | 45.6 KB | | Ablauf | `#FAF6F0` | 8.4 Stufen | 86.8 KB | Rund **3.5 % des Tonwertumfangs**. Im direkten Vergleich (`vergleich-a-b.png`) bedeutet das: - **Im Hero ist der Effekt deutlich sichtbar** — als weiche, farbige Flecken. Das Motiv selbst ist nicht erkennbar; niemand sieht dort Petits Fours. Die Tonwertschwankung liegt direkt hinter der Hauptüberschrift und dem Einleitungstext, und der sekundäre Knopf „Sortiment ansehen" verliert etwas Kontur, weil sein Umriss nicht mehr auf gleichmässigem Grund steht. - **Im Sortimentband ist der Effekt fast unsichtbar** — das Band liegt ohnehin auf einer abgesetzten Fläche, das Bild fügt kaum etwas hinzu. 45.6 KB für einen Effekt, den man suchen muss. - **Nebenwirkung in beiden Bändern:** Die echten Produktfotos in den Karten wirken etwas schwächer, weil das Umfeld nicht mehr ruhig ist. Die Bilder konkurrieren mit dem Hintergrund, der aus denselben Bildern stammt. --- ## 7. Fazit Die Hintergrundvariante ist technisch einwandfrei umgesetzt und barrierefrei unbedenklich. Sie scheitert nicht an der Zugänglichkeit, sondern an der Rechnung: > **+206 % Bildgewicht für 3.5 % Tonwertvariation** — und zwar ausgerechnet dort stark, wo sie die Überschrift stört, und dort schwach, wo sie unschädlich wäre. Meine Empfehlung bleibt **Fassung A**. Falls Sie die Atmosphäre trotzdem wollen, ist der günstigste Weg nicht das Produktfoto, sondern ein **Materialmakro** — temperierte Couverture oder Marmorplatte — in genau einem Band, dunkel überblendet. Das kostet bei gleicher Wirkung einen Bruchteil, weil eine strukturlose Oberfläche viel stärker komprimiert als ein detailreiches Motiv, und es nimmt den Produktfotos nichts weg. Ein möglicher Mittelweg, falls Ihnen Fassung A zu nüchtern erscheint: die Hintergrundbilder **nur im Hero** einsetzen und die beiden anderen Bänder ruhig lassen. Das kostet 46.8 statt 179 KB und beschränkt die Nebenwirkung auf einen Abschnitt. --- ## 8. Geprüft - Renderdurchläufe beider Fassungen in Chromium bei 500px und 1280px, hell und dunkel - Ausgeglichene Klammerpaare im Stylesheet, ausgeglichene HTML-Tags, gültiges JSON-LD, genau eine `

` - Alle sechs `` mit `alt`-Text und mit gesetzten `width`/`height` - Pixeldifferenz A zu B: 39.8 % der Fläche verändert, mittlere Abweichung 4.2 Stufen — bestätigt, dass die Fassungen sich ausschliesslich im Hintergrund unterscheiden und sonst identisch sind ## 9. Dateien in diesem Paket ``` index.html Auswahlseite — hier starten index-a-volle-deckkraft.html Fassung A — Empfehlung index-b-hintergruende.html Fassung B — wie angefragt img/ 72 Dateien: AVIF, WebP, JPEG in drei Breiten originale/ die sechs gelieferten Aufnahmen, unverändert MESSUNG.md dieses Dokument ``` Starten Sie bei `index.html`. Beide Fassungen brauchen den Ordner `img/` daneben. Zum Ansehen genügt ein Doppelklick — es wird kein Server gebraucht.