Distriktsveterinärerna logotyp

Du har inga favoriter

Distriktsveterinärerna logotyp

Bildformat

Gällande bildformat på nya webben så är rekommendationen att använda sig av 1-3 stycken bildproportioner (ratio). För formatet "standardbild" kan t.ex. proportionen vara 3:2. Sedan får man titta på hur bred ytan är som mest där denna bild kommer att visas. För en "standardbild" på en vanlig normalsida eller artikelsida så kommer denna max-bredd kunna vara 1450 px. Vid 769px (borde varit 767px) skärmbredd har vi en responsiv anpassning och spalterna staplas.

Använd Sitevisions Bild-modul

Det är rekommenderat att använda Sitevisions bildmodul på webbplatsen. Om bild behöver infogas via metadata så finns möjlighet att "anpassa" bilden med skript där vi utvecklare använder Sitevisions Util-klasser.

https://help.sitevision.se/imageHelp.html Länk till annan webbplats.

Rekommendationen är att ladda upp en stor "orginalbild" till Filarkivet (alt. Bild på sidan) i Sitevision. Vi har sedan möjlighet att skala ner bilderna med "Förinställda storlekar" i Bild-modulen. Finns även möjlighet att i kod (skript) göra samma sak.

Tabell över bildstorlekar

Arbete pågår... Vi måste först fatta beslut om formaten. Det förefaller lämpligt att används formatet 3:2 för de flesta bilder. Idag har vi ett format som är nära 3:2 på de liggande bilderna- i puffar och innehållssidorna.

Skriv tabellbeskrivning här

Typ av bild

Dimension (bredd x höjd)

Ratio

Standard

1450 x 967 px

3:2

Hero

1600 x 500 px


Kvadratisk

720 x 720 px

1:1


Max-bredd för sidmallen Bred sida

För sidmallen nyhetssida så är max-bredden (i desktop) hela 1450 px. Rekommendationen är därför att vi kör på 1450 px som max-bredd på yta där bild visas. Det motsvarar alltså max-bredden på den innehållsytan på sidmallen Nyhetssida.

Förslag på bildstorlekar och proportioner (ratio)

Följande storlekar bör laddas upp som "orginal" i bildarkivet.

  • Bild (3x2): 1920x1280px
  • Bild (Hero): 1600x500px

Formel 16:9: Bredd x 0,5625 = Höjd
Formel 3:2: Bredd x 0,6667 = Höjd
Formel Hero: Bredd x (tal) = Höjd

Förslag på fortsatt arbete

  • Fatta beslut om nya bildformat.
  • Gå igenom alla sidor/mallar och anpassa kod där bild kommer från metadata.
    Använd "Sitevisions Utils" och ImageScaler enligt "best practice"!

Länktips om bildformat

http://placeimg.com/ Länk till annan webbplats. kan man snabbt skapa upp bilder i olika format.

Intressant läsning om bildstorlekar och ratio:

https://tiny-img.com/blog/best-image-size-for-website/ Länk till annan webbplats.

En annan guide över olika format som oftast används på webbplatser:

https://www.cronyxdigital.com/blog/the-ultimate-website-image-guide Länk till annan webbplats.

Använd den här omvandlaren om du behöver räkna ut vilken höjd din bild behöver för att få t.ex. bildförhållandet 3:2.

https://calculateaspectratio.com/ Länk till annan webbplats.

Exempel på bildformat

Standard med ratio 16:9

Standard med ratio 3:2

Standard med ratio 4:3