Väčšina bežných blogových webov je v súčasnosti založená na článkoch, ktoré okrem textov obsahujú tiež obrázky, lokálne (resp. vzdialené) video streami a pod. Ja sa snažím písať hlavne čisto textové články, ale pomerne často do blogu vložím aj obrázok. Nikdy som neriešil ako funguje vo WordPress (WP) vkladanie obrázkov a zistil som to až teraz.
V podstate ide o to, že ak chcem vložiť do článku obrázok, tak obrázok sa automaticky uloží do knižnice z ktorého sa následne generujú rôzne rozlíšenia (napr. 150×150 px, 350x300px a pod). Čiže z pôvodného obrázku máme ďalších 5-7 obrázkov navyše. Čo sa týka obsahu, tak môj blog je maličký a pri zálohovaní webu zisťujem, že gzipovaný tar má veľkosť 378 MB (nezbalený webroot 472 MB).V súčasnej dobe (Marec 2023) mám v blogu asi 120 článkov. Niektorý článok neobsahuje žiadny obrázok, ale niektorý ich má aj 20. V drvivej väčšine je obrázok vo formáte png, alebo jpg. Je dôležité povedať, že ak cez WP knižnicu uploadujem nejaký obrázok a potom ho nepoužijem, tak obrázok tam ostáva (vrátane obrázkov, ktoré boli z pôvodného obrázku vygenerované). Mojou úlohou je teda ušetriť čo najviac diskového priestoru. To znamená, že potrebujem natrvalo odstrániť obrázky, ktoré sa nepoužívajú.
- Obrázky zaberajú na webe 341 MB.
- Počet všetkých obrázkov 4580
Áno existujú rozne pluginy na manipuláciu z obrázkami, ale ja som si povedal (pri veľkosti môjho webu), že ideálne bude ak to spravím ručne. Do desktopu som stiahol celý obsah /wp-content/uploads a v krusaderi som začal mazať všetky obrázky, ktoré vygeneroval WP, okrem pôvodných. Ono to išlo docela rýchlo, pretože generované obrázky z pôvodného mali za názvom obrázka pridané aj vygenerované rozlíšenie. Po vymazaní
- Obrázky zaberajú na webe 91 MB.
- Počet všetkých obrázkov 709
Už teraz som takmer 4-násobne znížil kapacitu, ale POZOR! Už vyššie som spomenul, že obrázky som na web vkladal vo formáte png, alebo jpg/jpeg. Všetci dobre vieme, že už nejaký piatok existuje pre obrázky formát webp. Webp je formát obrázkov od spoločnosti Google, ktorý dokáže komprimovať obrázky až o desiatky percent oproti png resp. jpg. V závislosti od nastavenia kompresie som dosahoval zníženie veľkosti obrázka o 20-70%. Inak nedá mi nespomenúť plugin Convert for media, ktorý konvertuje na WP webe obrázky automaticky. Plugin v podstate zabezpečí konverziu obrázkov (ktoré mu predložíme, označením adresárov) do webp. Ak klient (web prehliadač) podporuje formát webp, tak plugin zabezpečí aby sa zobrazil klientovi webp. Ak klient nepodporuje webp, tak sa zobrazi pôvodný png/jpg. Tento plugin je síce super, pretože web prehliadač dokáže omnoho rýchlejšie načítať webp obrázok, ale nerieši šetrenie diskového priestoru, ba naopak, navýši kapacitu o webp obrázky. Čiže tento plugin by moju situáciu neriešil.
Aby som nepropagoval len starší formát webp, tak spomeniem aj 2 ďalšie formáty avif, resp. jpeg-xl. To sú celkom nové a omnoho efektívnejšie formáty ako webp, ale zatiaľ ostanem pri webp, keďže má väčšiu podporu vo webových prehliadačoch.
V predošlom odseku som spomenul, že adresár /wp-content/uploads s obrázkami mám stiahnutý na lokálnom PC a obsahuje len pôvodné obrázky (709 obrázkov). Obrázky do webp budem konvertovať lokálne. Čiže nainštalujeme terminalovú aplikáciu
sudo apt install webp
Následne pomocou tohto skriptu budeme konvertovať všetky jpg/jpeg/png súbory do formátu webp.
#! /bin/bash
shopt -s nullglob # Globs that match nothing expand to nothing
shopt -s globstar # ** matches multiple directory levels
root_webp_dir=/path_to_webp_directory
www_base_dir=/path_to_root_directory
pushd "$www_base_dir"
[[ -d "$www_base_dir" ]] || exit 1
for jpg_path in ./**/*.{png,jpg,jpeg} ; do
jpg_file=${jpg_path##*/}
[[ $jpg_path == */* ]] && jpg_dir=${jpg_path%/*} || jpg_dir=.
webp_dir=${root_webp_dir}/${jpg_dir}
webp_path=${webp_dir}/${jpg_file}.webp
[[ -d "$webp_dir" ]] || mkdir -p -- "$webp_dir"
if [ ! -e "$webp_path" ] || [ "$jpg_path" -nt "$webp_path" ]
then
if [[ $jpg_file == *.gif ]]
then
gif2webp -lossy -q 80 -m 6 "$jpg_path" -o "$webp_path"
else
cwebp -q 75 -m 6 -af "$jpg_path" -o "$webp_path"
fi
else
echo "exists: $webp_path"
fi
done
echo "$root_webp_dir/**/*.{webp}"
for w_path in $root_webp_dir/**/*.webp ; do
j_path=.${w_path#"$root_webp_dir"}
j_path=${j_path%.webp}
#echo "j_path: $j_path"
if [ ! -e "$j_path" ]
then
echo "remove: $w_path"
rm "$w_path"
fi
done
popd
Týmto skriptom sa rekurzívne prekonvertujú všetky obrázky do formátu webp, ale ostanú v tvare
img01.png.webp
img02.jpg.webpčo nevyzerá najlepšie a naším cieľom je dosiahnúť
img01.webp
img02.webpPreto použijeme terminálový príkaz rename
rename 's/\.png//' *webp
rename 's/\.jpg//' *webp
Obrázky po konverzii zaberajú neuveriteľných 22,1 MB (z pôvodných 91 MB). Vzhľadom k tomu, že obrázky budem nahrádzať ručne, tak kapacita sa navýši o novo vygenerované rozlíšenia, ale v konečnom dôsledku budem na tom omnoho lepšie. V blogu mám asi 120 článkov (nie každý článok obsahuje obrázky), takže som si to rozdelil na niekoľko dní (asi hodina práce denne). Priznám sa, že som nesledoval čas ako dlho mi to trvalo, ale nahradenie jedného obrázku odhadujem radovo na jednotky sekúnd (10-15). Postup bol následovný
- Otvoriť článok na editáciu
- Klik na obrázok a myšou sa nastaviť na link (kvôli zisteniu mena obrázku)
- Klik na „Nahrať“ kde sa otvorí okno v ktorom sú webp obrázky (lokálny disk)
- Stačí napísať názov (alebo kľúčovú časť) obrázku
- Potvrdenie Enterom a obrázok je nahradený
Po nahradení všetkých obrázkov som z knižnice vymazal všetky jpg/jpeg/png obrázky. To bolo dosť rýchle, pretože obrázky som si zoradil podľa dátumu od najstaršieho a hromadne som označil to čo som chcel vymazať. Po vymazaní obrázkov z knižnice som zistil, že vo /wp-content/uploads sa pôvodné obrázky stale nachádzajú. Obrázky som teda z FTP ručne odstránil a zdá sa, že teraz je všetko v poriadku. Ešte som fyzicky prešiel všetky články a ak som zistil, že obrázok niekde chýba, tak som ho znova doplnil.
Konečný výsledok vyzerá takto. Na začiatku mal gzipovaný tar celého webu hodnotu 378 MB, teraz 116 MB. Rozbalený pôvodný webroot mal 472 MB, teraz 197 MB. Z toho vyplýva ušetrenie diskového priestoru o 275 MB (58.26%)
Zaver
Aj keď tu uvedený postup je dosť pracný, teší ma aj to, že som nemusel použiť ďalšie zbytočné pluginy. Pri písaní ďalších článkov, ktoré obsahujú obrázky budem postupovať tak, že obrázok si pred vložením do knižnice prekonvertujem do webp. Obrázky pripravujem prevažne v Gimpe a tam je možnosť exportovať obrázok priamo do webp.