Hjem Guider Lag din egen bildeoptimalisering for PNG

Lag din egen bildeoptimalisering for PNG

av naldy
Bildeoptimalisering PNG

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.

WordPress-innstillinger for media

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 optipng

Debian, Ubuntu, Mint m.m.

[bruker@wpologi]$ sudo apt-get install optipng

Finn 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.sh

Kopier 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
done

Husk å 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 $f

Filrettigheter

Neste trinn er å endre filrettigheter slik at skriptet kan kjøres på serveren.

[bruker@wpologi]$ chmod 0700 png-optim.sh

Dersom 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.sh

Funksjoner 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.sh

Oppsummering

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.

Kanskje du liker

Skriv en kommentar

* Vennligst gjør deg kjent med vår personvernerklæring.

Vi benytter cookies for utvidet funksjonalitet, bedre nettleser-opplevelse, statistikk og målrettede annonser. OK Les mer

LIKTE DU INNLEGGET?
MELD DEG PÅ NYHETSBREV!
SEND
Nyhetsbrev sendes ut ca. hver 3. måned.
close-link