perf: optimize homepage and logo images to webp

This commit is contained in:
2026-07-26 10:18:43 +02:00
parent fabc63edf5
commit 789a200595
50 changed files with 126 additions and 29 deletions
+1 -1
View File
@@ -19,7 +19,7 @@ export default function About() {
{/* Profile Card */}
<div className="glass-panel" style={{ padding: '48px', marginBottom: '40px', display: 'flex', gap: '32px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
<img src="/images/andre-knie.png" alt="Dr. André Knie" style={{ width: '140px', height: '140px', borderRadius: '50%', objectFit: 'cover', border: '3px solid rgba(var(--accent-color-rgb), 0.3)' }} />
<img src="/images/andre-knie.webp" alt="Dr. André Knie" style={{ width: '140px', height: '140px', borderRadius: '50%', objectFit: 'cover', border: '3px solid rgba(var(--accent-color-rgb), 0.3)' }} />
<div style={{ flex: 1, minWidth: '250px' }}>
<h2 style={{ marginBottom: '8px' }}>{profile?.name || 'Dr. André Knie'}</h2>
<p style={{ color: 'var(--accent-color)', marginBottom: '16px', fontSize: '0.95rem' }}>
+6 -6
View File
@@ -9,11 +9,11 @@ import PhotoBand from '../components/PhotoBand'
import './Home.css'
const PHOTO_BAND_IMAGES = [
'/images/workshop-1.jpg',
'/images/keynote-1.jpg',
'/images/workshop-2.jpg',
'/images/panel-1.jpg',
'/images/workshop-3.jpg',
'/images/workshop-1.webp',
'/images/keynote-1.webp',
'/images/workshop-2.webp',
'/images/panel-1.webp',
'/images/workshop-3.webp',
]
export default function Home() {
@@ -24,7 +24,7 @@ export default function Home() {
{/* Hero */}
<section className="hero">
<div className="app-container hero-content">
<img src="/images/andre-knie.png" alt="Dr. André Knie" className="hero-photo" />
<img src="/images/andre-knie.webp" alt="Dr. André Knie" className="hero-photo" />
<h1>
{profile?.name || 'Dr. André Knie'}
</h1>
@@ -18,7 +18,7 @@ export default function Speaking() {
{/* Speaker Bio */}
{speaking?.bio && (
<div className="glass-panel" style={{ padding: '32px', maxWidth: '900px', margin: '0 auto 48px', display: 'flex', gap: '28px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
<img src="/images/andre-knie.png" alt="Dr. André Knie" style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover', border: '2px solid rgba(var(--accent-color-rgb), 0.3)', flexShrink: 0 }} />
<img src="/images/andre-knie.webp" alt="Dr. André Knie" style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover', border: '2px solid rgba(var(--accent-color-rgb), 0.3)', flexShrink: 0 }} />
<div style={{ flex: 1, minWidth: '250px' }}>
<p style={{ color: 'var(--text-secondary)', lineHeight: 1.7, margin: '0 0 16px' }}>{speaking.bio}</p>
{speaking.style && (