En bra bild gör en sida mer begriplig och mer läst. En dålig bild – för tung, utan beskrivning eller använd utan tillstånd – gör den långsammare, svårare att använda och kan bli dyr. Här går vi igenom fyra saker du behöver ha koll på: format, storlek, alt-text och rättigheter.
1. Välj rätt format
Olika bildformat passar för olika slags bilder. Det vanligaste misstaget är att spara fotografier som PNG eller grafik med text som JPEG.
- JPEG passar fotografier. Formatet komprimerar med förlust, vilket ger små filer men kan ge synliga artefakter vid hård komprimering.
- PNG passar skärmbilder, illustrationer med skarpa kanter och bilder som behöver genomskinlig bakgrund. För fotografier blir filerna onödigt stora.
- SVG är vektorgrafik och passar logotyper, ikoner och enkla illustrationer. Bilden blir skarp i alla storlekar.
- WebP och AVIF är nyare format som ofta ger mindre filer än JPEG och PNG vid samma kvalitet. Moderna webbläsare stöder dem, och många publiceringsverktyg kan skapa dem automatiskt.
2. Rätt storlek – i pixlar och i kilobyte
Bilder är ofta det som väger mest på en webbsida. En bild direkt från en modern kamera eller mobil kan vara flera tusen pixlar bred, medan den på sidan kanske visas i 800 pixlars bredd. Besökaren laddar då ner mångdubbelt mer data än som behövs, och det märks särskilt i mobilen.
Gör så här:
- Ta reda på hur bred bilden visas på sidan, till exempel innehållsytans bredd.
- Exportera bilden i den bredden och gärna i dubbel bredd för skärmar med hög upplösning. Använd bildkalkylen för att räkna ut höjden utan att förvränga bilden.
- Komprimera. De flesta bildprogram har ett kvalitetsreglage; sänk tills du ser skillnad och gå sedan ett snäpp tillbaka.
- Kontrollera att publiceringsverktyget skapar flera storlekar och låter webbläsaren välja, så att mobilen inte laddar den största versionen.
Tänk också på beskärningen. En bild som ska visas i olika format – liggande på datorn, mer kvadratisk i mobilen – behöver ha motivet i mitten, annars kan det viktigaste beskäras bort.
3. Alt-texten – bilden för den som inte ser den
Alternativtexten läses upp av skärmläsare och visas om bilden inte laddas. Den är en del av tillgängligheten och för offentlig sektor ett krav enligt lagen om tillgänglighet till digital offentlig service.
- Beskriv det som är viktigt i sammanhanget, inte allt som syns. Samma foto kan behöva olika alt-texter i olika artiklar.
- Var kortfattad. En eller två meningar räcker oftast.
- Skriv inte ”bild av” – skärmläsaren talar redan om att det är en bild.
- Text i bilden måste också finnas i alt-texten eller i den vanliga texten, till exempel på en affisch eller ett diagram.
- Dekorativa bilder som inte tillför något ska ha en tom alt-text, så att skärmläsaren hoppar över dem.
Diagram och infografik behöver ofta mer än en alt-text. Beskriv slutsatsen i den vanliga texten och lägg gärna till siffrorna i en tabell.
4. Rättigheter – får du använda bilden?
Att en bild finns på nätet betyder inte att den är fri att använda. Enligt upphovsrättslagen är ett fotografiskt verk skyddat under fotografens livstid och 70 år efter dödsåret. Även bilder som inte räknas som verk skyddas: en vanlig fotografisk bild är skyddad till utgången av det femtionde året efter att den togs.
- Egna bilder – kontrollera att personerna på bilden går med på att synas, särskilt barn.
- Köpta bilder – läs licensen. Den kan begränsa var och hur länge bilden får användas.
- Fria bildbanker – villkoren skiljer sig. En del kräver att fotografen anges, andra inte. Spara alltid information om var bilden kommer ifrån.
- Creative Commons – licenserna anger om du måste ange upphovsperson, om bilden får ändras och om den får användas kommersiellt.
Filnamn, bildtext och sammanhang
Filnamnet syns sällan för besökaren, men det gör det lättare att hitta bilden igen i mediebiblioteket och ger sökmotorer en ledtråd om vad bilden visar. Använd korta, beskrivande namn med bindestreck och utan å, ä och ö om publiceringsverktyget har problem med dem.
Bildtexten är något annat än alt-texten. Den syns för alla och kan tillföra information som inte syns i bilden: vem som är med, var och när bilden togs eller vem som fotograferat. Upprepa inte bildtexten ordagrant i alt-texten – då får skärmläsaranvändaren höra samma sak två gånger. Fundera till sist på om bilden verkligen behövs. En bild som bara fyller ut gör sidan tyngre utan att hjälpa läsaren.
Checklista före publicering
- Rätt format för bildtypen
- Rimlig bredd och komprimerad fil
- Begripligt filnamn, till exempel receptionen-entre.jpg i stället för IMG_4711.jpg
- Alt-text som beskriver det viktiga – eller tom om bilden är dekorativ
- Koll på rättigheter och, vid behov, fotografens namn