- Changed from 300% to 800% for better mobile composition
- Image appears even more zoomed out on mobile devices
- Better visibility of full scene without extreme cropping
- Change background-size from cover to 300% on mobile devices
- Makes the image appear 3x further away
- Better composition and less cropped view of the scene
- 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
- 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