srobo / website

The Student Robotics public website
https://studentrobotics.org
Other
7 stars 13 forks source link

Use WEBP images to make things faster #509

Open PeterJCLaw opened 1 year ago

PeterJCLaw commented 1 year ago

This moves some of the heavier images, mostly on the homepage to support WEBP where browsers can do so. Along the way it introduces helpers for working with multiple images (by size and those with WEBP) and establishes a conventions for derived WEBP images' names.

Fixes https://github.com/srobo/website/issues/382

Size savings checked by eyeballing the local sizes plus checking .currentSrc on the DOM nodes.

https://pagespeed.web.dev/analysis/https-studentrobotics-org/k3zp02z6p1?form_factor=mobile was my starting point for where we can get benefits.