perf(assets): convert images to webp and check asset paths

Convert 26 PNG/JPG assets to WebP: max 1600 px, q80, diagrams lossless.
src/assets shrinks from 8.3 MB to 4.2 MB.
Use me.jpg for og:image and twitter:image; some crawlers skip WebP.
Add scripts/check-assets.mjs to lint, so a wrong asset path fails lint,
not only at runtime.

.gitattributes

@@ -46,6 +46,7 @@ Dockerfile  text eol=lf
 *.jpeg binary
 *.gif  binary
 *.ico  binary
+*.webp binary
 *.pdf  binary
 *.zip  binary
 *.tar  binary

README.md

@@ -90,6 +90,7 @@ Then open http://localhost:8080
 | `npm test` | Unit tests (Vitest + jsdom, no browser needed) |
 | `npm run lint` | ESLint over `src/**/*.ts` and `src/**/*.html` |
 | `npm run i18n:check` | Verifies `en.json` and `de.json` share the exact same keys |
+| `npm run assets:check` | Verifies every asset path referenced in `src/` exists (also runs in `npm run lint`) |
 
 ---
 
@@ -102,7 +103,7 @@ Triggered on every push to `main` and on pull requests targeting `main`.
 
 **Job 1 — `quality-check`** (runs on both pushes and PRs):
 
-1. Lint & type check — `npm run lint`
+1. Lint & type check — `npm run lint` (includes `npm run assets:check`)
 2. i18n key sync — `npm run i18n:check`
 3. Unit tests — `npm test`
 4. Production build — `npx ng build --configuration production`

package.json

@@ -7,8 +7,9 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test --watch=false",
-    "lint": "ng lint",
+    "lint": "ng lint && npm run assets:check",
-    "i18n:check": "node scripts/check-i18n.mjs"
+    "i18n:check": "node scripts/check-i18n.mjs",
+    "assets:check": "node scripts/check-assets.mjs"
   },
   "private": true,
   "dependencies": {

scripts/check-assets.mjs

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+// Verifies that every asset path in AssetsConstants.ts and index.html exists.
+// A wrong path builds fine and only 404s at runtime.
+
+import { existsSync, readFileSync, readdirSync } from 'node:fs';
+import { join, dirname, extname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const srcDir = join(dirname(fileURLToPath(import.meta.url)), '..', 'src');
+const EXTENSIONS = new Set(['.ts', '.html', '.scss', '.json']);
+
+function* walk(dir) {
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      yield* walk(path);
+    } else if (EXTENSIONS.has(extname(path)) && !path.endsWith('.spec.ts')) {
+      yield path;
+    }
+  }
+}
+
+const missing = [];
+for (const file of walk(srcDir)) {
+  const content = readFileSync(file, 'utf8');
+  for (const [, path] of content.matchAll(/\b(assets\/[\w./-]+)/g)) {
+    if (!existsSync(join(srcDir, path))) {
+      missing.push(`${file}: ${path}`);
+    }
+  }
+}
+
+if (missing.length > 0) {
+  console.error(`Missing assets:\n${missing.join('\n')}`);
+  process.exit(1);
+}
+console.log('All referenced assets exist.');

src/app/constants/AssetsConstants.ts

