Gå till innehållet

Bilder

Bildstorlekar och bildförhållanden

  • WordPress skapar automatiskt alla bildstorlekar som behövs för olika användningsplatser (artikelbild, herobild, lyft och så vidare). Du behöver inte förminska eller beskära bilder i förväg.
  • Olika block och element använder olika bildförhållanden – kontrollera alltid att bilden passar. Bildförhållandena finns längre ner på sidan under Exakta bildförhållanden.
  • Det är bäst att använda liggande bilder eftersom de fungerar bra på de flesta platser.
  • Placera bildens viktigaste innehåll i mitten, eftersom beskärningen varierar beroende på enhet och skärmstorlek.

Bildstorlek

  • Bilden bör vara över 3000 px bred för att kunna användas i alla bildformat och för att bibehålla jämn kvalitet på alla skärmar.  Om en bild med för liten upplösning laddas upp i systemet kan systemet inte skapa komprimerade versioner av den. Då visas originalbilden på sidan, vilket gör att sidan blir långsam och får ett lågt betyg av Google.
    • Undantag till detta är kontaktbild som är en vertikal bild och minst 844 px bred. Bildproportionen i kontaktbilden är 3:4.
  • Maximal filstorlek: 15 MB
  • Rekommenderad upplösning: 72 dpi (fungerar bra för webben)
  • Placera bildens viktigaste innehåll i mitten av bilden. Då riskerar det inte att beskäras bort när bilden skalas för olika skärmstorlekar. Till exempel är det viktigt att placera en persons ögon eller ansikte ungefär i mitten av bilden.
Exakta bildproportioner

Systemet skapar automatiskt olika bildstorlekar utifrån originalbilden, som används i olika block.

Om du ändå i något enstaka fall vill arbeta så exakt att du själv styr hur bilden beskärs i olika visningslägen är det bäst att ladda upp en bild som redan har rätt bildförhållande. Det är också bra att informera fotografen om bildförhållandena om ni köper in bilder.

Det vanligaste bildförhållandet vi använder är 16:9

  • Detta förhållande tar inte upp för mycket höjd och kan till exempel användas i en spaltbredd.
  • Bildförhållandet är något lägre än vanliga fotoförhållanden. En normal liggande bild beskärs då bara lite upptill och nedtill.

Andra fasta bildförhållanden

  • På webbplatsen kan även andra fasta bildförhållanden användas, som till exempel kvadratiskt (1:1).
  • Om originalbildens proportioner är annorlunda beskärs bilden automatiskt.
  • Originalbilden kan också i förväg göras i det önskade förhållandet, till exempel porträttbilder (3:4).

Fullbreddsbild

  • Bilden visas alltid från kant till kant, oavsett skärmens bredd.
  • Höjden ändras däremot inte i samma grad, utan förblir densamma eller nästan densamma.
  • På datorskärmar beskärs bilden kraftigt upptill och nedtill.
  • Kräver en stor bild (minst 3000 px bred).

Bild som beskärs efter innehåll

  • Bilden kan beskäras enligt exempelvis höjden på en intilliggande textspalt.
  • Bildförhållandet kan också ändras beroende på skärmstorlek.
  • Bilden kan till exempel ha en inställd minimihöjd.

Kontaktbilder

  • Kontaktbilder är stående bilder i formatet 3:4. Två kontaktbilder ryms i en vanlig spalt, vilket gör att en bilds bredd är cirka 400 px. För att de ska se bra ut även på högupplösta skärmar rekommenderar vi att bilden är minst 800 px bred.
  • I gamla Klockaren rekommenderades 200 x 200 px eller 200 x 266 px – dessa är för små för nya Klockaren.

Allmän bildstorleksanvisning(du kommer att omdirigeras till en annan webbplats, öppnas i ett nytt fönster) finns som PDF på finska (PDF:en innehåller exempelbilder i olika storlekar.)

Bildförhållanden i olika block

Bildförhållande 16:9

  • Evenemang
  • Vanlig bild
  • Fullbreddsbild
  • Artikellista
  • Evenemangslista
  • Innehållskort / undersideslista
  • Blogg
  • Bild för en enskild lokal
  • Lokallista

Bildförhållande 4:3

  • Bild och text
  • Bildkarusell
  • Bild och lista

Bildförhållande 1:1

  • Bild, text och länk
  • Stig eller tidslinje
  • Bildgalleri

Övriga bildförhållanden

  • Undersidans underbild: 3:4 och 4:3. Collage med stående och liggande bilder.
  • Lyftkarusell: 3:4 och 4:3. Collage med stående och liggande bilder.
  • Nyhetslista: en stor bild i 1:1 och övriga i 16:9.
  • Kontaktuppgiftslyft: 3:4 (stående bild)

Se exempelbilder av bildproportionerna i den gamla finska Klockarenguiden(du kommer att omdirigeras till en annan webbplats, öppnas i ett nytt fönster).

Bildhantering och visning

  • Originalbilden visas aldrig på den offentliga sidan – systemet visar endast den bildstorlek som blocket eller elementet använder.
  • Herobilder på undersidor kan vara både stående och liggande.

Bildhantering i mediebiblioteket

  • När en bild laddas upp skapar WordPress automatiskt alla nödvändiga bildstorlekar.
  • Bildens adress (URL) förändras inte även om bilden flyttas mellan mappar – länkarna går alltså inte sönder.
  • Bilder och bilagor hanteras i samma mediebibliotek.
  • Användaren måste ha rättigheter till alla mappar där hen vill kunna använda bilder.
  • Gemensamma bilder (för alla församlingar) ska sparas i en särskild mapp. Den här rutinen preciseras senare.
  • Fält som hör till bilder:
    • Alternativ text: alt-text som visas för skärmläsare 
    • Bildtext: visas som bildtext på sidan 
    • Beskrivning: visas inte offentligt, kan användas för egna anteckningar (till exempel fotografens namn)

Bildresurser

Kyrkans kommunikation har samlat och kuraterat flera bildsamlingar som kan användas som illustrationsbilder på församlingens webbplats.

Det är dock alltid bäst att i första hand använda egna lokala bilder. De ger webbplatsen en personlig och trovärdig prägel.

De bildresurser som nämns nedan får ändå användas fritt.

I Canva finns dessutom olika mallar som du kan använda för att skapa bilder som passar för Klockaren.

Bildsamlingar i materialbanken
Kuraterade bildsamlingar
Canva-mallar

Obs! Skapa alltid en egen kopia av Canva-mallen innan du börjar arbeta med den.

Lättlästa bilder i materialbanken