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:
Claude Opus 5
+124
-33
@@ -233,16 +233,37 @@ async function bauen({ quelle, ziel, breite, ausschnitt = null, dunkel = 0, guet
|
||||
}
|
||||
|
||||
const GATE = join(QUELLE, "gate-spicy-dogfather.jpeg");
|
||||
const TRESOR = join(QUELLE, "szene-tresor.png");
|
||||
|
||||
/* =====================================================================
|
||||
1. DIE ANMELDESEITE
|
||||
|
||||
BIS 2560 PIXEL, nicht bis 1600 (07.09.2026).
|
||||
|
||||
Filipe: "die grafik soll viieeeel besser aussehen bitte. die
|
||||
hintergrund bilder sollen viel hochwertiger und spezieller aussehen."
|
||||
|
||||
Die Ursache war nicht die Bildqualitaet, sondern die GROESSE. Sein
|
||||
Bildschirm ist 2550 px breit, das groesste Bild war 1600 -- der
|
||||
Browser rechnet es also um das 1,6-fache hoch. Jede Kante wird dabei
|
||||
weich, und zwar 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.
|
||||
|
||||
Fuenf Stufen statt drei, und die Guete von 0,84 auf 0,88 -- die
|
||||
Anmeldeseite ist EIN Bild, das jeder als Erstes sieht. Der Browser
|
||||
nimmt ueber `srcset` ohnehin nur die Stufe, die er braucht; ein Handy
|
||||
laedt weiterhin 68 KB.
|
||||
===================================================================== */
|
||||
console.log("\n--- Anmeldeseite ---");
|
||||
for (const b of [960, 1280, 1600]) {
|
||||
for (const b of [960, 1280, 1600, 1920, 2560]) {
|
||||
const n = await bauen({
|
||||
quelle: GATE, ziel: join(ZIEL_BUEHNE, `gate-${b}.webp`), breite: b,
|
||||
/* Nur ein Hauch. Der Neonrahmen der Tafel ist das, was die Karte
|
||||
traegt -- wer ihn wegdunkelt, hat ein huebsches Bild und eine
|
||||
Karte, die im Nichts schwebt. */
|
||||
dunkel: 0.14, guete: 0.84,
|
||||
dunkel: 0.14, guete: 0.88,
|
||||
});
|
||||
console.log(` gate-${b}.webp ${Math.round(n / 1024)} KB`);
|
||||
}
|
||||
@@ -252,47 +273,117 @@ for (const b of [960, 1280, 1600]) {
|
||||
* Erster Anlauf war falsch, und das Bildschirmfoto hat es sofort
|
||||
* gezeigt: Ich hatte den Bereich um die Tafel genommen -- die ist aber
|
||||
* LEER, und auf dem Handy liegt die Anmeldekarte ohnehin davor. Uebrig
|
||||
* blieb ein schwarzes Rechteck mit ein paar Saeulen. Kein Logo, kein
|
||||
* DogFather, nichts, woran man die Seite erkennt.
|
||||
* blieb ein schwarzes Rechteck mit ein paar Saeulen.
|
||||
*
|
||||
* Auf einem schmalen Schirm gehoert genau das ins Bild, was man
|
||||
* wiedererkennt: der Spicy-Media-Ring mit dem DogFather-Kopf darunter.
|
||||
* Die Tafel braucht dort niemand -- ihre Aufgabe (die Karte tragen)
|
||||
* uebernimmt auf dem Handy die Karte selbst. */
|
||||
for (const b of [440, 580]) {
|
||||
* Der senkrechte Schnitt ist nachgerechnet, nicht probiert: 557 px
|
||||
* Bildhoehe geteilt durch 764 Quellpixel ergibt 0,729 -- die sichtbaren
|
||||
* 157 px sind damit 215 Quellpixel, also genau der Bereich um den
|
||||
* Schriftzug SPICY MEDIA. */
|
||||
for (const b of [440, 580, 900]) {
|
||||
const n = await bauen({
|
||||
quelle: GATE, ziel: join(ZIEL_BUEHNE, `gate-hoch-${b}.webp`), breite: b,
|
||||
/* Auch SENKRECHT beschnitten. Auf dem Handy deckt die Karte alles
|
||||
unterhalb von etwa 157 px ab -- zu sehen ist nur das oberste
|
||||
Viertel des Bildes. Ohne diesen Schnitt landet dort die
|
||||
Spitze der Chili und sonst nichts. Mit ihm faellt der
|
||||
Schriftzug SPICY MEDIA in den sichtbaren Streifen, und den
|
||||
erkennt man. Nachgerechnet, nicht probiert: 557 px Bildhoehe
|
||||
geteilt durch 764 Quellpixel ergibt 0,729 -- die sichtbaren
|
||||
157 px sind damit 215 Quellpixel, also genau der Bereich um
|
||||
den Schriftzug. */
|
||||
ausschnitt: [0, 0.20, 0.52, 0.80],
|
||||
/* Hochkant liegt die Karte VOR dem Bild statt darin -- deshalb darf
|
||||
es hier deutlicher zuruecktreten. */
|
||||
dunkel: 0.30, guete: 0.82,
|
||||
dunkel: 0.30, guete: 0.86,
|
||||
});
|
||||
console.log(` gate-hoch-${b}.webp ${Math.round(n / 1024)} KB`);
|
||||
}
|
||||
|
||||
console.log("\n--- Startseite (Tresor) ---");
|
||||
/* 0,62 war zu viel: Der Tresor ist von Haus aus ein dunkles Bild, und
|
||||
der Schleier der Startseite legt noch einmal nach. Zusammen blieb
|
||||
von der Tuer ein Schemen uebrig -- im Bildschirmfoto kaum zu
|
||||
erkennen. Die alten Szenen waren heller, deshalb stand der Wert so
|
||||
hoch; eine uebernommene Zahl passt nicht automatisch zum neuen
|
||||
Bild. */
|
||||
for (const [name, breite, dunkel] of [["breit", 1600, 0.34], ["schmal", 760, 0.40]]) {
|
||||
/* =====================================================================
|
||||
2. DIE NEUN BUEHNEN
|
||||
|
||||
Bis zum 07.09.2026 zeigten alle neun Szenen DASSELBE Bild. Das war
|
||||
nie so gemeint -- die Zuordnung stand seit dem 01.09. in start.css,
|
||||
nur zeigten alle Zeilen auf dieselbe Datei. Jetzt hat jede Gruppe von
|
||||
Seiten ihr eigenes Motiv.
|
||||
|
||||
WELCHES BILD WOHIN -- und das ist nicht Geschmack, sondern folgt dem,
|
||||
was auf der Seite passiert:
|
||||
|
||||
studio Startseite Chili-Wasserfall, "More Than
|
||||
Media" -- der Eingang, das
|
||||
lebendigste der sieben
|
||||
showbuehne Dashboard, Reports Spiegelkabinett: viele Logos auf
|
||||
einmal, wie viele Creator auf
|
||||
einen Blick
|
||||
portal LIVE, Content der Splash mit den Woertern
|
||||
IDEAS / BRAND / CONTENT --
|
||||
woertlich das Thema der Seite
|
||||
garage Aufgaben, Technik Kohle und Glut, goldene Ringe:
|
||||
Werkstatt, dort wird gearbeitet
|
||||
arena Dateien, Wissen die Medaillon-Sammlung -- ein
|
||||
Archiv sieht so aus
|
||||
halle Profile, Steckbrief, dieselbe Sammlung, gespiegelt:
|
||||
Schutz es geht um Personen und Regeln,
|
||||
nicht um Betrieb
|
||||
wald Start-Check, Scout roter Ahorn am Wasser -- etwas,
|
||||
das waechst
|
||||
skyline Kalender Podest unter dem Mond, Nacht
|
||||
lounge Calls, Chat dieselbe Nachtbuehne, ruhig
|
||||
|
||||
Zwei Motive kommen doppelt vor (sieben Bilder auf neun Plaetze). Die
|
||||
Paare sind bewusst gewaehlt: arena/halle und skyline/lounge sind
|
||||
inhaltlich benachbart, und sie liegen nie nebeneinander auf einer
|
||||
Seite -- man sieht immer nur eins.
|
||||
|
||||
DREI GROESSEN JE SZENE:
|
||||
uhd 2400 px fuer grosse Schirme (bis dahin war 1600 das
|
||||
Maximum, und auf 2550 px sah man jede weiche Kante)
|
||||
breit 1600 px der Normalfall
|
||||
schmal 900 px hochkant fuers Handy, quadratisch beschnitten
|
||||
===================================================================== */
|
||||
const SZENEN = {
|
||||
studio: "sm-wasserfall.png",
|
||||
showbuehne: "sm-spiegel.png",
|
||||
portal: "sm-ideen.png",
|
||||
garage: "sm-glut.png",
|
||||
arena: "sm-medaillons.png",
|
||||
halle: "sm-medaillons.png",
|
||||
wald: "sm-ahorn.png",
|
||||
skyline: "sm-podest.png",
|
||||
lounge: "sm-podest.png",
|
||||
};
|
||||
|
||||
/* WIE STARK ABGEDUNKELT.
|
||||
|
||||
Die Bilder sind hell und farbig -- ueber ihnen steht Text. Der
|
||||
Schleier der Startseite legt noch einmal nach, deshalb reicht hier
|
||||
ein mittlerer Wert. Zu viel, und vom Motiv bleibt ein Schemen (genau
|
||||
das war beim Tresorbild der Fehler: 0,62 uebernommen, und man sah
|
||||
nichts mehr). Zu wenig, und pruef-buehne meldet zu Recht schlechten
|
||||
Kontrast an echten Bildpunkten.
|
||||
|
||||
0,42 ist gemessen, nicht geraten -- siehe den Lauf von pruef-buehne
|
||||
nach dem Bau. */
|
||||
const DUNKEL = 0.42;
|
||||
|
||||
console.log("\n--- Die neun Buehnen ---");
|
||||
let gesamt = 0;
|
||||
const gebaut = new Set();
|
||||
for (const [szene, datei] of Object.entries(SZENEN)) {
|
||||
const quelle = join(QUELLE, datei);
|
||||
const zeile = [];
|
||||
for (const [name, breite, guete] of [["uhd", 2400, 0.80], ["breit", 1600, 0.82]]) {
|
||||
const n = await bauen({
|
||||
quelle, ziel: join(ZIEL, `buehne-${szene}-${name}.webp`), breite,
|
||||
dunkel: DUNKEL, guete,
|
||||
});
|
||||
gesamt += n;
|
||||
zeile.push(`${name} ${Math.round(n / 1024)} KB`);
|
||||
}
|
||||
/* HOCHKANT: die MITTE des Bildes, hochkant beschnitten. Ein auf 9:16
|
||||
gequetschtes Breitbild zeigt sonst nur Wand -- und das Logo, um das
|
||||
es geht, steht in allen sieben Motiven mittig. */
|
||||
const n = await bauen({
|
||||
quelle: TRESOR, ziel: join(ZIEL, `buehne-dogfather-${name}.webp`), breite, dunkel,
|
||||
guete: 0.8,
|
||||
quelle, ziel: join(ZIEL, `buehne-${szene}-schmal.webp`), breite: 900,
|
||||
ausschnitt: [0.22, 0, 0.56, 1], dunkel: DUNKEL + 0.04, guete: 0.80,
|
||||
});
|
||||
console.log(` buehne-dogfather-${name}.webp ${Math.round(n / 1024)} KB`);
|
||||
gesamt += n;
|
||||
zeile.push(`schmal ${Math.round(n / 1024)} KB`);
|
||||
gebaut.add(datei);
|
||||
console.log(` ${szene.padEnd(11)} ${datei.padEnd(20)} ${zeile.join(" · ")}`);
|
||||
}
|
||||
console.log(`\n ${gebaut.size} Motive auf ${Object.keys(SZENEN).length} Buehnen, `
|
||||
+ `${Math.round(gesamt / 1024)} KB gesamt`);
|
||||
|
||||
await browser.close();
|
||||
console.log("\nFertig.");
|
||||
|
||||
Reference in New Issue
Block a user