teach-la-website
teach-la-website copied to clipboard
Enforcing image sizing and/or CI sizing action
As we've been onboarding people on to the dev team, I've noticed that we've done an ~ eh ~ job of enforcing image sizing/ratio things. I think we should add a quick CI action / script to do this! In particular, images should:
- be ~ around ~
512pxby512pxslight deviations are fine, but anything over1000pxis not good - let's shoot for pixel-perfect square aspect ratio!
- the individual filesize should not be larger than 1MB (probably), but ImgBot probably enforces that already
- have a lowercase extension (this is to deal with issues between local development passing and the final build failing); for now, we can just support
.png,.jpg, and.jpeg - stretch goal - autofix situations where the extension needs to be lowercased
I propose that there are two actionables from this ticket:
- a
lint-esque action that checks if these properties are true for every image - a
fix-esquenpm(or action) that auto-fixes these problems when possible (but let's say a non-square aspect ratio is not fixable)
This ticket is great for slightly more experienced static devs that are interested in CI/CD or want to learn more about software dev best practices!
Not super in-tune with the best practice here, but sharp looks cool: https://www.npmjs.com/package/sharp