PedalPlayground / pedalplayground

200 stars 230 forks source link

Optimize image assets #1856

Open rijkvanzanten opened 5 months ago

rijkvanzanten commented 5 months ago

Hi @tehtrav! I noticed the banner on your website mentioning you were switching hosting providers as the image sizes grew above what GitHub would host for free.

I was wondering, have you considered programmatically optimizing the image assets? For example the image for the HX Stomp is rendered at 228.16px by 160px, yet the image asset that's loaded is a 1000px x 701px PNG image. Resizing that to retina resolution at the rendered size (eg ~460px w) and re-encoding it to AVIF rather than PNG, you could save loads of space!

A quick n dirty test through squoosh.app on that hx-stomp png showed a before/after of 1.02MB to 27.1kB, that's a 97% reduction.

Happy to open a PR if this is something you're interested in exploring 👍🏻

Cheers, and thanks for the great tool 🙂 🎸