mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 00:12:09 +00:00
Add more info on image optimization
This commit is contained in:
parent
7ec5eab8eb
commit
79b91972e7
2 changed files with 35 additions and 4 deletions
|
@ -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.
|
||||
|
|
|
@ -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
|
||||
-------------------------
|
||||
|
||||
|
|
Loading…
Reference in a new issue