Add more details about image compression
- Include a sample command
- Describe my approach to deciding on the level of compression/cropping
Stylistic fixes (minor)
Nothing new, just re-phrasing and capitalization.
Add idea for website testing: site translation
Update preferred approach to image processing
- Include AVIF
- Include dark/light variants if applicable
Article update: mention brotli
Brotli support is more prevalent than zstd
Reformat markdown with mdfmt
Shorten alt-text to recommended <100 char limit
Article update: include advice on avatar image
Include info on using an avatar image/profile photo without
significantly increasing the footprint of a website, by re-using the
Add 10 KB Club to web best practices article
Include layout in web best practices
Article update: decribe good layout in the website best practices
Fix bad link
Sourcehut updated its per-object log URLs
Metadata: description + cache-bust manifest icons
- Add a cache-busting fingerprint to all the icons in the webmanifest
- Add a <meta> and open graph tag for a description.
- Include a 512px icon in the manifest
Article fix: put <body> in backticks
<body> was getting interpreted as an HTML tag instead of text.
Use a smaller image in an article
Update web best practices article: add testing
- Add information about testing edge cases
- Re-word some long sentences
CLS: Declare original image dimensions in HTML
Reduce Cumulative Layout Shift (CLS) by declaring original image
dimensions in HTML before re-scaling with CSS. This tells browsers the
image's aspect ratio before the image and the stylesheet load, allowing
browsers to block out space accordingly to avoid making elements "jump"
More info: https://web.dev/optimize-cls/
Clarify HTTP Observatory scores
Add bit about alt-text, clarify page size
Update with feedback on page size
Added the Web Bloat Size Calculator and a snippet on how people on
trains experience a connection speed drops.
Thanks, u/Snapstromegon from Reddit!
Add pngquant to image compression section
Thanks, arnt and vbernat!