Et billede siger som bekendt mere end 1000 ord, så selvfølgelig skal du bruge billeder på dit WordPress-website. WordPress kan en masse smarte ting med billeder ud af boksen, men inden du overfører dine højopløselige billeder fra din smartphone, så er der en række ting du bør være opmærksom på. Du bør fx være bevidst om filstørrelse, navngivning, lagring, metadata og temaets brug af billeder.
I dette oplæg giver jeg dig nogle bud på, hvordan du kan skabe et godt workflow fra klargøring af billeder inden de uploades, til hvordan du kan optimere håndteringen i WordPress ved brug af sund fornuft og smarte plugins. Jeg undgår ikke helt at komme ind på lidt teknik, men alle kan være med uanset tekniske forudsætninger.
Læs blogindlæg om optimering af billeder i WordPress:
http://www.webfronten.dk/optimering-billeder-wordpress/
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.
4
6. Tips til
billedbehandling
Masterbillede og kopibilleder
• Masterbillede i højeste opløsning (udg.pkt. for
• Kopibilleder i lavere opløsninger (til brug på
Arbejd med den højeste opløsning
• Hvis du har mulighed for det
Vent med at gøre billedet skarpere til sidst
• Gem masterbilledet ”uskarpt”
6
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
9
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.
10
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!
21
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
22
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.
23