- Remove separate mobile image (was causing file bloat and complexity)
- Use desktop.webp (716 KB) for all screen sizes via media query
- Browser's background-size: cover handles responsive display
- Simplify preload-images.html to single image preload
- Cleaner CSS without unnecessary file duplication
- Converted from mobile3.webp with cwebp -q 88 -m 6
- Resized to 556x316 (optimized for mobile)
- File size: 69 KB with excellent quality (3.22 bpp)
- Much sharper than ImageMagick resize version
- Resized mobile3.webp (5418x3070) to mobile dimensions (556x315)
- Quality: 85% WebP compression for better image clarity
- File size: 126 KB -> 66 KB (still lighter, much better quality)
- Now using consistent aspect ratio with desktop version
- Add desktop.webp (2732x1535) for desktop devices and mobile.webp (556x1535) for mobile
- Create adaptive-background.css with media queries (max-width: 736px for mobile)
- Update config.toml to use desktop.webp as default background
- Modify htmlhead.html to include adaptive-background.css
- Update preload-images.html for responsive image preloading
- Optimize background loading based on device screen width
Both images include overlay.png and gradient overlay for consistent design.
Mobile version (124 KB) is 5.8x lighter than desktop version (716 KB).
Kirik
