Optimering af billeder i WordPress

Optimering af billeder i

WordPressWordCamp Denmark 2015

Torben Heikel Vinther

2

AGENDA1. Billedeoptimering før upload2. Billedeoptimering i WordPress3. Offload billeder til skyen

3

Billedeoptimering før upload

4

Billedtekniske begreberPixels

• Ingen cm: Vi er kun interesseret i pixels, når vi snakker om billeder på en skærm!

Opløsning

• Pixels i bredden X pixels i højden

Filstørrelse

• Antal bytes afhænger af antal pixels, farvedybde, komprimering og filformat

Komprimering

• Tabsfri og tabsgivende

Filformater

• JPEG: Store billeder på skærm. Tabsgivende hver gang filen gemmes.

• GIF: Simple billeder som grafik og logoer. Tabsfri.

• PNG: Mindre billeder og grafik. Tabsfri komprimering.

5

Billedbehandlingsprogrammer

• Photoshop hvis du har råd (og behov)

• Pixlr hvis du vil have godt (nok) og gratis

6

Tips til billedbehandlingMasterbillede og kopibilleder• Masterbillede i højeste opløsning (udg.pkt. for

kopibilleder)• Kopibilleder i lavere opløsninger (til brug på

nettet)Arbejd med den højeste opløsning• Hvis du har mulighed for detVent med at gøre billedet skarpere til sidst• Gem masterbilledet ”uskarpt”

7

Medieindstillinger i WordPress

8

Andre billedstørrelser• Temaer:

• Plugins:

• Det kan løbe op i mange forskellige størrelser i alt…

9

Filer og metadata• Originalbillede (uploadbilledet)

gemmes som standard i wp-content/uploads/

• Thumpnails gemmes sammen med originalbillede

• Metadata om billeder ligger i databasetabellen wp_postmeta

10

Anbefalinger• Find ud af hvor stort billedet skal kunne vises

på websitet (fx vha. Inspect). Husk Retina!• Lav billedbehandling (beskæring, farver,

kontrast mv.) på en kopi af originalbilledet så du ikke mister data.

• Omdøb billede med brug af a-z og 0-9 og ingen mellemrum (brug ”-” i stedet).

• Fjern markering ved ”Organiser mine uploads i måneds- og årsbaserede mapper” i medieindstillinger.

11

Billedeoptimering i WordPress

• Ikke altid tid til billedbehandling før upload

• Manglende viden• Risiko for fejl ved manuelle processer

12

Plugin: Custom Upload Dir

13

Plugin: Imsanity

14

Plugin: Media File Renamer

15

Plugin: WP Retina 2x

16

Plugin: EWWW Image Optimizer

17

Plugin: WP Smush

18

Originalbillede

1920x1920 pixels

19

Output• Brugerdefineret folder

• Originalbillede resizet til max 1140 pixels• Filnavn indsat ”-” i stedet for mellemrum• Billede optimeret

20

Force Regenerate Thumbnails

21

Offload billeder til skyen• Hvis du har uploadet mange billeder kan

websitet blive tungt• Overvej muligheden for at flytte billederne et

andet sted fx på Amazon.• Pluginnet ”WP Offload S3” er løsningen!

22

WP Offload S3 Pro• Gratisudgaven kan ikke offloade eksisterende

billeder til Amazon• Det (og meget andet) kan betalingsudgaven!• Benyt www.webfronten.dk/go/wp-offload-

s3/ og få 20% rabat

23

Resumé• Fjern markering ved ”Organiser mine

uploads i måneds- og årsbaserede mapper” i medieindstillinger.

• Omdøb dine billeder fra starten og giv dem meningsfulde navne.

• Find ud af hvilken max-størrelse der er brug for (fx vha. Inspect). Husk Retina!

• Overvej brug af plugins.• Husk at udfylde alt-tekster.

24

Spørgsmål?

25

Tak for opmærksomheden!

Torben Heikel Vintherwww.webfronten.dk

@sopperdk