Divi Billedstørrelser og Optimering: Den Komplette Guide

At vælge de korrekte billedstørrelser og sikre, at dine billeder er fuldt optimerede, er afgørende for en hurtig og effektiv Divi-hjemmeside. Veloptimerede billeder forbedrer din sideindlæsningstid, øger din SEO-rangering og holder dine besøgende tilfredse. Denne omfattende guide vil dykke ned i, hvordan du vælger de rigtige billedstørrelser til Divi, hvordan du optimerer dine billedfiler, og hvordan du forbereder dine billeder til bedre SEO.

Forståelse af Divi Billedstørrelser

Størrelsen på Divi-billeders bredde afhænger primært af antallet af kolonner, der anvendes i Divi Builder eller Theme Builder. En standard Divi-opsætning har typisk en maksimal bredde på 1080px for indholdsområdet og en standard afstand (gutter-width) på 3. Disse indstillinger danner grundlaget for de anbefalede billedbredder.

Standard Billedbredder Baseret på Søjler

Når du arbejder med Divi, er det vigtigt at matche billedets bredde med den kolonne, det placeres i. Her er de anbefalede bredder baseret på standardindstillinger:

Billedhøjder og Aspect Ratios

Mens billedbredden ofte er bestemt af kolonnestrukturen, kan du frit vælge billedhøjden. Dog anvendes der ofte specifikke aspektforhold i webdesign, herunder 16:9, 4:3 og 3:4. Et aspektforhold er blot et tal, der repræsenterer forholdet mellem billedets bredde og højde. Disse anbefalinger er baseret på standard Divi-indstillinger (1080px maks. bredde og gutter-width på 3) før eventuelle brugerdefinerede bredder, afstande eller polstring er tilføjet.

Anbefalede Divi Billedstørrelser (Bredde x Højde) for 16:9 Aspect Ratio

Anbefalede Divi Billedstørrelser (Bredde x Højde) for 4:3 Aspect Ratio

Specifikke Billedstørrelser for Divi Moduler

Hvert modul i Divi har sine egne unikke krav til billedstørrelser. For at opnå den bedste ydeevne og visuelle kvalitet er det vigtigt at kende de specifikke dimensioner for de moduler, du bruger. Husk, at Divi er responsivt, hvilket betyder, at billedstørrelser kan tilpasse sig forskellige skærmstørrelser (f.eks. tablet og mobil), så det er ofte bedst at starte med en tilstrækkelig stor størrelse.

Divi Billedmodul

• Anbefalet bredde: Lig med kolonnens bredde (bedst 1080px for fuld bredde).
• 16:9 aspektforhold:
  • 1 kolonne: 1080 x 608px
  • 2/3, 3/4, 1/2, 1/3 kolonne: 770 x 433px
  • 1/4 kolonne: 370 x 208px
• 4:3 aspektforhold:
  • 1 kolonne: 1080 x 810px
  • 2/3, 3/4, 1/2, 1/3 kolonne: 770 x 578px
  • 1/4 kolonne: 370 x 278px
• Lightbox-billeder: 1500 x 844px (vises som 766 x 824px i lightbox).

Divi Slider/Post Slider Modul (Baggrundsbillede)

• Anbefalet bredde: Lig med kolonnens bredde. Højden bestemmes af indholdet.
• 16:9 aspektforhold:
  • 1 kolonne: 1080 x 608px
  • 3/4 kolonne: 795 x 447px
  • 2/3 kolonne: 700 x 394px
  • 1/2 kolonne: 510 x 287px
  • 1/3 kolonne: 320 x 181px
  • 1/4 kolonne: 225 x 128px
• 4:3 aspektforhold:
  • 1 kolonne: 1080 x 810px
  • 3/4 kolonne: 795 x 597px
  • 2/3 kolonne: 700 x 526px
  • 1/2 kolonne: 510 x 384px
  • 1/3 kolonne: 320 x 241px
  • 1/4 kolonne: 225 x 170px
• Responsiv (mobil): For at sikre, at slideren spænder over kolonnebredden på mobile enheder, kan de samme dimensioner som for billedmodulet (tabletstørrelser) anvendes.

Divi Slider/Post Slider Modul (Featured Image)

• Viser kun i slidere med 2/3, 3/4 eller 1 kolonne.
• 1 kolonne: 450px
• 3/4 kolonne: 330px
• 2/3 kolonne: 320px

Divi Audiomodulet (Cover Art Image)

