add webp generator -- website filesize ~300kb -> 80kb

This commit is contained in:
forest 2021-08-01 16:18:19 -05:00
parent 76ee6c54de
commit f1da586a6a
14 changed files with 63 additions and 12 deletions

View File

@ -15,7 +15,7 @@
<body>
<main>
<header>
<img src="static/logo.svg" />
<img src="static/generated/logo.webp" />
<div class="header-links horizontal flex-end">
<a href="#about">ABOUT</a>
<a href="#partners">PARTNERS</a>
@ -47,14 +47,14 @@
<div class="magical-flying-div-anchor">
<img
alt="technology food pyramid showing serverscoop at the base, with operating systems and applications on top"
src="static/pyramid.png"
src="static/generated/pyramid.webp"
class="pyramid-image"
/>
</div>
<div class="magical-flying-div-anchor">
<img
alt="A cute looking person squatting like a hipster"
src="static/squatting-person.svg"
src="static/generated/squatting-person.webp"
class="squatting-person"
/>
</div>
@ -88,7 +88,7 @@
<div class="box">
<img
alt="dove carrying olive branch"
src="static/dove.svg"
src="static/generated/dove.webp"
class="float-right"
/>
<h3>
@ -105,7 +105,7 @@
<div class="box">
<img
alt="handshake"
src="static/handshake.svg"
src="static/generated/handshake.webp"
class="float-right"
/>
<h3>
@ -128,7 +128,7 @@
<div class="magical-flying-div-anchor">
<img
alt="two nerds looking smug, confident, and happy"
src="static/arms-crossed-people.svg"
src="static/generated/arms-crossed-people.webp"
class="arms-crossed-people-image"
/>
</div>
@ -147,33 +147,33 @@
<div class="horizontal wrap justify-center align-center logos">
<a href="https://autonomic.zone">
<img alt="autonomic" src="static/logo-autonomic.svg" />
<img alt="autonomic" src="static/generated/logo-autonomic.webp" />
</a>
<a href="https://cyberia.club">
<img
alt="Cyberia Computer Club"
width="280px"
src="static/logo-cyberia.png"
src="static/generated/logo-cyberia.webp"
/>
</a>
<a href="http://mc3.coop/">
<img alt="MC3" src="static/logo-mc3.png" />
<img alt="MC3" src="static/generated/logo-mc3.webp" />
</a>
<a href="https://www.webarchitects.coop/">
<img alt="webarchitects" width="120px" src="static/logo-wa.svg" />
<img alt="webarchitects" width="120px" src="static/generated/logo-wa.webp" />
</a>
<a href="https://cni.coop/">
<img
alt="Co-operative Network Infrastructure"
class="darker-background"
src="static/logo-cni.svg"
src="static/generated/logo-cni.webp"
/>
</a>
<a href="https://mediablazehosts.coop/">
<img
alt="mediablazehosts.coop"
src="static/logo-mediablaze.svg"
src="static/generated/logo-mediablaze.webp"
/>
</a>
</div>

51
static/generate_webp.sh Executable file
View File

@ -0,0 +1,51 @@
#!/bin/bash -e
quality="80"
# if [ -z "$quality" ]; then
# echo "first argument (quality level, 1 to 100) is required."
# exit 1
# fi
svgToWebp () {
svgFilename="$1"
pngFilename="generated/$(echo "$svgFilename" | sed 's|.svg|.png|')"
webpFilename="$(echo "$pngFilename" | sed 's|.png|.webp|')"
quality="$2"
sizeArgs=""
if [ ! -z "$3" ] && [ ! -z "$4" ]; then
sizeArgs="-w $3 -h $4"
fi
inkscape --without-gui "$svgFilename" $sizeArgs --export-png "$pngFilename"
~/Desktop/programs/libwebp-1.2.0-linux-x86-64/bin/cwebp -q "$quality"-m 6 -preset text -alpha_filter best \
"$pngFilename" -o "$webpFilename"
rm "$pngFilename"
}
pngToWebp () {
pngFilename="$1"
webpFilename="generated/$(echo "$pngFilename" | sed 's|.png|.webp|')"
quality="$2"
~/Desktop/programs/libwebp-1.2.0-linux-x86-64/bin/cwebp -q "$quality"-m 6 -preset text -alpha_filter best \
"$pngFilename" -o "$webpFilename"
}
mkdir -p generated
svgToWebp "arms-crossed-people.svg" "$quality"
svgToWebp "squatting-person.svg" "$quality"
svgToWebp "dove.svg" "$quality"
svgToWebp "handshake.svg" "$quality"
svgToWebp "logo-autonomic.svg" "$quality"
svgToWebp "logo-cni.svg" "$quality"
svgToWebp "logo-mediablaze.svg" "$quality"
svgToWebp "logo.svg" "$quality"
svgToWebp "logo-wa.svg" "$quality" "120" "105"
pngToWebp "pyramid.png" "$quality"
pngToWebp "logo-cyberia.png" "$quality"
pngToWebp "logo-mc3.png" "$quality"

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
static/generated/dove.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1010 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
static/generated/logo.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB