Media: bilder och alt-text

Modul 4: Skapa innehåll · Lästid: 9 minuter

Lärandemål: Efter den här lektionen kan du förbereda, ladda upp och beskriva bilder på rätt sätt, så att de laddar snabbt, ser skarpa ut och är användbara för alla.

Nyckelbegrepp: mediebibliotek, bildformat, big image threshold (2560 pixlar), JPEG, PNG, WebP, AVIF, komprimering, srcset, lazy loading, alt-text, filnamn, upphovsrätt

Vad som händer när du laddar upp ett foto

Du laddar upp ett foto från din telefon: 4 000 gånger 3 000 pixlar, 5 MB. WordPress gör då mer än du tror:

1. Är fotot bredare eller högre än 2 560 pixlar, skapar WordPress en förminskad version (med -scaled i namnet) och använder den som "original". Det riktiga originalet sparas också. Det kallas big image threshold och har funnits sedan WordPress 5.3.
2. WordPress skapar dessutom en rad mindre format: miniatyr (standard 150 x 150 pixlar, beskuren), medium (300), stor (1024), samt extra format på 768, 1536 och 2048 pixlar bred. Ditt tema och dina tillägg lägger ofta till egna format.
3. Alla versioner hamnar i wp-content/uploads/2026/11/ (år och månad för uppladdningen).

Ett foto blir alltså snabbt åtta eller fler filer. Det är därför mappen uploads växer så fort (lektion 1.3), och därför spelar det roll vad du laddar upp.

På sidan lägger WordPress till ett srcset vid en bild: en lista med alla dessa format. Webbläsaren väljer själv det minsta formatet som är tillräckligt skarpt för skärmen. En telefon laddar då formatet på 768 pixlar, en stor skärm det på 1536. Det fungerar bara bra om formaten finns, alltså om du laddar upp via mediebiblioteket och inte med FTP.

Förminska och komprimera i förväg

Även med de automatiska formaten lönar det sig att förminska foton i förväg:

• Storlek: ett foto som på din webbplats aldrig visas bredare än 1 600 pixlar behöver inte vara 4 000 pixlar brett. Förminska det i förväg till ungefär 2 000 pixlar på den långa sidan. Det sparar lagringsutrymme, säkerhetskopieringsstorlek och uppladdningstid.
• Komprimering: en JPEG med kvalitet 75 till 85 ser för ögat nästan likadan ut som kvalitet 100, men är ofta hälften så stor.
• Metadata: foton från en telefon innehåller ofta GPS-platsen där de togs. Vill du inte att alla ska veta var du bor, ta bort det innan du laddar upp. WordPress tar bort mycket metadata i de förminskade formaten, men originalet kan fortfarande innehålla den.

Det finns tillägg som komprimerar bilder vid uppladdning eller konverterar dem till ett modernare format. Praktiskt, men kontrollera om de gör det på din egen server eller skickar bilderna till en extern tjänst (lektion 9.3), och om du verkligen behöver ett tillägg om du kan göra det i förväg själv.

Vilket format

Kan din server inte hantera ett format ger WordPress ett fel vid uppladdning eller skapar inga mindre format. I Verktyg > Hälsokontroll för webbplatser (fliken Info, under Mediahantering) ser du vilka format din server stöder.

Lazy loading

Sedan WordPress 5.5 får bilder automatiskt loading="lazy": webbläsaren laddar en bild först när du scrollar fram till den. Det gör en lång sida med många foton mycket snabbare. WordPress låter medvetet den första stora bilden högst upp på sidan vara utan lazy loading och ger den ofta prioritet med fetchpriority="high", eftersom den ska synas så snabbt som möjligt. Det återkommer vi till i lektion 6.3.

Ange alltid bredd och höjd på en bild (WordPress gör det automatiskt för bilder från mediebiblioteket). Då reserverar webbläsaren utrymme i förväg och texten hoppar inte till när fotot laddas in.

Alt-text: för den som inte ser bilden

Alt-texten (alternativ text) beskriver vad som syns på en bild. Skärmläsare läser upp den för blinda och synskadade besökare, och den visas om bilden inte laddar. Sökmotorer använder den för att förstå bilden.

En bra alt-text beskriver vad bilden säger i just detta sammanhang:

• Dåligt: IMG_4032.jpg eller foto.
• Dåligt: cykelaffär cykel elcykel köpa billig cykel (att stapla nyckelord hjälper ingen).
• Bra: Mekaniker justerar bromsarna på en blå elcykel i verkstaden.

Är en bild ren dekoration (en linje, ett bakgrundsmönster), lämna då alt-texten tom. Då hoppar en skärmläsare över den. Tomt är något annat än saknas: en bild utan alt får en skärmläsare ofta att läsa upp filnamnet istället. En bild som är en länk (till exempel en logotyp som leder till startsidan) beskriver vart länken leder: Till startsidan för Cykelaffären De Spaak.

I mediebiblioteket anger du alt-texten vid bilden själv, och i blockredigeraren vid bildblocket. Observera: en alt-text som du fyller i i mediebiblioteket ändras inte automatiskt för bilder som redan finns på sidor.

Filnamn och upphovsrätt

• Filnamn: e-bike-remmen-afstellen.jpg säger mer än IMG_4032.jpg och ingår i bildens adress. Små bokstäver, bindestreck, inga mellanslag.
• Upphovsrätt: en bild från Google-bilder är inte fri att använda. Fotografer och bildbyråer skickar regelbundet fakturor för användning utan licens. Använd egna foton, foton med en tydlig licens eller en bildbyrå vars villkor du känner till, och spara beviset på din licens.

Lagring och städning

Mediebiblioteket städar inte sig självt. En bild som du tar bort från en sida finns kvar i biblioteket och i uploads, med alla sina format. På en webbplats med flera års innehåll växer det. Städa då och då, men försiktigt: en bild kan användas på ett ställe som biblioteket inte ser (i en temainställning, en widget eller ett mejl). Ta en säkerhetskopia först.

Sammanfattning

• WordPress skapar flera format av varje uppladdning och förminskar stora foton till 2 560 pixlar; webbläsaren väljer via srcset det passande formatet.
• Förminska och komprimera foton i förväg och ta bort platsdata.
• Använd JPEG eller WebP för foton, PNG för logotyper och skärmbilder; SVG endast med ett tillägg som rensar.
• Lazy loading sker automatiskt, utom för den första stora bilden; bredd och höjd förhindrar att innehåll hoppar.
• En alt-text beskriver vad bilden säger i sammanhanget; ren dekoration får en tom alt-text.

Quiz

Uppgift

Uppgift A4.4: Bilder på din startsida. Ange adressen till din webbplats. Programmet läser startsidan och tittar på de första 20 bilderna: har de ett alt-attribut (tomt är okej, saknas är inte okej), har de bredd och höjd, och hur stor är varje fil (via en HEAD-förfrågan)? Bilder över 300 kB flaggas. Åtgärda det som är rött i ditt mediebibliotek eller på sidan, och kontrollera igen.

Läs mer

Dessa artiklar beskriver stegen i panelerna hos WebOké; i andra paneler fungerar det på liknande sätt.

• DirectAdmin-guide 18.5: Uppladdning för stor (fel 413) eller timeout
• Det går inte att ladda upp: öka upload_max_filesize och max_execution_time
• Mediebibliotek (wordpress.org, engelska): https://wordpress.org/documentation/article/media-library-screen/
• Skriva alt-texter (W3C, engelska): https://www.w3.org/WAI/tutorials/images/decision-tree/