• Anbefalet bredde: Mindst 780px.
• Billedet vises som 230 x 130px som standard.

Divi Blogmodul (Featured Images - Fuld bredde & Grid Layout)

• Fuld bredde layout: Lig med kolonnens bredde (f.eks. 1080px for 1 kolonne, 795px for 3/4 kolonne, 700px for 2/3 kolonne, 510px for 1/2 kolonne, 320px for 1/3 kolonne, 225px for 1/4 kolonne).
• Grid layout: Standard enkeltpost kolonnebredde (795px). Divi genererer automatisk en mindre version (400px bredde).

Divi Portfoliomodulet (Featured Images)

• Dimensionerne er de samme som for Blogmodulets featured images. Standard enkeltpost kolonnebredde er 795px.

Divi Blurb Modul

• Anbefalet bredde: Maksimalt 550px.
• 1 kolonne: 550px (standard)
• 1/2 kolonne: 510px
• 1/3 kolonne: 320px
• 1/4 kolonne: 225px

Divi Gallerimodul (Slider og Grid Layout)

• Anbefalet størrelse: 1500 x 844px (til lightbox, vises som 766 x 824px).
• Grid layout bruger en mindre version (400px bredde).

Divi Personmodul

• Anbefalet bredde: 600px.
• 3:4 aspektforhold: 600 x 800px (anbefales til portrætter)
• 16:9 aspektforhold: 600 x 338px
• 4:3 aspektforhold: 600 x 400px

Divi Post Titel Modul (Featured Image)

• Anbefalet bredde: Lig med kolonnens bredde. 1080px for et 1-kolonne layout.

Divi Butiksmodul (WooCommerce)

• 6 kolonner: 150px
• 5 kolonner: 183px
• 4 kolonner: 240px
• 3 kolonner: 332px
• 2 kolonner: 520px
• 1 kolonne: 1080px
• Bemærk: Produktbilleder i 1- og 2-kolonne layouts kan fremstå slørede, da Divi genererer en mindre version (maks. 400px bredde).

Divi Testimonial Modul

• Anbefalet størrelse: 90 x 90px (standard for cirkulær visning). For at opnå en perfekt cirkel skal billedets højde og bredde være ens.

Retningslinjer for Baggrundsbilleder (Standard & Fullwidth Moduler)

• Standard modul baggrundsbilleder: Bredde lig med kolonnens bredde (f.eks. 1080px, 795px, 700px, 510px, 320px, 225px).
• Fullwidth sektionsbaggrundsbilleder: Anbefalet bredde på 1920px for at dække de fleste store skærme. Højden afhænger af indholdet i modulet.

Optimering af Divi Billedfiler

Optimering af dine billeder, både før og efter upload til Divi, vil resultere i en hurtigere Divi-hjemmeside, bedre SEO og mindre båndbreddeforbrug på din webhosting. Målet med billedoptimering er at opnå den lavest mulige filstørrelse, samtidig med at en acceptabel billedkvalitet opretholdes. Dette er en af de mest effektive måder at forbedre din hjemmesides ydeevne på.

De 4 Hovedfaktorer for Billedoptimering i Divi:

1. Vælg det korrekte filformat:
   • JPEG: Bedst egnet til fotos eller billeder med mange farver. Tilbyder god komprimering med acceptabel kvalitet.
   • PNG: Ideel til billeder med gennemsigtighed (f.eks. logoer) eller skarpe linjer og tekst.
   • GIF: Bruges primært til animerede billeder.
2. Brug billedkomprimering:

   Komprimering reducerer filstørrelsen uden at ændre billedets pixeldimensioner. Dette kan gøres med software på din computer eller ved hjælp af onlineværktøjer både før og efter upload. Nøglen er at opnå den laveste filstørrelse uden drastisk at reducere billedkvaliteten.

3. Vælg de korrekte pixeldimensioner:

   Dette er billedets pixelbredde og -højde og bør matche pixeldimensionerne for det område, hvor det skal placeres på din hjemmeside. Upload ikke et billede direkte fra dit kamera til et område, der kun er 400 pixels bredt, da dette spilder båndbredde og hukommelse.

4. Inkluder alt- og titeltekst:

   Disse tekstattributter fortæller Google og dine brugere med skærmlæsere, hvad dit billede viser. Det er afgørende for SEO og tilgængelighed, da det hjælper dine billeder med at dukke op i Google-søgninger.

Software til Forhåndsoptimering af Billeder

