~seirdy/seirdy.one

79b91972e739cca485f983ba15cb918f619461ac — rohan kumar 10 months ago 7ec5eab
Add more info on image optimization
2 files changed, 35 insertions(+), 4 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 +17 -1
@@ 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.

M content/posts/website-best-practices.md => content/posts/website-best-practices.md +18 -3
@@ 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
-------------------------