Download to read offline
Uploaded byTorben Heikel Vinther
Optimering af billeder i WordPress
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/
Optimering af billeder i WordPress
- 1. Optimering af billeder i WordPress WordCampDenmark 2015 Torben Heikel Vinther
- 2. AGENDA 1. Billedeoptimering førupload 2. Billedeoptimering i WordPress 3. Offload billeder til skyen 2
- 3.
- 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
- 5. Billedbehandlingsprogram mer 5 • Photoshop hvisdu har råd (og behov) • Pixlr hvis du vil have godt (nok) og gratis
- 6. Tips til billedbehandling Masterbillede ogkopibilleder • 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
- 7.
- 8. Andre billedstørrelser • Temaer: •Plugins: • Det kan løbe op i mange forskellige størrelser i alt… 8
- 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 udaf 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
- 11. Billedeoptimering i WordPress • Ikkealtid tid til billedbehandling før upload • Manglende viden • Risiko for fejl ved manuelle processer 11
- 12.
- 13.
- 14.
- 15. Plugin: WP Retina2x 15
- 16.
- 17.
- 18.
- 19. Output 19 • Brugerdefineret folder •Originalbillede resizet til max 1140 pixels • Filnavn indsat ”-” i stedet for mellemrum • Billede optimeret
- 20.
- 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 S3Pro • 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 markeringved ”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
- 24.
- 25. Tak for opmærksomheden! Torben HeikelVinther www.webfronten.dk @sopperdk 25