Bilder beim Build automatisch zu WebP optimieren#4
Merged
Conversation
Raster images (jpg/jpeg/png) in blog/material entries are converted to resized WebP during the build (max 1600px, quality 80), recursively including subfolders. Originals are removed from dist; SVG/GIF are left untouched. header.url (+ its dimensions) and all content <img> references are rewritten to the WebP variant, so entry.json AND list.json point at the optimized files. Every consuming site (angular.schule, angular-buch.com, agentic.schule, …) benefits automatically. Verified against both article repos: 0 jpg/png left in dist, GIFs preserved, ~54-66% image size reduction (e.g. a 2000px/421KB hero -> 1600px/193KB). - shared/image-optimizer.ts (+ spec): sharp-based conversion + reference rewriting - copyEntriesToDist: optimize + rewrite in place - build.ts: write list.json AFTER copyEntriesToDist so it reflects WebP headers - add sharp dependency
Member
Author
|
Ich merge das einfach mal, entweder es funktioniert oder halt nicht. 😅 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Warum
Die Article-Bilder werden aktuell unoptimiert ausgeliefert (z. B. ein Hero als 2000px/421 KB JPEG). Das kostet auf allen konsumierenden Sites Ladezeit — messbar in Lighthouse (LCP importierter Artikel ~3,7 s).
Beim Build werden Raster-Bilder (jpg/jpeg/png) in
copyEntriesToDistper sharp zu WebP konvertiert:.../buch700/foto.jpg)distentfernt; SVG/GIF bleiben unangetastetheader.url(+ neue Maße) und alle Content-<img>-Referenzen werden auf die WebP-Variante umgeschrieben — in entry.json UND list.jsonVerifiziert
Voll-Build gegen beide Article-Repos:
distübrig, GIFs erhaltenentry.json+list.jsonreferenzieren konsistent.webpmit korrigierten Maßenimage-optimizer.spec+ angepasstemcopyEntriesToDist-Test),typechecksauberRollout
Nach dem Merge ziehen die Article-Repos das Submodul und bauen neu → CDN liefert WebP.