@@ -1,44 +1,44 @@
 export class AssetsConstants {
 
   static readonly ME = '/assets/me.webp';
-  static readonly LOGO = '/assets/logos/logo-wolf.png';
+  static readonly LOGO = '/assets/logos/logo-wolf.webp';
   static readonly FLAG_DE = '/assets/flags/de.svg';
   static readonly FLAG_EN = '/assets/flags/gb.svg';
 
   //logos
   static readonly CHAMAELEON_LOGO = '/assets/logos/logo_chamaeleon.svg';
   static readonly TH_BINGEN_LOGO = '/assets/logos/bingen-logo-white.svg';
-  static readonly ASSYST_LOGO = '/assets/logos/assyst_gmbh_logo.jpg';
+  static readonly ASSYST_LOGO = '/assets/logos/assyst_gmbh_logo.webp';
-  static readonly COLORDIGITAL_LOGO = '/assets/logos/dmixcloud_logo.jpg';
+  static readonly COLORDIGITAL_LOGO = '/assets/logos/dmixcloud_logo.webp';
-  static readonly TERAPORT_LOGO = '/assets/logos/teraport_gmbh_logo.jpg';
+  static readonly TERAPORT_LOGO = '/assets/logos/teraport_gmbh_logo.webp';
 
   static readonly DIPLOMA = '/assets/projects/diploma/Dahm2010-Diplomarbeit.pdf';
 
   //project images
   static readonly PLAYGROUND_IMAGES = [
-    '/assets/projects/playground/1.png'
+    '/assets/projects/playground/1.webp'
   ];
 
   static readonly EL_MUCHO_IMAGES = [
-    '/assets/projects/el-mucho/1.jpg',
+    '/assets/projects/el-mucho/1.webp',
-    '/assets/projects/el-mucho/2.jpg',
+    '/assets/projects/el-mucho/2.webp',
-    '/assets/projects/el-mucho/3.jpg',
+    '/assets/projects/el-mucho/3.webp',
-    '/assets/projects/el-mucho/4.jpg'
+    '/assets/projects/el-mucho/4.webp'
   ];
 
   static readonly GAME_JAMS_IMAGES = [
-    '/assets/projects/game-jams/1.png',
+    '/assets/projects/game-jams/1.webp',
-    '/assets/projects/game-jams/2.png',
+    '/assets/projects/game-jams/2.webp',
-    '/assets/projects/game-jams/3.png'
+    '/assets/projects/game-jams/3.webp'
   ];
 
   static readonly DIPLOMA_IMAGES = [
-    '/assets/projects/diploma/1.jpg',
+    '/assets/projects/diploma/1.webp',
-    '/assets/projects/diploma/2.jpg',
+    '/assets/projects/diploma/2.webp',
-    '/assets/projects/diploma/3.jpg',
+    '/assets/projects/diploma/3.webp',
-    '/assets/projects/diploma/4.jpg',
+    '/assets/projects/diploma/4.webp',
-    '/assets/projects/diploma/5.jpg',
+    '/assets/projects/diploma/5.webp',
-    '/assets/projects/diploma/6.jpg'
+    '/assets/projects/diploma/6.webp'
   ];
 
   static readonly CLAUDE_BOX_IMAGES = [
@@ -46,16 +46,16 @@ export class AssetsConstants {
   ];
 
   static readonly TRIBBLE_IMAGES = [
-    '/assets/projects/tribble-the-homeserver/1.png',
+    '/assets/projects/tribble-the-homeserver/1.webp',
-    '/assets/projects/tribble-the-homeserver/2.png',
+    '/assets/projects/tribble-the-homeserver/2.webp',
-    '/assets/projects/tribble-the-homeserver/3.png',
+    '/assets/projects/tribble-the-homeserver/3.webp',
-    '/assets/projects/tribble-the-homeserver/4.png'
+    '/assets/projects/tribble-the-homeserver/4.webp'
   ];
 
   static readonly TBP_IMAGES = [
-    '/assets/projects/to-be-played/1.png',
+    '/assets/projects/to-be-played/1.webp',
-    '/assets/projects/to-be-played/2.png',
+    '/assets/projects/to-be-played/2.webp',
-    '/assets/projects/to-be-played/3.png',
+    '/assets/projects/to-be-played/3.webp',
-    '/assets/projects/to-be-played/4.png'
+    '/assets/projects/to-be-played/4.webp'
   ];
 }

src/app/layout/topbar/topbar.component.html

@@ -1,6 +1,6 @@
 <mat-toolbar class="flex! items-center! p-[clamp(0.5rem,1vw,1rem)]! backdrop-blur-sm! backdrop-saturate-[1.1]! bg-white/80! dark:bg-[#313131]/80! border-b! border-black/8!" color="primary" (keydown)="onKeydown($event)">
   <a class="flex items-center gap-[clamp(0.4rem,1vw,0.6rem)] text-inherit no-underline" routerLink="/">
-    <img class="w-[clamp(36px,10vw,48px)] h-auto rounded-full" src="{{AssetsConstants.LOGO}}" width="117" height="128" alt="" aria-hidden="true" draggable="false"
+    <img class="w-[clamp(36px,10vw,48px)] h-auto rounded-full" [ngSrc]="AssetsConstants.LOGO" width="117" height="128" loading="eager" alt="" aria-hidden="true" draggable="false"
       oncontextmenu="return false;">
     <span class="font-semibold tracking-[0.2px] text-[clamp(1rem,3vw,1.2rem)]">{{ 'APP.TITLE' | translate }}</span>
   </a>

src/app/layout/topbar/topbar.component.ts

@@ -5,6 +5,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { NgOptimizedImage } from '@angular/common';
 import { TranslatePipe } from '@ngx-translate/core';
 import { ThemeService } from '../../service/theme.service';
 import { LanguageService } from '../../service/language.service';
@@ -17,7 +18,7 @@ import {RouterConstants} from '../../constants/RouterConstants';
   imports: [
     RouterLink, RouterLinkActive,
     MatToolbarModule, MatIconModule, MatButtonModule, MatMenuModule, MatTooltipModule,
-    TranslatePipe, MatDivider
+    TranslatePipe, MatDivider, NgOptimizedImage
   ],
   templateUrl: './topbar.component.html',
   changeDetection: ChangeDetectionStrategy.Eager,

src/index.html

@@ -19,12 +19,12 @@
   <meta property="og:title" content="Andreas Dahm – Playground">
   <meta property="og:description" content="Portfolio and interactive playground of Andreas Dahm, senior software developer: algorithm visualizations, GPU simulations and personal projects.">
   <meta property="og:url" content="https://andreas-dahm.eu/">
-  <meta property="og:image" content="https://andreas-dahm.eu/assets/me.webp">
+  <meta property="og:image" content="https://andreas-dahm.eu/assets/me.jpg">
 
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="Andreas Dahm – Playground">
   <meta name="twitter:description" content="Portfolio and interactive playground of Andreas Dahm, senior software developer: algorithm visualizations, GPU simulations and personal projects.">
-  <meta name="twitter:image" content="https://andreas-dahm.eu/assets/me.webp">
+  <meta name="twitter:image" content="https://andreas-dahm.eu/assets/me.jpg">
 
   <link rel="icon" type="image/x-icon" href="assets/favicon.ico">