Skip to content

Favicon und Logo halbiert: 126 → 65 KB und 108 → 64 KB (v71) - #68

Merged
daimpad merged 3 commits into
mainfrom
claude/datenlotse-frontend-setup-r4ylco
Nov 2, 2026
Merged

daimpad merged 3 commits into
mainfrom
claude/datenlotse-frontend-setup-r4ylco

Conversation

@daimpad

@daimpad daimpad commented Nov 2, 2026 •

Copy link
Copy Markdown
Owner

favicon.svg und logo.svg sind dasselbe Logo: 252 Pfade in einem Raster von 2.835 Einheiten. Das Favicon trug Koordinaten mit zwei Nachkommastellen und steckte im Rahmen eines Favicon-Generators (126 KB). Das Logo trägt seit v45 eine Nachkommastelle (108 KB) und ist die größte Einzeldatei der Startseite.

Jetzt 65 KB (−49 %) und 64 KB (−41 %, gzip 41 → 26 KB). Optisch sind beide nicht vom Original zu unterscheiden.

Wie

tools/shrink-svg.py ist ein eigenes Werkzeug, kein Fremdpaket:

  • Echter Pfad-Parser. Bogen-Flags dürfen in SVG ohne Trenner stehen (a5 5 0 01 10 10) und werden zeichenweise gelesen. Eine Zahlen-Regex zerlegt das falsch – derselbe Fehlertyp wie 1.5.5, der in v45 schon einmal eine Grafik zerstört hat.
  • Absolut runden, dann relativ schreiben. Wer relative Werte rundet, häuft die Fehler entlang des Pfads an.
  • Je Segment die kürzere Schreibweise, Trenner nur wo nötig, gruppierte Klassen. Pfade werden bewusst nicht zusammengelegt – bei überlappenden Teilpfaden änderte das die Füllung.

Wie geprüft

Prüfung Ergebnis
Rundlauf ohne Browser: alle 252 Pfade neu eingelesen und gegen die gerundeten Absolutwerte verglichen 0 Abweichungen
Grundrausch-Pegel: Umbau ohne jede Rundung, Pixelvergleich bis 13/255 – der Browser summiert relative Koordinaten in einfacher Gleitkommagenauigkeit
Favicon, ganzzahlige Rundung, 16–512 px Ø 0,3–0,5/255
Logo, ganzzahlige Rundung, 44 / 88 / 172 / 344 / 516 px Ø 0,3–0,5/255, Maximum 58–88/255
Logo bei 1024 px (größer, als es irgendwo gezeigt wird) zwei Kantenpixel bei 124/255, zehnfach vergrößert nicht zu unterscheiden
Gröberes Raster nur 4–8 KB zusätzliche Ersparnis, Pixel kippen um bis zu 200/255 → verworfen

Tests messen gegen das Original

Die Referenzbilder zeigen die Originale:

  • tests/fixtures/favicon-referenz-180.png – Favicon bei 180 px
  • tests/fixtures/logo-referenz-344.png – Logo bei 344 px, also der Hero (172 px) bei doppelter Pixeldichte

Beide Tests verlangen Ø < 1 und keinen Farbkanal mit mehr als 120 Abweichung. Dazu kommt je eine Größengrenze von 70 KB. Der Pixelvergleich steckt in einer gemeinsamen Hilfsfunktion.

Drei Mutationen, je Datei einzeln geprüft:

Mutation rot
Original zurückkopiert Größentest
gröberes Raster Pixeltest
vertauschte Bogen-Flags (das Fehlerbild eines naiven Parsers) Pixeltest

Lokal sind alle 390 Tests grün (3,5 Minuten).

Ladegewicht

Das Budget der Startseite (700 KB, ohne den Zähl-Aufruf) hat wieder rund 48 KB Luft statt 5,5. Das Favicon zählt nicht mit, weil es meist erst nach networkidle lädt; jeder Besucher lädt es trotzdem.

Nebenbei

Beim Rundlauf-Test war tools/__pycache__/ entstanden und in den ersten Commit geraten. Ein späterer Commit entfernt es, und __pycache__/ steht jetzt in .gitignore.


🤖 Generated with Claude Code

https://claude.ai/code/session_011QxDJcLg9h8zdL9ZpTTty7

favicon.svg war das vollstaendige Logo (252 Pfade) mit zwei Nachkomma-
stellen in einem 2.835er-Raster, im Rahmen eines Favicon-Generators - 126 KB
fuer eine Darstellung bei 16 bis 64 px, wo eine Rastereinheit 0,02 px misst.

tools/shrink-svg.py (eigenes Werkzeug, kein Fremdpaket): echter Pfad-Parser,
der Bogen-Flags zeichenweise liest; Rundung absolut auf ganze Einheiten und
erst danach relative Schreibweise; je Segment die kuerzere Form; gruppierte
Klassen. Pfade werden bewusst nicht zusammengelegt (Fuellregel).

Beweise:
- Rundlauf ohne Browser: alle 252 Pfade neu eingelesen, null Abweichungen
  gegen die gerundeten Absolutwerte.
- Pixelvergleich im Browser bei 16-512 px. Grundrausch-Pegel bestimmt: schon
  der Umbau ohne Rundung erzeugt bis 13/255 (der Browser summiert relative
  Koordinaten in float32). Ganzzahlige Rundung: Oe 0,35, die groesste
  Einzelabweichung zehnfach vergroessert nicht zu unterscheiden.
- Verworfen: groeberes Raster (4-8 KB mehr Ersparnis, aber Pixel kippen bei
  180 px um bis zu 200/255). Die Option ist wieder entfernt.

Tests messen gegen ein Referenzbild des Originals (tests/fixtures/), nicht
gegen sich selbst. Drei Mutationen einzeln geprueft: Original zurueck ->
Groessentest rot; groeberes Raster und vertauschte Bogen-Flags -> Pixeltest
rot. 2 neue Tests, 388 gesamt.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011QxDJcLg9h8zdL9ZpTTty7
Beim Rundlauf-Test von tools/shrink-svg.py entstand tools/__pycache__/ und
rutschte mit in den vorigen Commit.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011QxDJcLg9h8zdL9ZpTTty7
Dasselbe Werkzeug und derselbe Aufruf wie beim Favicon: Koordinaten
absolut auf ganze Rastereinheiten gerundet, dann relativ geschrieben.
gzip 41 → 26 KB. Das Ladegewicht-Budget der Startseite hat damit wieder
rund 48 KB Luft statt 5,5.

Gemessen gegen das Original bei 44 bis 1024 px; im Test bei 344 px (Hero
bei doppelter Pixeldichte, die größte Darstellung in der App) gegen
tests/fixtures/logo-referenz-344.png: Ø 0,37, höchstens 88/255. Drei
Mutationen einzeln rot (Original zurück, Raster auf Zehner, vertauschte
Bogen-Flags). Pixelvergleich in eine gemeinsame Hilfsfunktion gezogen.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011QxDJcLg9h8zdL9ZpTTty7
@daimpad daimpad changed the title Favicon von 126 auf 65 KB verkleinert (v71) Favicon und Logo halbiert: 126 → 65 KB und 108 → 64 KB (v71) Nov 2, 2026
@daimpad
daimpad merged commit b6edf39 into main Nov 2, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants