teach-la-website icon indicating copy to clipboard operation
teach-la-website copied to clipboard

Enforcing image sizing and/or CI sizing action

Open mattxwang opened this issue 4 years ago • 1 comments

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 ~ 512px by 512pxslight deviations are fine, but anything over 1000px is 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-esque npm (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!

mattxwang avatar Jan 23 '21 20:01 mattxwang

Not super in-tune with the best practice here, but sharp looks cool: https://www.npmjs.com/package/sharp

mattxwang avatar Feb 01 '21 20:02 mattxwang