~seirdy/seirdy.one

8e38c662435acf79b530bf2c2ae1160dceff3ede — rohan kumar 9 months ago 970fa0e
Add pngquant to image compression section

Thanks, arnt and vbernat!
2 files changed, 30 insertions(+), 10 deletions(-)

M content/posts/website-best-practices.gmi
M content/posts/website-best-practices.md
M content/posts/website-best-practices.gmi => content/posts/website-best-practices.gmi +15 -5
@@ 100,18 100,28 @@ For more info, read the relevant docs:

Some image optimization tools I use:

=> https://github.com/shssoichiro/oxipng Oxipng
=> https://github.com/tjko/jpegoptim jpegoptim
=> https://developers.google.com/speed/webp/docs/cwebp cwebp
=> http://pngquant.org pngquant (lossy)
=> https://github.com/shssoichiro/oxipng Oxipng (lossless)
=> https://github.com/tjko/jpegoptim jpegoptim (lossless or lossy)
=> https://developers.google.com/speed/webp/docs/cwebp cwebp (lossless or lossy)

I put together a quick script to optimize images using these programs in my dotfile repo:
I put together a quick script to losslessly optimize images using these programs in my dotfile repo:

=> https://git.sr.ht/~seirdy/dotfiles/tree/3b722a843f3945a1bdf98672e09786f0213ec6f6/Executables/shell-scripts/bin/optimize-image optimize-image

You also might want to use HTML's <picture> element, using jpg/png as a fallback for more efficient formats such as WebP or AVIF.
You also might want to use the HTML "<picture>" element, using JPEG/PNG as a fallback for more efficient formats such as WebP or AVIF.

=> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture <picture> docs on MDN

Most of my images will probably be screenshots that start as PNGs. My typical flow:

1.  Lossy compression with pngquant
2.  Losslessly optimize the result with Oxipng and its Zopfli backend (slow)
3.  Also create a lossless WebP from the lossy PNG, using cwebp
4.  Include the resulting WebP in the page, with a fallback to the PNG using a "<picture>" element.

It might seem odd to create a lossless WebP from a lossy PNG, but I've found that it's the best way to get the smallest possible image at the minimum acceptable quality for screenshots with solid backgrounds.

## Other places to check out

The 250kb club gathers websites at or under 250kb, and also rewards websites that have a high ratio of content size to total size.

M content/posts/website-best-practices.md => content/posts/website-best-practices.md +15 -5
@@ 178,18 178,28 @@ Image optimization

Some image optimization tools I use:

- [oxipng](https://github.com/shssoichiro/oxipng)
- [jpegoptim](https://github.com/tjko/jpegoptim)
- [cwebp](https://developers.google.com/speed/webp/docs/cwebp)
- [pngquant](http://pngquant.org) (lossy)
- [Oxipng](https://github.com/shssoichiro/oxipng) (lossless)
- [jpegoptim](https://github.com/tjko/jpegoptim) (lossless or lossy)
- [cwebp](https://developers.google.com/speed/webp/docs/cwebp) (lossless or lossy)

I put together a [quick
script](https://git.sr.ht/~seirdy/dotfiles/tree/3b722a843f3945a1bdf98672e09786f0213ec6f6/Executables/shell-scripts/bin/optimize-image)
to optimize images using these programs in my dotfile repo.
to losslessly optimize images using these programs in my dotfile repo.

You also might want to use HTML's `<picture>` element, using jpg/png as a fallback
You also might want to use the HTML `<picture>` element, using JPEG/PNG as a fallback
for more efficient formats such as WebP or AVIF. More info in the [MDN
docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)

Most of my images will probably be screenshots that start as PNGs. My typical flow:

1.  Lossy compression with `pngquant`
2.  Losslessly optimize the result with `oxipng` and its Zopfli backend (slow)
3.  Also create a lossless WebP from the lossy PNG, using `cwebp`
4.  Include the resulting WebP in the page, with a fallback to the PNG using a `<picture>` element.

It might seem odd to create a lossless WebP from a lossy PNG, but I've found that it's the best way to get the smallest possible image at the minimum acceptable quality for screenshots with solid backgrounds.

Other places to check out
-------------------------