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

Add more info on image optimization

Browse source
This commit is contained in:
rohan kumar 2020-11-24 03:18:03 -08:00
parent 7ec5eab8eb
commit 79b91972e7
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 35 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,7 +17,7 @@ I realize not everybody's going to ditch the Web and switch to Gemini or Gopher
* Server configured to support compression (gzip, optionally zstd as well) and HTTP/2. It's a free speed boost.
* Supports dark mode and/or works with most "dark mode" browser addons
* A good score on Mozilla's HTTP Observatory
* Optimized images. 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. Use tools such as oxipng to optimize images.
* Optimized images. More on this below.
=> https://observatory.mozilla.org/ HTTP Observatory
=> https://github.com/shssoichiro/oxipng Oxipng
@ -75,6 +75,22 @@ If you do explicitly set colors, please also include a dark theme using a media
@media (prefers-color-scheme: dark)
```
## Image optimization
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
I put together a quick script to 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.
=> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture <picture> docs on MDN
## 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.

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

@ -40,9 +40,7 @@ primarily on text:
HTTP/2. It's a free speed boost.
- Supports dark mode and/or works with most "dark mode" browser addons
- A good score on Mozilla's [HTTP Observatory](https://observatory.mozilla.org/)
- Optimized images. 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. Use tools
such as [oxipng](https://github.com/shssoichiro/oxipng) to optimize images.
- Optimized images.
I'd like to re-iterate yet another time that this only applies to websites that
primarily focus on text. If graphics, interactivity, etc. are an important part of
@ -141,6 +139,23 @@ an example:
If you do explicitly set colors, please also include a dark theme using a media
query: `@media (prefers-color-scheme: dark)`.
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)
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.
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. More info in the [MDN
docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)
Other places to check out
-------------------------