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:
| Bildtyp | Storlek i pixlar | Format | Kommentar | Finns som färdigt format i bildbanken |
|---|---|---|---|---|
| Ligande bild på innehållssida och artikel | 930 x 620 | WebP | Ja | |
| Puffbild manuella puffar | 930 x 620 | WebP | Ja | |
| Hero startsida | 1800 x 970 | WebP | Komprimera helst i Photoshop | Ja i jpg |
| Hero kampanjsida | 1800 x 1200 | WebP | Komprimera helst i Photoshop | Ja i jpg |
| Bild i Hero med flikar | 1410 x 740 | WebP | Komprimera helst i Photoshop | Ja i jpg |
| Bild i sidhuvud samt för medverkande i evenemang | 800 x 800 | WebP | Visas i 570 x 570 (och större i mobil) | Ja |
| Personbild i dekorationen kontaktkort | 300 x 300 | WebP |
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.