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.
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 jpegoptimDebian, Ubuntu, Mint m.m.
[bruker@wpologi]$ sudo apt-get install jpegoptimFinn 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.shKopier 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
doneHusk å 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 $fFilrettigheter
Neste trinn er å endre filrettigheter slik at skriptet kan kjøres på serveren.
[bruker@wpologi]$ chmod 0700 jpeg-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: jpeg-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
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.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 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.
1 kommentar
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?