From 387a868e2e1d59eda16c4ad78f3550c54c669ab5 Mon Sep 17 00:00:00 2001 From: Paul Duncan Date: Thu, 27 Jan 2022 22:47:40 -0500 Subject: README.md: add img minification --- README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/README.md b/README.md index 6a2c53a..42cf3cc 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,16 @@ To serve this site locally: * `--disableFastRenderer` may be unnecessary, but the fast renderer cache was giving me grief while doing theme development. +## Minify Images + +Notes: + +1. Use `svgmin` to shrink [SVGs][svg]. +2. Use `convert -quality 100 -define web:lossless=true foo.{png,webp}` + to compress existing PNGs as `webp`s. +3. Use the `pe-figure` shortcode for progressive enhanced `figure` tags + with a fallback image. + ## Deploy Site To clone site repo: @@ -119,6 +129,8 @@ Includes the following shortcodes: * `table`: Enhanced [CSS][]-only table shortcode. See [hugo-shortcode-table][]. * `sup`: Superscript. +* `pe-picture`: Progressive enhancement `picture` shortcode. +* `pe-figure`: Progressive enhancement `figure` shortcode. `hugo-pt2021` is depends on the following: @@ -164,3 +176,5 @@ The [Bulma][] [SASS][] is: "Scalable Vector Graphics" [hugo-shortcode-table]: https://github.com/pablotron/hugo-shortcode-table "CSS-only table shortcode for Hugo." +[hugo-shortcode-pe]: https://github.com/pablotron/hugo-shortcode-pe + "Progressive enhancement picture and figure shortcodes for Hugo." -- cgit v1.2.3