Bilder och illustrationer

Nedan följer när och på vilka sätt vi använder oss av bilder och illustrationer på webbplatsen.

Då är det aktuellt

  • Bilder och illustrationer kan användas som betydelsebärande innehåll, det vill säga att de tillför, kompletterar eller förtydligar information.
  • Koppling och relevans till texten på sidan måste alltid finnas. Du får inte använda bilder för att enbart lätta upp en sida.

Så väljer du bild eller illustration

I vår mediabank hittar du hundratals inköpta och egentagna fotografier och illustrationer som är anpassade till SKR:s bildpolicy och grafiska manér. Här finns såväl bilder på vår ledning och personal samt de flesta av våra verksamhetsområden.

SKR:s mediabank Länk till annan webbplats.

Är du osäker på om bilden du valt funkar, om vi har rätt att publicera den eller saknar du något i mediabanken? Hör med XXX (ansvarig person/avdelning)

Det är inte tillåtet att:

  • använda egengjorda AI-bilder
  • "låna" bilder från andra webbplatser utan tillåtelse
  • publicera egentagna bilder på personer utan dennes skriftliga godkännande.

Storlek på bilder

Webbplatsens olika spalter har olika storlekar och det kan vara bra att veta vilken storlek man bör ha på sina bilder beroende på vart de ska placeras. Det är onödigt att spara ner för stora bilder. Nedan uppdateras webbplatsen med rekommenderade mått för olika typer av bilder:

Förteckning över rekommenderade bildstorlekar
BildtypStorlek i pixlarFormatKommentarFinns som färdigt format i bildbanken
Ligande bild på innehållssida och artikel930 x 620WebP
Ja
Puffbild manuella puffar930 x 620WebP
Ja
Hero startsida1800 x 970WebPKomprimera helst i PhotoshopJa i jpg
Hero kampanjsida1800 x 1200WebPKomprimera helst i PhotoshopJa i jpg
Bild i Hero med flikar1410 x 740WebPKomprimera helst i PhotoshopJa i jpg
Bild i sidhuvud samt för medverkande i evenemang800 x 800WebPVisas i 570 x 570 (och större i mobil)Ja
Personbild i dekorationen kontaktkort300 x 300WebP

Observera att rekommenderade bildstorlekar inte är en exakt vetenskap men att proportionerna mellan bredd och höjd är viktig att följa. Större eller mindre bildmått kan användas (med samma proportioner) beroende på hur kvalitet viktas i förhållande till prestanda.

Bilderna visas inte alltid störst på desktop utan ibland kan de visas större på mindre enheter.

Bildformat

Sitevision har stöd för bildformatet WebP. Formatet erbjuder bättre kvalitet till mindre filstorlek jämfört med traditionella bildformat. Befintliga bilder i Sitevisions bildarkiv kan konverteras till WebP genom att högerklicka på bilden i bildarkivet och välja Konvertera till WebP. Befintlig bildfil ersätts då av en WebP-version.

Bilder och prestanda

De bilder man lägger in på webbplatsen är ofta den tyngst vägande faktorn för prestandan på webbplatsen. En webbplats med mycket bilder tar längre tid att ladda än en webbplats utan, eller med få bilder.

Det finns därför några viktiga parametrar att tänka på när man lägger in bilder i Sitevision:

  • Bocka alltid i kryssrutan Ladda vid behov under fliken Övrigt i bildmodulen samt i inställningar för Artikel bild (metadata) under fliken Innehåll i modulen Nyheter. Detta gör att bilder inte laddas förrän de behövs (när användaren har scrollat ner så att bilden syns på skärmen).
  • Lägg inte in bilder som är större än ytan de ska visas i.
  • Observera att om man gör manuell eller automatisk omskalning i Sitevision så kan det åsidosätta den komprimering man gjort på originalet. En välkomprimerad bild som laddas upp kan få större filstorlek om den skalas ner i Sitevision.

Alternativtexter?

Sitevision har stöd för ai-genererade alternativtexter på bilder, använd gärna funktionen, men kontrollera texten som den tar fram utifrån punktlistan:

  • Bilden ska alltid ha en alternativtext som beskriver vad bilden föreställer. Exempelvis: "Två barn leker i en sandlåda." SKR:s ordförande Anders Henriksson i talarstolen på en kongress."
  • Beskriv bara det bilden föreställer – inte hur bilden ska tolkas eller sammanhanget den ska visualisera.
  • Längd: 80–120 tecken (inklusive blanksteg).
  • Ej betydelsebärande dekorationsbilder behöver ingen alt.text.

Publiceringsinformation

Innehåll på sidan