Control sizes of large images #146
Conversation
✅ Deploy Preview for trusting-archimedes-14c863 ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
Nice catch. Can you also reformat the rest of the images in this PR accordingly and/or find substitutes? |
|
@matevz do you know if we have svg sources of e.g. https://github.com/oasisprotocol/docs/blob/main/docs/oasis-network-primer/images/Group_8.png |
I would prefer this, but sadly it won't reduce the repo size without rewriting history :/ |
buberdds
force-pushed
the
buberdds/controlImageSizes
branch
2 times, most recently
from
b77b259
to
1dde93a
Compare
|
Tried to optimize with https://squoosh.app/. docs/docs folder size: 43.9 MB -> 13.1 MB Seems like jpgs lost some vibrancy. |
|
Thanks for sharing, never heard about it before. Will explore options with resizing now. |
buberdds
force-pushed
the
buberdds/controlImageSizes
branch
from
148289f
to
823e2ac
Compare
lukaw3d
force-pushed
the
buberdds/controlImageSizes
branch
2 times, most recently
from
3e91a1f
to
56170b5
Compare
buberdds
force-pushed
the
buberdds/controlImageSizes
branch
from
d52a368
to
94a3f0b
Compare
|
Why did image brightness change? e.g. https://github.com/oasisprotocol/docs/pull/146/files#diff-c8ac17fbe04959322612fa9ece20f8c658da0ab93ce11bf35368b8d505a8ddb5 I think screenshots should be as they are. Lossless compression and resolution reduction from highdpi desktops are ok, but not changing colors/brightness. |
I wouldn't worry about brightness too much currently. Let's rather make sure we have a process that will prevent uploading PNG images that can't be compressed well. |
// imagemagick to convert to sRGB color profile
convert 6b_ledger_oasis_ready.png -profile /usr/share/color/icc/colord/sRGB.icc\
-strip 6b_ledger_oasis_ready.png
// @squoosh/cli to reduce file size
npx squoosh-cli --mozjpeg '{"quality":75}' 6b_ledger_oasis_ready.png
shopt -s globstar
for i in docs/**/*.png; do
# imagemagick to convert to sRGB color profile
convert "$i" -profile /usr/share/color/icc/colord/sRGB.icc -strip "$i"
# @squoosh/cli to reduce file size
npx squoosh-cli \
--quant '{"enabled": true, "zx": 0, "maxNumColors": 256, "dither": 1}' \
--oxipng '{"level":2,"interlace":false}' --output-dir "`dirname $i`" "$i"
done
shopt -s globstar
for i in docs/**/*.jpg; do
# imagemagick to convert to sRGB color profile
convert "$i" -profile /usr/share/color/icc/colord/sRGB.icc -strip "$i"
# @squoosh/cli to reduce file size
npx squoosh-cli --mozjpeg '{"quality":75}' --output-dir "`dirname $i`" "$i"
done
lukaw3d
force-pushed
the
buberdds/controlImageSizes
branch
from
94a3f0b
to
e4f6762
Compare
|
Fixed colors by converting from "DELL U3818DW" color profile to "sRGB" and then removing it |
Nice 🙂 |
#143
Options:
use official
plugin-ideal-imageto control large images@docusaurus/preset-classicpreset like most of other official plugins.mdxis not necessary, but might be good for third-party tools according to docsmanually replace images in repo and don't add
plugin-ideal-imageAny other ideas?
6b_ledger_oasis_readydoes not need resizing. Switching to jpg is enough.