Disse programmer giver dig mulighed for at optimere store billeder, før du uploader dem til din hjemmeside:

• Adobe Photoshop: Branchens standard for professionel billedredigering og optimering.
• Affinity Photo: Et billigere alternativ til Photoshop med mange lignende funktioner.
• Gimp: En gratis, open source billedredigerer, der er et solidt Photoshop-alternativ for grundlæggende behov.
• Bulk Resize Photos: En gratis web-app, der hurtigt og nemt kan ændre pixeldimensionerne på dine billeder.
• TinyPNG: En smart lossy komprimeringssoftware, der reducerer filstørrelsen på WEBP-, JPEG- og PNG-filer ved at reducere antallet af farver.

Plugins til Optimering af Billeder på Din Hjemmeside

Selvom forhåndsoptimering er ideelt, er efter-upload-optimering bedre end ingen optimering. Disse WordPress-plugins kan hjælpe:

• Siteground Optimizer: Til Divi-hjemmesider hostet hos Siteground. Inkluderer billedkomprimering, lazy load og WebP-muligheder.
• EWWW Image Optimizer: Et gratis WordPress-plugin, der automatisk komprimerer, skalerer, lazy loader og konverterer billeder til WebP-format.
• Smush: Et populært premium WordPress-plugin, der optimerer billeder ved at ændre størrelse, komprimere og lazy loade dem.
• ShortPixel: Tilbyder forskellige komprimeringstyper, håndterer billedbackup, ændrer størrelse og understøtter WebP og retina-billedoptimering.

Ofte Stillede Spørgsmål (FAQ)

Hvad er den ideelle Divi billedstørrelse?

Der findes ikke én enkelt "perfekt" billedstørrelse. Den ideelle størrelse afhænger af flere faktorer: hvilken kolonne layout billedet er i, hvilket Divi modul du bruger, og hvilket aspektforhold du ønsker. Det er dog altid bedst at starte med et billede, der er mindst lige så bredt som det område, det skal dække, og derefter optimere det.

Hvorfor er billedoptimering vigtig for min Divi-hjemmeside?

Billedoptimering er afgørende for din hjemmesides ydeevne. Det forbedrer din sideindlæsningstid, hvilket er en vigtig faktor for både brugeroplevelse og SEO. Langsomme sider fører til højere afvisningsprocenter og dårligere placeringer i søgemaskinerne. Optimerede billeder reducerer også brugen af hostingbåndbredde.

Hvilke billedformater skal jeg bruge i Divi?

Som en generel regel bør du bruge JPEG til fotos og billeder med mange farver, da de tilbyder god komprimering. PNG er bedst til billeder med gennemsigtighed (f.eks. logoer) eller når du har brug for høj kvalitet med skarpe kanter. GIF bruges primært til små, animerede billeder.

Skal jeg optimere billeder før eller efter upload til Divi?

Det er altid bedst at optimere dine billeder, inden du uploader dem til Divi. Dette giver dig mest kontrol over filstørrelse og kvalitet. Hvis du ikke har mulighed for det, kan du dog stadig bruge WordPress-plugins til at optimere billederne efter upload. Det er bedre at optimere efter upload end slet ikke at optimere.

Hvordan påvirker responsivt design billedstørrelser i Divi?

Divi er designet til at være responsivt, hvilket betyder, at din hjemmesides layout tilpasser sig forskellige skærmstørrelser, herunder tablets og mobiltelefoner. En række med fire kolonner på en desktop-skærm kan f.eks. ændre sig til to kolonner på en tablet. Dette betyder, at et billede, der passer perfekt til en desktop, muligvis skal være tilstrækkeligt stort til at se godt ud på en tablet, selvom det er en større filstørrelse end nødvendigt for desktop.

Afsluttende Tanker

Billeder er en vital del af enhver hjemmeside, og det er afgørende at vælge den rigtige billedstørrelse, det korrekte filformat og at optimere det, så det har en lille filstørrelse. Hvis din hjemmeside er langsom, er der en god chance for, at dette skyldes billeder, der er for store. Det er en simpel løsning og kan have dramatiske effekter på din hjemmeside. Optimering af dine billeder vil fremskynde din hjemmeside og give den et enormt løft med meget lidt indsats. Sæt billedoptimering på din to-do-liste nu!

Hvis du vil læse andre artikler, der ligner Divi Billedstørrelser og Optimering: Den Komplette Guide, kan du besøge kategorien Teknologi.