Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Optimering af billeder i WordPress

3,362 views

Published on

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/

Published in: Internet
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/39mQKz3 ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ http://bit.ly/39mQKz3 ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Optimering af billeder i WordPress

  1. 1. Optimering af billeder i WordPress WordCamp Denmark 2015 Torben Heikel Vinther
  2. 2. AGENDA 1. Billedeoptimering før upload 2. Billedeoptimering i WordPress 3. Offload billeder til skyen 2
  3. 3. Billedeoptimering før upload 3
  4. 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. 5. Billedbehandlingsprogram mer 5 • Photoshop hvis du har råd (og behov) • Pixlr hvis du vil have godt (nok) og gratis
  6. 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
  7. 7. Medieindstillinger i WordPress 7
  8. 8. Andre billedstørrelser • Temaer: • Plugins: • Det kan løbe op i mange forskellige størrelser i alt… 8
  9. 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. 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
  11. 11. Billedeoptimering i WordPress • Ikke altid tid til billedbehandling før upload • Manglende viden • Risiko for fejl ved manuelle processer 11
  12. 12. Plugin: Custom Upload Dir 12
  13. 13. Plugin: Imsanity 13
  14. 14. Plugin: Media File Renamer 14
  15. 15. Plugin: WP Retina 2x 15
  16. 16. Plugin: EWWW Image Optimizer 16
  17. 17. Plugin: WP Smush 17
  18. 18. Originalbillede 1920x1920 pixels 18
  19. 19. Output 19 • Brugerdefineret folder • Originalbillede resizet til max 1140 pixels • Filnavn indsat ”-” i stedet for mellemrum • Billede optimeret
  20. 20. Force Regenerate Thumbnails 20
  21. 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. 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. 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
  24. 24. Spørgsmål? 24
  25. 25. Tak for opmærksomheden! Torben Heikel Vinther www.webfronten.dk @sopperdk 25

×