fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-23 21:02:09 +00:00
Code Issues Projects Releases Wiki Activity

Add pngquant to image compression section

Browse source 
Thanks, arnt and vbernat!
This commit is contained in:
rohan kumar 2020-11-25 21:58:37 -08:00
parent 970fa0e057
commit 8e38c66243
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 30 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
content/posts/website-best-practices.gmi
View file

@ -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.

20
content/posts/website-best-practices.md
View file

@ -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
-------------------------