Bildformat

Vi jobbar med proportioner (ratio) och max-bredd för bildformat på nya webbplatsen. Med nuvarande design/layout på sidmallar rekommenderas 1-3 stycken bildproportioner. Formatet "standardbild" ska vara i proportionen 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 hela 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 där det är möjligt 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 publika API.

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. Det är sedan möjligt 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

På webbplatsen ska alla liggande bilder ha proprtionen 3:2. Gäller för både "standard" puffar och "stor" bild innehållssidorna.

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

Komprimering av bilder

Sitevision är inte bäst på att komprimera stora jpg-bilder. Bilderna att bli rätt mycket tyngre än vad de egentligen behöver vara. Sämst resultat får vi om vi råkar ladda upp en högupplöst fotobild på flera MB.

Överväg att använda SVG och WebP som bildformat runt hörnet. WebP är ett rastrerat bildformat vilket innebär att bilderna är uppbyggda av en mängd pixlar i olika färger. Bildformatet är framtaget av Google och optimerat för att göra bilder på webben snabbladdade. Vid redaktionellt arbete i Sitevision kommer de allra flesta komma långt med att enbart använda formatet WebP för sina bilder.

WebP ger ca 25-34 % mindre bildfiler till motsvarande kvalitet som jpg-formatet ger men för en dåligt komprimerad bild kan vinsterna bli betydligt större.

Det är en avvägning mellan enkelhet för webbredaktörer och vikten av att komprimera bilder för att få bra resultat i prestandatester.

Förslag på fortsatt arbete

• Fatta beslut om bildformat för Hero och nya varianter av puffar.
• Gå igenom alla sidor/mallar och anpassa kod där bild kommer från metadata.
  Använd publika API:et med "Sitevisions Utils" och ImageScaler enligt "best practice"!
  

Länktips om bildformat

På 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