Hjem Guider Lag din egen bildeoptimalisering for JPEG

Lag din egen bildeoptimalisering for JPEG

av naldy
Bildeoptimalisering for JPEG

Er du lei av trege eller kostbare utvidelser for bildeoptimalisering? Hva om vi fortalte deg at du kan lage dine egen bildeoptimalisering for JPEG? 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 jpegoptim 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 jpegoptim for Linux. Dette er et gratis verktøy som kan optimalisere og komprimere JPEG-bilder uten at det går på bekostning av kvaliteten.

For å forenkle prosessen lager man et skript som søker etter JPEG-bilder du har lastet opp til WordPress, deretter komprimeres 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.

jpegoptim 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 jpegoptim –help.

[bruker@wpologi]$ jpegoptim --help
jpegoptim v1.4.6  Copyright (C) 1996-2018, Timo Kokkonen
Usage: jpegoptim [options] <filenames> 

  -d<path>, --dest=<path>
                    specify alternative destination directory for 
                    optimized files (default is to overwrite originals)
  -f, --force       force optimization
  -h, --help        display this help and exit
  -m<quality>, --max=<quality>
                    set maximum image quality factor (disables lossless
                    optimization mode, which is by default on)
                    Valid quality values: 0 - 100
  -n, --noaction    don't really optimize files, just print results
  -S<size>, --size=<size>
                    Try to optimize file to given size (disables lossless
                    optimization mode). Target size is specified either in
                    kilo bytes (1 - n) or as percentage (1% - 99%)
  -T<threshold>, --threshold=<threshold>
                    keep old file if the gain is below a threshold (%)
  -b, --csv         print progress info in CSV format
  -o, --overwrite   overwrite target file even if it exists (meaningful
                    only when used with -d, --dest option)
  -p, --preserve    preserve file timestamps
  -P, --preserve-perms
                    preserve original file permissions by overwriting it
  -q, --quiet       quiet mode
  -t, --totals      print totals after processing all files
  -v, --verbose     enable verbose mode (positively chatty)
  -V, --version     print program version

  -s, --strip-all   strip all markers from output file
  --strip-none      do not strip any markers
  --strip-com       strip Comment markers from output file
  --strip-exif      strip Exif markers from output file
  --strip-iptc      strip IPTC/Photoshop (APP13) markers from output file
  --strip-icc       strip ICC profile markers from output file
  --strip-xmp       strip XMP markers markers from output file

  --all-normal      force all output files to be non-progressive
  --all-progressive force all output files to be progressive
  --stdout          send output to standard output (instead of a file)
  --stdin           read input from standard input (instead of a file)

Merk at skriptet vil ikke optimalisere eller endre de originale JPEG-bildene du laster opp i WordPress.

Det er bare de skalerte utgavene av originalbildet som optimaliseres eller endres av jpegoptim. 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 JPEG

JPEGOPTIM er det primære biblioteket som brukes til selve bildeoptimaliseringen.

Installer jpegoptim

For å installere jpegoptim 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 jpegoptim

Debian, Ubuntu, Mint m.m.

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

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 jpeg-optim.sh i mappen ~/public_html/. Deretter åpner du filen med favoritteditoren din i Linux.

[bruker@wpologi]$ cd ~/public_html/
[bruker@wpologi]$ touch jpeg-optim.sh
[bruker@wpologi]$ vim jpeg-optim.sh

Kopier og lim inn skriptet nedenfor.

#!/bin/bash

# skriv inn riktig bane (path) til mediebiblioteket
cd ~/public_html/wp-content/uploads/

# See if optimisation is being forced
if [ -z "$1" ]; then
    find=$(find * -mtime -3 -name '*.jpg' -or -name '*.JPG')
else
    find=$(find * -name '*.jpg' -or -name '*.JPG')
fi

# find JPEGs
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.jpg
    if [[ $f =~ [0-9][0-9]\x[0-9][0-9] ]] ; then
        # echo $f;
       jpegoptim --preserve --max=84 $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 jpegoptim skal utføre.

# endre bane til mediebiblioteket
cd ~/public_html/wp-content/uploads/

# endre hvordan jpegoptim optimaliserer bilder
jpegoptim --preserve --max=84 $f

Filrettigheter

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

[bruker@wpologi]$ chmod 0700 jpeg-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: jpeg-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
        jpegoptim --preserve --max=84 $
  • Søker gjennom mappen for mediebibliotek i WordPress
  • Tester om filnavnet inneholder en kombinasjon av tall, bokstaven «x» deretter flere tall
  • Kjører kommando jpegoptim 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.jpg blir optimalisert
  • wp-content/uploads/2018/10/eksempel-bilde.jpg blir ikke optimalisert

Planlegg bildeoptimalisering (cron)

Ettersom det fort blir tungvint å kjøre skriptet manuelt hver gang du vil optimalisere JPEG-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/jpeg-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 JPEG.

Med egen bildeoptimalisering for JPEG er du ikke lenger avhengig av utvidelser for å gjøre jobben.

Dersom du ønsker å lage en tilsvarende løsning for PNG-bilder kan du lese hvordan du går frem her.

Kanskje du liker

1 kommentar

tomprak 31/10/2018 - 02:13

Jeg har et lite fashion magasin og poster mange bilder i hver artikkel. Lagrer bilder og sånn med Gimp og har testet Eww, men den brukte evigheter. Er det her raskere tror du?

Svar

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