Add responsive scaled image variants for large PNG assets #1173
Conversation
…ive loading Co-authored-by: litlfred <662242+litlfred@users.noreply.github.com>
Co-authored-by: litlfred <662242+litlfred@users.noreply.github.com>
…-platform support Co-authored-by: litlfred <662242+litlfred@users.noreply.github.com>
🚀 Deployment Status: Successfully Deployed 🟢📊 Deployment InformationWorkflow: Deploy Feature Branch (🔀 Pull Request) 🌐 Preview URLs🔗 Quick Actions📦 Build Artifacts Status
🟢 All artifacts available! Click artifact names above or visit workflow artifacts section. How to download:
📊 Overall ProgressBranch: 📋 Deployment Timeline
💡 This comment is automatically updated as the deployment progresses. |
🔒 Dependency Security Check Results |
🔍 Framework Compliance Report
Generated: 2025-10-25 12:26:12 UTC 📊 Summary
📦 Nested Layouts (4 components)
|
🔒 Security Check Report🟢 5 passed • 🟡 2 warnings Security Checks
🔍 Action Items
|
🚀 Deployment Status: Successfully Deployed 🟢📊 Deployment InformationWorkflow: Deploy Feature Branch (🔀 Pull Request) 🌐 Preview URLs🔗 Quick Actions📦 Build Artifacts Status
🟢 All artifacts available! Click artifact names above or visit workflow artifacts section. How to download:
📊 Overall ProgressBranch: 📋 Deployment Timeline
💡 This comment is automatically updated as the deployment progresses. |
There was a problem hiding this comment.
Pull Request Overview
This PR implements responsive image optimization for 37 large PNG assets (up to 3.7MB each) that were causing slow page loads. The solution generates scaled variants (600px desktop, 300px mobile) and automatically serves the appropriate version based on screen size and theme, achieving 93% bandwidth reduction on mobile and 74% on desktop.
Key changes:
- Enhanced
useThemeImagehook to detect screen width and serve size-appropriate variants with automatic resize handling - Created batch generation script (
generate-scaled-images.sh) producing 76 optimized image variants - Added comprehensive documentation guide covering regeneration procedures and performance metrics
Reviewed Changes
Copilot reviewed 3 out of 79 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/hooks/useThemeImage.js | Added screen width detection, resize listener, and logic to serve 300px or 600px variants based on viewport size while maintaining theme switching |
| scripts/generate-scaled-images.sh | New bash script that generates scaled PNG variants using ImageMagick with size reporting and error handling |
| IMAGE_OPTIMIZATION_GUIDE.md | Complete documentation covering naming conventions, regeneration procedures, performance metrics, and troubleshooting guidance |
| const handleResize = () => { | ||
| updateImagePath(); | ||
| }; | ||
| window.addEventListener('resize', handleResize); |
There was a problem hiding this comment.
The resize event listener triggers on every resize event, which can fire hundreds of times during a single resize action. Consider debouncing or throttling this handler to reduce unnecessary image path recalculations and improve performance.
| errors=0 | ||
|
|
||
| # Find all PNG files larger than 200KB and store in array | ||
| mapfile -t png_files < <(find public -name "*.png" -size +200k -type f | sort) |
There was a problem hiding this comment.
The mapfile builtin is a Bash 4+ feature that may not be available on older systems or in scripts using #!/bin/sh. Consider using a more portable approach like while read for better compatibility, or ensure the shebang explicitly requires bash.
| mapfile -t png_files < <(find public -name "*.png" -size +200k -type f | sort) | |
| png_files=() | |
| while IFS= read -r file; do | |
| png_files+=("$file") | |
| done < <(find public -name "*.png" -size +200k -type f | sort) |
| - **Mobile (3G)**: ~85 seconds → ~6 seconds (93% faster) | ||
| - **Desktop (Cable)**: ~3 seconds → ~0.8 seconds (73% faster) |
There was a problem hiding this comment.
The percentage calculation appears incorrect. The time reduction from 85s to 6s is approximately 93% reduction in time, not 93% faster. "93% faster" would mean the new time is 7% of the improvement, which doesn't match these numbers. Consider using "93% reduction in loading time" or "14x faster" for clarity.
| - **Mobile (3G)**: ~85 seconds → ~6 seconds (93% faster) | |
| - **Desktop (Cable)**: ~3 seconds → ~0.8 seconds (73% faster) | |
| - **Mobile (3G)**: ~85 seconds → ~6 seconds (93% reduction in loading time, ~14x faster) | |
| - **Desktop (Cable)**: ~3 seconds → ~0.8 seconds (73% reduction in loading time, ~3.75x faster) |
37 PNG files (up to 3.7MB each) were causing slow page loads. All images displayed at fixed CSS sizes (12em desktop, 6em mobile) but served at full resolution.
Changes
Image generation
image_600.png,image_300.png,image_grey_tabby_600.png, etc.Code changes
useThemeImagehook to detect screen width and serve appropriate variant:<768px: 300px version≥768px: 600px versionTooling
scripts/generate-scaled-images.sh: Batch regeneration script for new imagesIMAGE_OPTIMIZATION_GUIDE.md: Complete documentation with cross-platform instructionsImpact
DAK Dashboard with 9 component cards:
Sample reductions:
Warning
Firewall rules blocked me from connecting to one or more addresses (expand for details)
I tried to connect to the following addresses, but was blocked by firewall rules:
esm.ubuntu.com/usr/lib/apt/methods/https(dns block)If you need me to access, download, or install something from one of these locations, you can either:
Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.