search

shift-org / shift-docs

Shift2Bikes: website and calendar for shift and pedalpalooza
https://shift2bikes.org
Other
22 stars 17 forks source link

Compress banner image used in page header on all pages #821

Open carrythebanner opened 3 days ago

carrythebanner commented 3 days ago

The banner_bikes_city.jpg image (88 KB, jpg) is served on every page, behind the H1 heading. It has a color shim over it so it could probably be reduced in quality without any real downside. We could possibly convert to greyscale, add a little blur to improve compression ratios, compress JPG more heavily, or try converting it to WebP.

Quick test with Seashore using WebP lossy compression at 20% gives me a 30 KB image, down from the original 88 KB. (And that's working from the current JPG as the source; if we had a higher resolution image to start from, the quality would likely be better at a similar file size. See if we have a higher quality file somewhere.) Converting to greyscale and/or adding a bit of blur also makes the resulting file smaller.

carrythebanner commented 3 days ago

Looks like IE is the only holdout for WebP support. If the image doesn't load the header is just a plain block of color, so that's probably an acceptable fallback for a browser that we don't otherwise support anyway.