Bildformat & upphovsrätt

Stora filer, långsamma sidor

En bild är nästan alltid det största som laddas på en webbsida. Din HTML är några kilobyte (KB), din CSS ungefär lika liten, men ett obehandlat foto från en mobilkamera kan vara flera megabyte (MB), tusentals gånger större. Allt det måste besökaren ladda ner, och på en mobil med dålig täckning betyder varje extra megabyte sekunder av väntan.

När utvecklare säger att en bild “väger” mycket är det filstorleken de menar, branschens vardagsspråk för KB och MB. I den här delen lär du dig hålla vikten nere med rätt upplösning och rätt format, och dessutom vad lagen säger om bilder du hittar på nätet.

Pixeln är en lögn: Retina-fällan

En pixel i din CSS-kod är inte samma sak som en fysisk pixel på en modern skärm. På smartphones och moderna laptops motsvarar en CSS-pixel ett litet nät av 2×2 eller 3×3 fysiska pixlar.

Om du laddar upp en bild som är exakt 400 pixlar bred kommer den att sträckas ut och se suddig ut på en iPhone. Det kallas för Retina-fällan. För att en bild ska vara knivskarp måste du spara den i dubbel upplösning (800 pixlar bred), men komprimera den smart så att den inte väger för mycket.

Dubbelt så bred betyder inte dubbelt så mycket data. En bild är en yta, så när du fördubblar bredden fördubblas höjden också och antalet pixlar fyrdubblas. Det är därför komprimeringen är lika viktig som storleken.

Fyra rektanglar ritade ovanpå varandra med gemensamt övre vänstra hörn, märkta 320 x 240, 640 x 480, 1280 x 720 och 1920 x 1080. Varje steg upp täcker en betydligt större yta än det föregående. — Vanliga bildstorlekar i förhållande till varandra. 1920 x 1080 innehåller 27 gånger så många pixlar som 320 x 240, trots att bredden bara är sex gånger så stor.

Välj rätt digitalt format

Webbläsaren bryr sig jättemycket om vilket format du väljer. Att välja fel format kan göra att din sida tar väldigt lång tid att ladda.

Format	Typ	Bästa användning	Branschtips
WebP	Raster (Pixlar)	Foton och bilder med genomskinlig bakgrund.	Branschens standard. Ersätter gamla JPEG och PNG i 95% av fallen.
SVG	Vektor (Matematik)	Logotyper, ikoner och enkla teckningar.	Väger nästan ingenting och håller sig 100% knivskarp oavsett hur mycket du zoomar in.

Digital juridik: Du äger inte internet

Allt du hittar på Google eller Pinterest är automatiskt upphovsrättsskyddat. Du får inte använda en bild bara för att den var lätt att ladda ner.

För att din sida ska vara laglig använder vi bilder med CC0-licens (Creative Commons Zero). Det betyder att fotografen bjuder på bilden. CC0 är den friaste av Creative Commons-licenserna, andra CC-licenser ställer krav som att fotografen namnges. Du hittar fantastiska CC0-foton på webbplatser som Unsplash och Pixabay.

Alt-text

Du har redan arbetat med alt-text i Bilder på webben. Samma regler gäller för alla bilder: beskriv vad bilden gör eller tillför, inte bara vad pixlarna visar. Dekorativa bilder får tomt alt="".

Uppgift: Optimera bilderna på din testsida

Din publicerade sida har redan en bild sedan Bilder på webben. Nu ska den bli snabb.

Öppna Squoosh.app i webbläsaren och dra in bilden från din sida. Exportera den som WebP och sikta på under 100 KB.
Byt ut originalfilen i ditt repo mot WebP-versionen och uppdatera src i din <img>-tagg. Behåll alt-texten.
Hämta gärna en eller två bilder till från Unsplash eller Pixabay och lek med Squooshs inställningar: hur hårt kan du komprimera innan du ser skillnad med blotta ögat?
Committa, pusha och verifiera att bilderna syns på din live-länk.
Skriv ner länken till fotografens originalsida i din README.md för att visa varifrån du hämtat din lagliga bild.

Vad händer om…

Ladda upp originalfilen (utan att konvertera till WebP) och jämför laddningstiden i DevTools (F12), fliken Network, med Slow 3G throttling. Klicka på bildraden och läs kolumnerna Size och Time för båda filerna. Hur stor är skillnaden i laddningstid per extra megabyte?

Motivera & reflektera

I ditt repos README, skriv ner bildens storlek före och efter Squoosh, och motivera formatvalet: varför WebP och inte JPEG eller PNG för just den här bilden?

Nästa nivå

Att spara i dubbel upplösning löser Retina-fällan, men då tvingar du alla att ladda den stora bilden, även den som sitter på en liten mobil med dålig täckning. Den riktiga lösningen är responsiva bilder: låt webbläsaren välja rätt storlek själv.

<img
    src="profil-400.webp"
    srcset="profil-400.webp 400w, profil-800.webp 800w"
    sizes="(max-width: 600px) 400px, 800px"
    alt="..."
/>

Exportera din bild i två storlekar från Squoosh, lägg in srcset och sizes, och verifiera i DevTools Network vilken fil som faktiskt hämtas när du drar mobilvyn smal respektive bred. Det här är hur riktiga sajter levererar skarpa bilder utan att straffa mobilanvändaren, och det är sällan något en junior kan.