add webp generator -- website filesize ~300kb -> 80kb
24
index.html
|
@ -15,7 +15,7 @@
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
<header>
|
<header>
|
||||||
<img src="static/logo.svg" />
|
<img src="static/generated/logo.webp" />
|
||||||
<div class="header-links horizontal flex-end">
|
<div class="header-links horizontal flex-end">
|
||||||
<a href="#about">ABOUT</a>
|
<a href="#about">ABOUT</a>
|
||||||
<a href="#partners">PARTNERS</a>
|
<a href="#partners">PARTNERS</a>
|
||||||
|
@ -47,14 +47,14 @@
|
||||||
<div class="magical-flying-div-anchor">
|
<div class="magical-flying-div-anchor">
|
||||||
<img
|
<img
|
||||||
alt="technology food pyramid showing serverscoop at the base, with operating systems and applications on top"
|
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"
|
class="pyramid-image"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="magical-flying-div-anchor">
|
<div class="magical-flying-div-anchor">
|
||||||
<img
|
<img
|
||||||
alt="A cute looking person squatting like a hipster"
|
alt="A cute looking person squatting like a hipster"
|
||||||
src="static/squatting-person.svg"
|
src="static/generated/squatting-person.webp"
|
||||||
class="squatting-person"
|
class="squatting-person"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -88,7 +88,7 @@
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<img
|
<img
|
||||||
alt="dove carrying olive branch"
|
alt="dove carrying olive branch"
|
||||||
src="static/dove.svg"
|
src="static/generated/dove.webp"
|
||||||
class="float-right"
|
class="float-right"
|
||||||
/>
|
/>
|
||||||
<h3>
|
<h3>
|
||||||
|
@ -105,7 +105,7 @@
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<img
|
<img
|
||||||
alt="handshake"
|
alt="handshake"
|
||||||
src="static/handshake.svg"
|
src="static/generated/handshake.webp"
|
||||||
class="float-right"
|
class="float-right"
|
||||||
/>
|
/>
|
||||||
<h3>
|
<h3>
|
||||||
|
@ -128,7 +128,7 @@
|
||||||
<div class="magical-flying-div-anchor">
|
<div class="magical-flying-div-anchor">
|
||||||
<img
|
<img
|
||||||
alt="two nerds looking smug, confident, and happy"
|
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"
|
class="arms-crossed-people-image"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -147,33 +147,33 @@
|
||||||
|
|
||||||
<div class="horizontal wrap justify-center align-center logos">
|
<div class="horizontal wrap justify-center align-center logos">
|
||||||
<a href="https://autonomic.zone">
|
<a href="https://autonomic.zone">
|
||||||
<img alt="autonomic" src="static/logo-autonomic.svg" />
|
<img alt="autonomic" src="static/generated/logo-autonomic.webp" />
|
||||||
</a>
|
</a>
|
||||||
<a href="https://cyberia.club">
|
<a href="https://cyberia.club">
|
||||||
<img
|
<img
|
||||||
alt="Cyberia Computer Club"
|
alt="Cyberia Computer Club"
|
||||||
width="280px"
|
width="280px"
|
||||||
src="static/logo-cyberia.png"
|
src="static/generated/logo-cyberia.webp"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
<a href="http://mc3.coop/">
|
<a href="http://mc3.coop/">
|
||||||
<img alt="MC3" src="static/logo-mc3.png" />
|
<img alt="MC3" src="static/generated/logo-mc3.webp" />
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="https://www.webarchitects.coop/">
|
<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>
|
||||||
<a href="https://cni.coop/">
|
<a href="https://cni.coop/">
|
||||||
<img
|
<img
|
||||||
alt="Co-operative Network Infrastructure"
|
alt="Co-operative Network Infrastructure"
|
||||||
class="darker-background"
|
class="darker-background"
|
||||||
src="static/logo-cni.svg"
|
src="static/generated/logo-cni.webp"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://mediablazehosts.coop/">
|
<a href="https://mediablazehosts.coop/">
|
||||||
<img
|
<img
|
||||||
alt="mediablazehosts.coop"
|
alt="mediablazehosts.coop"
|
||||||
src="static/logo-mediablaze.svg"
|
src="static/generated/logo-mediablaze.webp"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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"
|
After Width: | Height: | Size: 7.7 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 6.3 KiB |
After Width: | Height: | Size: 2.2 KiB |
After Width: | Height: | Size: 1010 B |
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 5.7 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 9.9 KiB |