Complete responsive image integration

[Copilot]

Banner, logo, and article image assets need responsive variants across existing pages and future generated output. This updates the image pipeline and page markup so viewport-appropriate assets are consistently available and referenced.

• Image generation

  • Added a sharp-based optimization script.
  • Generates AVIF/WebP banner and OG variants.
  • Generates PNG/WebP logo variants for common display sizes.
  • Runs image optimization at the start of prebuild.

• Responsive markup

  • Uses <picture> for hero banners with AVIF/WebP sources.
  • Adds srcset/sizes for header, footer, static, and article logos.
  • Backfills existing generated HTML so current pages use responsive image resources.

• Deployment metadata

  • Uploads image formats with explicit S3 content types.
  • Adds AVIF handling to S3 MIME repair.

• Regression coverage

  • Verifies generated image variants exist with expected dimensions.
  • Enforces local HTML images use srcset or <picture>.
  • Verifies all local srcset image URLs resolve to generated assets.

Example generated markup:

<picture class="hero-banner-picture">
  <source type="image/avif" srcset="images/riksdagsmonitor-banner-480w.avif 480w, images/riksdagsmonitor-banner-1536w.avif 1536w" sizes="100vw">
  <source type="image/webp" srcset="images/riksdagsmonitor-banner-480w.webp 480w, images/riksdagsmonitor-banner-1536w.webp 1536w" sizes="100vw">
  <img src="images/riksdagsmonitor-banner.webp" class="hero-banner-bg" width="1536" height="1024" decoding="async">
</picture>

[github-actions]

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json

[github-actions]

🔍 Lighthouse Performance Audit

Category	Score	Status
Performance	85/100	🟡
Accessibility	95/100	🟢
Best Practices	90/100	🟢
SEO	95/100	🟢

📥 Download full Lighthouse report

Budget Compliance: Performance budgets enforced via budget.json

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[github-actions]

🏷️ Automatic Labeling Summary

This PR has been automatically labeled based on the files changed and PR metadata.

Applied Labels: dashboard,html-css,i18n,translation,rtl,size-xl,news

Label Categories

• 🗳️ Content: news, dashboard, visualization, intelligence
• 💻 Technology: html-css, javascript, workflow, security
• 📊 Data: cia-data, riksdag-data, data-pipeline, schema
• 🌍 I18n: i18n, translation, rtl
• 🔒 ISMS: isms, iso-27001, nist-csf, cis-controls
• 🏗️ Infrastructure: ci-cd, deployment, performance, monitoring
• 🔄 Quality: testing, accessibility, documentation, refactor
• 🤖 AI: agent, skill, agentic-workflow

For more information, see .github/labeler.yml.