Set up automated image size checks in build process to optimize website performance

[strombraaten]

What

By implementing automated tests in the build process (using GitHub Actions or a Vercel workflow) to check if uploaded images exceed a specified file size limit we can easily catch oversized images, and ensure they’re optimized before deployment.

Why

Large images can significantly slow down page load times, impacting user experience and energy consumption. Automating these checks allows us to flag large images early, keeping the site lightweight and maintaining fast load times without relying on manual review.

How

Not sure if this is the best way to go about things, but here is an AI-generated suggestion, just to get things going:

• Define Image Size Limits: Set max file size limits for different image types (e.g., JPEG, PNG, SVG), keeping in mind web performance best practices.
• Set Up GitHub Actions or Vercel Workflow: Configure an automated test within GitHub Actions or Vercel to run during the build process.
• Implement Image Size Check Script: Use a script to scan image files in the repository and flag any that exceed the defined size limits.
• Build Warnings or Failures: Configure the build to either warn or fail if any images exceed the limit.
• Explore Optimization Options: If flagged, consider automated compression or conversion (e.g., WebP) recommendations.
• Test and Adjust: Run tests to ensure the process works and adjust size thresholds as needed to balance quality and performance.