Välj rätt format
| Format | Passar för | Kommentar |
|---|---|---|
| WebP | Fotografier och grafik | Mindre filer än JPEG och PNG, stöds av alla moderna webbläsare |
| AVIF | Fotografier | Ofta ännu mindre filer, något längre tid att skapa |
| JPEG | Fotografier | Fungerar överallt, bra som reserv |
| PNG | Grafik med genomskinlighet, skärmbilder | Stora filer för fotografier |
| SVG | Logotyper, ikoner, enkla illustrationer | Skarp i alla storlekar och mycket liten |
WordPress har stöd för både WebP och AVIF, och många tillägg och webbhotell kan konvertera bilder automatiskt när de laddas upp.
Storlek och komprimering
Den vanligaste orsaken till långsamma sidor är bilder som är mycket större än de visas. En bild direkt från kameran kan vara flera megabyte, medan samma bild komprimerad i rätt storlek ofta blir en bråkdel av det, utan synlig skillnad.
- 1Bestäm hur bred bilden visas som störst, till exempel en helbredd toppbild eller en mindre bild i texten.
- 2Skala ner originalet till ungefär den bredden, med marginal för skärmar med hög upplösning.
- 3Spara i WebP eller AVIF och justera kvaliteten tills skillnaden inte syns.
- 4Ge filen ett beskrivande namn med små bokstäver och bindestreck.
- 5Ladda upp och låt webbplatsen skapa mindre versioner för mobiler.
- 6Kontrollera laddtiden i PageSpeed Insights.
Ange alltid bildens bredd och höjd i koden så att layouten inte hoppar medan sidan laddar, och låt bilder längre ner på sidan laddas först när besökaren närmar sig dem. Mer om detta i guiden om laddtid och Core Web Vitals.
Alternativtext som fungerar
Alternativtext är en kort beskrivning som läses upp av skärmläsare och visas om bilden inte laddas. Den hjälper också sökmotorer att förstå bilden. Alternativtext är en del av kraven i tillgänglighetslagen för de webbplatser som omfattas.
- Beskriv vad bilden visar och varför den finns där, kort och konkret.
- Skriv inte ”bild på”, det framgår redan.
- Undvik att fylla alternativtexten med sökord.
- Rent dekorativa bilder ska ha tom alternativtext så att skärmläsare hoppar över dem.
- Bilder med text, till exempel diagram, ska ha texten återgiven i alternativtexten eller i sidans text.
Rättigheter och licenser
Alla bilder skyddas av upphovsrätt, även de som är lätta att hitta på nätet. Du får bara använda en bild om du själv har tagit den, har köpt eller fått en licens, eller om fotografen uttryckligen har gett tillstånd. Att ange källan räcker inte.
- Läs licensvillkoren för bildbanker, de kan begränsa användning i reklam eller på flera webbplatser.
- Spara kvitton och licenser så att du kan visa rätten vid ett krav.
- Kontrollera villkoren för AI-genererade bilder i den tjänst du använder.
- Be byrån intyga att bilderna på webbplatsen är licensierade för ditt företag.
Personer på bild
En bild där en person går att känna igen är en personuppgift. Använder du bilder på medarbetare eller kunder i marknadsföring bör du ha ett skriftligt samtycke, och medarbetare som slutar kan be att bilden tas bort. Mer om personuppgifter finns hos IMY.
Riktiga bilder på personal, lokaler och utfört arbete bygger mer förtroende än allmänna bildbanksbilder. Det är ofta värt att anlita en fotograf för en halv dag. Planera vilka bilder som behövs innan fotograferingen, till exempel porträtt, arbetsmiljö och detaljer, och be om bilder i både liggande och stående format.
Bilder och sökmotorer
Bilder kan ge besök via bildsökningen och gör sidorna mer intressanta i vanliga sökresultat. Sökmotorerna förstår bilden genom filnamnet, alternativtexten, texten runt omkring och sidans ämne. En bild av utfört arbete med ett beskrivande filnamn och en saklig alternativtext säger mycket mer än en bildbanksbild med ett filnamn av siffror.
Snabbhet påverkar också. Tunga bilder ger sämre värden för laddtid, och den största bilden högst upp på sidan avgör ofta hur snabbt sidan upplevs. Låt den bilden laddas direkt, utan fördröjning, och låt de övriga vänta tills de behövs.
- Beskrivande filnamn, till exempel badrum-kakel-vaxholm.webp.
- Alternativtext som beskriver bilden sakligt.
- Bilden placerad nära den text den hör till.
- Bildtext under bilden när den tillför information.
Bilder i ett nytt projekt
Bestäm tidigt vem som tar fram bilderna och i vilka format och storlekar de behövs. Vi optimerar och lägger in bilder som en del av varje WordPress-webbplats och webbdesign. Är en befintlig webbplats långsam på grund av tunga bilder ingår bildoptimering i vår prestandaoptimering av WordPress, 6 900 kr exkl. moms.
Räkna fram ett riktpris för din webbplats i kalkylatorn eller begär offert.
