Er du lei av trege eller kostbare utvidelser for bildeoptimalisering? Hva om vi fortalte deg at du kan lage dine egen bildeoptimalisering for PNG? Denne guiden viser deg hvordan du går frem.
Denne metoden er for avanserte brukere og krever at du har SSH-tilgang til webhotellet. Om biblioteket optipng ikke er tilstede på serveren, kreves sudo eller root for å installere programvaren (forklart nedenfor).
Grunnet begrensninger hos leverandøren er denne metoden sannsynligvis ikke aktuell om du er på et standard delt webhotell med e-post.
Det er en god praksis å utføre en fullstendig sikkerhetskopi av nettstedet ditt før du gjør eventuelle endringer. Da kan nettstedet gjenopprettes om uhellet skulle være ute.
Hvordan virker det?
For å optimalisere bilder benytter vi kommandolinje-verktøyet optipng for Linux. Dette er et gratis verktøy som kan optimalisere PNG-bilder uten at det går på bekostning av kvaliteten.
For å forenkle prosessen lager man et skript som søker etter PNG-bilder du har lastet opp til WordPress, deretter optimaliseres de automatisk.
For å automatisere prosessen lager man en crontab som sørger for at skriptet kjøres i faste intervall, til eksempel 1 gang hver dag.
optipng har mange flere bruksområder og variabler enn det som dekkes i denne guiden. Dersom du ønsker å benytte andre innstillinger enn de vi bruker, kan du se en full oversikt med kommandoen optipng -h.
[bruker@wpologi]$ optipng -h
Synopsis:
optipng [options] files ...
Files:
Image files of type: PNG, BMP, GIF, PNM or TIFF
Basic options:
-?, -h, -help show this help
-o <level> optimization level (0-7) [default: 2]
-v run in verbose mode / show copyright and version info
General options:
-backup, -keep keep a backup of the modified files
-clobber overwrite existing files
-fix enable error recovery
-force enforce writing of a new output file
-preserve preserve file attributes if possible
-quiet, -silent run in quiet mode
-simulate run in simulation mode
-out <file> write output file to <file>
-dir <directory> write output file(s) to <directory>
-log <file> log messages to <file>
-- stop option switch parsing
Optimization options:
-f <filters> PNG delta filters (0-5) [default: 0,5]
-i <type> PNG interlace type (0-1)
-zc <levels> zlib compression levels (1-9) [default: 9]
-zm <levels> zlib memory levels (1-9) [default: 8]
-zs <strategies> zlib compression strategies (0-3) [default: 0-3]
-zw <size> zlib window size (256,512,1k,2k,4k,8k,16k,32k)
-full produce a full report on IDAT (might reduce speed)
-nb no bit depth reduction
-nc no color type reduction
-np no palette reduction
-nx no reductions
-nz no IDAT recoding
Editing options:
-snip cut one image out of multi-image or animation files
-strip <objects> strip metadata objects (e.g. "all")
Optimization levels:
-o0 <=> -o1 -nx -nz (0 or 1 trials)
-o1 <=> -zc9 -zm8 -zs0 -f0 (1 trial)
(or...) -zc9 -zm8 -zs1 -f5 (1 trial)
-o2 <=> -zc9 -zm8 -zs0-3 -f0,5 (8 trials)
-o3 <=> -zc9 -zm8-9 -zs0-3 -f0,5 (16 trials)
-o4 <=> -zc9 -zm8 -zs0-3 -f0-5 (24 trials)
-o5 <=> -zc9 -zm8-9 -zs0-3 -f0-5 (48 trials)
-o6 <=> -zc1-9 -zm8 -zs0-3 -f0-5 (120 trials)
-o7 <=> -zc1-9 -zm8-9 -zs0-3 -f0-5 (240 trials)
-o7 -zm1-9 <=> -zc1-9 -zm1-9 -zs0-3 -f0-5 (1080 trials)
Notes:
The combination for -o1 is chosen heuristically.
Exhaustive combinations such as "-o7 -zm1-9" are not generally recommended.
Examples:
optipng file.png (default speed)
optipng -o5 file.png (slow)
optipng -o7 file.png (very slow)Merk at skriptet vil ikke optimalisere eller endre de originale PNG-bildene du laster opp i WordPress.
Det er bare de skalerte utgavene av originalbildet som optimaliseres eller endres av optipng. Det er vanligvis disse man benytter på nettsiden (miniatyr, medium og stor) og ikke selve kildefilen.
Hvilken oppløsning de skalerte utgavene i WordPress har, konfigureres fra Innstillinger > Media i kontrollpanelet. I tillegg er det ikke uvanlig at temaer definerer flere oppløsninger enn de som er standard i WordPress.
De skalerte eller beskjærte bildene WordPress oppretter automatisk, tar alltid utgangspunkt i originalbildene du har lastet opp. Derfor ønsker vi ikke å endre eller optimalisere de.
Slik lager du bildeoptimalisering for PNG
OPTIPNG er det primære biblioteket som brukes til selve bildeoptimaliseringen.
Installer optipng
For å installere optipng på serveren eller webhotellet, trenger du tilgang til sudo eller root. Eventuelt kan du kontakte leverandøren og høre om de vil installere det for deg.
RedHat, CentOS, Fedora m.m.
[bruker@wpologi]$ sudo yum install epel-release
[bruker@wpologi]$ sudo yum install optipngDebian, Ubuntu, Mint m.m.
[bruker@wpologi]$ sudo apt-get install optipngFinn riktig bane (path)
For å konfigurere skriptet må du finne riktig bane til mediebiblioteket i WordPress. Banen kan variere etter hvordan serveren er konfigurert.
I denne guiden tar vi utgangspunkt i at banen er:
~/public_html/wp-content/uploads/Dersom banen til mediebiblioteket hos deg er noe annet, endrer du dette i skriptet nedenfor.
Opprett skript
Opprett filen png-optim.sh i mappen ~/public_html/. Deretter åpner du filen med favoritteditoren din i Linux.
[bruker@wpologi]$ cd ~/public_html/
[bruker@wpologi]$ touch png-optim.sh
[bruker@wpologi]$ vim png-optim.shKopier og lim inn skriptet nedenfor.
#!/bin/bash
# skriv inn riktig bane (path) til mappen uploads
cd ~/public_html/wp-content/uploads/
# See if optimisation is being forced
if [ -z "$1" ]; then
find=$(find * -mtime -3 -name '*.png' -or -name '*.PNG')
else
find=$(find * -name '*.png' -or -name '*.PNG')
fi
# find PNGs
for f in $find; do
# Simple filter to grab WP cropped image, it looks for
# [number][number][the letter x][number][number]
# This sequence appears at the end of WP cropped images like:
# 2016/09/example-image-392x768.png
if [[ $f =~ [0-9][0-9]\x[0-9][0-9] ]] ; then
# echo $f;
optipng -o2 -preserve $f
fi
doneHusk å endre bane til mediebiblioteket om den er noe annet enn det som brukes ovenfor. Eventuelt kan du justere hvordan bildeoptimalisering du vil optipng skal utføre.
# endre bane til mediebiblioteket
cd ~/public_html/wp-content/uploads/
# endre hvordan optipng optimaliserer bilder
optipng -o2 -preserve $fFilrettigheter
Neste trinn er å endre filrettigheter slik at skriptet kan kjøres på serveren.
[bruker@wpologi]$ chmod 0700 png-optim.shDersom du laget filen med superbrukeren root, må eierskapet endres. Av sikkerhetsmessige årsaker er det best å kjøre skriptet uten eskalerte rettigheter.
[bruker@wpologi]$ chown dittbrukernavn: png-optim.shFunksjoner i skript for bildeoptimalisering
Hovedfunksjonen i skriptet er disse 3 linjene.
for f in $find; do
if [[ $f =~ [0-9][0-9]\x[0-9][0-9] ]] ; then
optipng -o2 -preserve $f- Søker gjennom mappen for mediebibliotek i WordPress
- Tester om filnavnet inneholder en kombinasjon av tall, bokstaven «x» deretter flere tall
- Kjører kommando optipng for alle filer (bilder) som søket «treffer»
Søket som utføres er for å filtrere bort originalbildet (kildebildet) siden man ikke ønsker endre disse.
- wp-content/uploads/2018/10/eksempel-bilde-392×768.png blir optimalisert
- wp-content/uploads/2018/10/eksempel-bilde.png blir ikke optimalisert
Planlegg bildeoptimalisering (cron)
Ettersom det fort blir tungvint å kjøre skriptet manuelt hver gang du vil optimalisere PNG-bilder i mediebiblioteket, kan du planlegge (cron) å kjøre det i faste intervaller.
Hvor hyppig optimaliseringen kjøres bør baseres på hvor ofte du laster opp nye bilder (vi pleier å sette det til en gang i døgnet).
For automatisk planlegging hver dag kl. 05:00 legges denne kommandoen til i crontab.
0 5 * * * bash /home/brukernavn/public_html/png-optim.shOppsummering
Optimalisering av bilder er en effektiv teknikk for å redusere tiden det tar å laste inn nettsiden din. I denne guiden har vi lært deg hvordan du kan lage din egen bildeoptimalisering for PNG.
Med egen bildeoptimalisering for PNG er du ikke lenger avhengig av utvidelser for å gjøre jobben.
Dersom du ønsker å lage en tilsvarende løsning for JPEG-bilder kan du lese hvordan du går frem her.