Upload
torben-heikel-vinther
View
1.747
Download
3
Embed Size (px)
Citation preview
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