perf: optimize kniepunkt images to webp, add lazy loading and thumbnails

2026-07-26 10:12:58 +02:00
parent b4cff9f396
commit fabc63edf5
190 changed files with 109 additions and 48 deletions
@@ -57,7 +57,7 @@ export default function Kniepunkt() {
            <Link to={`/kniepunkt/${issue.slug}`} key={issue.slug} className="glass-panel" style={{ padding: '0', display: 'flex', flexDirection: 'column', transition: 'transform 0.3s ease', overflow: 'hidden' }}>
              {issue.image && (
                <div style={{ width: '100%', height: '240px', overflow: 'hidden' }}>
-                  <img src={issue.image} alt={decodeHtml(issue.title)} style={{ width: '100%', height: '100%', objectFit: 'cover', borderBottom: '1px solid rgba(255,255,255,0.1)' }} />
+                  <img src={issue.image.replace('.webp', '-thumb.webp')} alt={decodeHtml(issue.title)} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', borderBottom: '1px solid rgba(255,255,255,0.1)' }} />
                </div>
              )}
              <div style={{ padding: '24px' }}>