Bildoptimering betyder att få bilder att se bra ut samtidigt som filstorlek, dimensioner och leverans hålls rimliga.
På vanlig svenska
Det här hör till hemsidans teknik eller användarupplevelse. Du behöver inte kunna koda det. Det viktiga är att förstå vad som förändras för besökaren, redaktören eller den som sköter sidan: tydlighet, hastighet, tillgänglighet, stabilitet eller hur lätt hemsidan går att ändra senare.
Ett verkligt exempel
Ett foto på 6000 pixlar direkt från kameran kan väga flera megabyte trots att hemsidan bara visar det 1200 pixlar brett.
Det viktiga är inte om tekniken låter avancerad, utan om resultatet märks som en tydligare, snabbare, tryggare eller lättare hemsida.
Varför det spelar roll
Onödigt stora bilder kan göra sidor betydligt långsammare, särskilt på mobilnät.
Tekniska val blir till slut mänskliga konsekvenser. En inställning som låter obskyr kan avgöra om sidan laddar, om någon med skärmläsare kan använda den eller om en framtida redesign blir enkel eller plågsam. Det är på den nivån begreppet blir användbart.
När behöver du faktiskt bry dig?
Du behöver bry dig när hemsidan är långsam, svår att använda, jobbig att redigera, otillgänglig, instabil, dyr att underhålla eller börjar bli beroende av ett skört tekniskt val. Du behöver också bry dig före flyttar, redesigns och nya integrationer, eftersom små tekniska beslut kan bli stora begränsningar senare.
Bra frågor att ställa
- Vad märker en besökare eller redaktör om det här görs bra?
- Vem ansvarar för underhållet efter lansering?
- Vad händer om tekniken slutar fungera eller måste bytas ut?
Vad gör du med det här?
Fråga vad som förändras för besökaren, vem som ansvarar för underhållet och vad som händer om det slutar fungera. Om ingen kan svara på de tre frågorna är lösningen troligen mer komplicerad än den behöver vara.
Vad det inte betyder
Optimering betyder inte att komprimera varje bild tills den ser dålig ut.
Kortversionen
Använd rätt dimensioner, format och komprimering för uppgiften.
Relaterat: sidhastighet och alt-text.
Fördjupning: web.dev om bilder.