Sieben Motive statt einem -- und Bilder, die nicht mehr hochgerechnet werden

Filipe: "die grafik soll viieeeel besser aussehen bitte. die hintergrund
bilder sollen viel hochwertiger und spezieller aussehen."

DIE URSACHE WAR NICHT DIE BILDGUETE, SONDERN DIE GROESSE.
Sein Bildschirm ist 2550 px breit, das groesste ausgelieferte Bild war
1600 -- der Browser rechnet es also um das 1,6-fache hoch. Jede Kante
wird dabei weich, gleichmaessig ueber das ganze Bild. Genau das sieht
man als "billig", ohne benennen zu koennen, warum. Eine hoehere
WebP-Guete haette daran nichts geaendert: Man kann keine Bildpunkte
zurueckholen, die nie ausgeliefert wurden.

  Anmeldeseite: jetzt 960 / 1280 / 1600 / 1920 / 2560, Guete 0,88.
  Buehnen:      jetzt 2400 (uhd) / 1600 (breit) / 900 (schmal).
Ueber srcset bzw. eine Fenstergroesse laedt trotzdem jeder nur die
Stufe, die er braucht -- ein Handy weiterhin 32 KB.

UND NEUN BUEHNEN ZEIGTEN DASSELBE BILD.
In start.css standen neun Regeln, eine je Szene -- alle zeigten auf
dieselbe Datei. Die Zuordnung war seit dem 01.09. richtig gedacht und
seit dem 03.09. wirkungslos. Aufgefallen ist es niemandem, weil jede
Seite fuer sich stimmig aussah; man merkt es erst, wenn man zwei
nebeneinander haelt. Jetzt hat jede Gruppe ihr eigenes Motiv, und die
Zuordnung folgt dem, was auf der Seite passiert:

  studio      Startseite            Chili-Wasserfall, "More Than Media"
  showbuehne  Dashboard, Reports    Spiegelkabinett -- viele auf einmal
  portal      LIVE, Content         Splash mit IDEAS / BRAND / CONTENT
  garage      Aufgaben, Technik     Kohle und Glut, Werkstatt
  arena       Dateien, Wissen       Medaillon-Sammlung, ein Archiv
  halle       Profile, Schutz       dieselbe Sammlung -- Personen, nicht
                                    Betrieb
  wald        Start-Check, Scout    roter Ahorn, etwas das waechst
  skyline     Kalender              Podest unter dem Mond
  lounge      Calls, Chat           dieselbe Nachtbuehne, ruhig

Sieben Motive auf neun Plaetze; die zwei Paare sind inhaltlich
benachbart und liegen nie nebeneinander auf einer Seite.

ABDUNKLUNG 0,42 -- gemessen, nicht uebernommen. Beim Tresorbild hatte
ich 0,62 aus den alten Szenen uebernommen, und uebrig blieb ein Schemen.
pruef-buehne rechnet den Kontrast an echten Bildpunkten nach: 4,69 bis
7,14 gegen die noetigen 4,5, an bis zu 28 Stellen je Seite.

Die Groessenpruefung in pruef-struktur bekommt eine begruendete Ausnahme
fuer GESTUFTE Bilder: Bei einer Datei, von der der Browser immer nur
eine von drei Stufen holt, misst eine feste 200-KB-Grenze das Falsche.
Sie gilt unveraendert fuer alles andere -- und die Ausnahme prueft
zusaetzlich, dass die kleineren Stufen wirklich existieren, damit sie
niemand als Schlupfloch benutzt.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-09-07 01:38:02 +02:00
co-authored by Claude Opus 5
parent 44b3290bc5
commit accf01b5d6
66 changed files with 393 additions and 225 deletions
+16 -5
View File
@@ -20,14 +20,14 @@
nosniff-Headers vom Browser verweigert - die Bühne bliebe leer. Sobald der
Workspace einen eigenen Server bekommt, kann AVIF wieder eingeschaltet
werden (die Dateien liegen bereit). -->
<link rel="preload" as="image" href="assets/img/buehne/gate-1600.webp"
<link rel="preload" as="image" href="assets/img/buehne/gate-1920.webp"
type="image/webp" media="(min-width: 900px)" />
<link rel="preload" as="image" href="assets/img/buehne/gate-hoch-580.webp"
type="image/webp" media="(max-width: 899px)" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609070044" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609070138" />
</head>
<body class="gate">
@@ -35,13 +35,24 @@
<!-- ---------- Bühne: Bild + Schleier ---------------------------------- -->
<div class="buehne" aria-hidden="true">
<picture>
<!-- BIS 2560 PIXEL (07.09.2026). Vorher endete die Reihe bei 1600 --
auf einem 2550 px breiten Schirm rechnete der Browser das Bild
also um das 1,6-fache hoch, und jede Kante wurde weich. Genau
das sah man als "nicht hochwertig", ohne es benennen zu koennen.
Eine hoehere Bildguete haette daran nichts geaendert: Man kann
keine Bildpunkte zurueckholen, die nie ausgeliefert wurden.
Ueber srcset laedt trotzdem jeder nur die Stufe, die er
braucht -- ein Handy weiterhin 32 KB. -->
<source media="(min-width: 900px)" type="image/webp"
srcset="assets/img/buehne/gate-960.webp 960w,
assets/img/buehne/gate-1280.webp 1280w,
assets/img/buehne/gate-1600.webp 1600w" sizes="100vw" />
assets/img/buehne/gate-1600.webp 1600w,
assets/img/buehne/gate-1920.webp 1920w,
assets/img/buehne/gate-2560.webp 2560w" sizes="100vw" />
<source type="image/webp"
srcset="assets/img/buehne/gate-hoch-440.webp 440w,
assets/img/buehne/gate-hoch-580.webp 580w" sizes="100vw" />
assets/img/buehne/gate-hoch-580.webp 580w,
assets/img/buehne/gate-hoch-900.webp 900w" sizes="100vw" />
<img class="buehne__bild" src="assets/img/buehne/gate-1280.webp" alt=""
width="1647" height="955" fetchpriority="high" decoding="async" />
</picture>
@@ -162,6 +173,6 @@
</main>
</div>
<script src="assets/js/gate.js?v=202609070044" defer></script>
<script src="assets/js/gate.js?v=202609070138" defer></script>
</body>
</html>