Filformat Och Bilder Flashcards
Filnamn ska bestå av?
- Endast små bokstäver
- Undvik mellanslag
- Beskrivande tydliga filnamn
- Relativt korta
- Bindestreck eller understreck ifall man vill separera ord
- Undvik å, ä och ö, eller andra specialtecken
- Namnge ALLTID förstasida som ”index”. Detta gör att serven automatiskt hittar din första sida när den öppnar ditt domännamn
JPEG
Används på bilder med många olika färger. Till fotografier är det bra att använda JPEG, även om bilden består av exempelvis ett vitt snölandskap, då bilden består av en massa olika färger med väldigt subtila skillnader
PNG
Används på bilder med områden som har exakt likadana färger, exempelvis illustrationer, loggor eller diagram
GIF
Kan endast innehålla 256 färger, så är mer lämplig i samma användning som PNG, men har möjlighet för skapande av enkla animationer.
WebP
Ett format med alternativ till JPEG, PNG och GIF, men med bättre komprimering och därmed mindre filstorlek.
Har inte garanterat stöd på alla webbläsare
AVIF
Det nyaste bildformatet, som också erbjuder ett alternativ till JPEG, PNG och GIF, men med ännu mindre filstorlekar än både dem och WebP.
Har inte garanterat stöd på alla webbläsare
WOFF2
Filformat som är bäst för teckensnitt. Det är modernt och har stöd i samtliga webbläsare
Vector Image
Vector graphics är en metod för att kommunicera en serie former, koordinater och vägar i kontexten av deras framställning; en uppsättning instruktioner hur de ska målas.
Om en vector bild skalas upp eller ner målas uppsättningen av linjerna och punkterna om till rätt skala.
De är därför oberoende av upplösning eller skala och är alltid skarpa.
Raster image
En uppsättning av pixel-för-pixel-instruktioner för framställandet av ett tvådimensionellt rutnätverk.
Exempel på raster-bilder:
- JPEG
- PNG
- GIF
- WebP
- AVIF
Raster-bilder är de vanligaste bildformaten på internet
Attributet ”loading”
Säger till webbläsaren ifall ett element ska laddas direkt (”eager”) eller tills dess att ett villkor är uppfyllt (”lazy”), exempelvis en bild som inte syns direkt på en sida förrän man skrollar ner till den
Attributet ”fetchpriority”
Olika delar av webbsidan har olika prioritet i när de ska laddas. Attributet ”fetchpriority” används för att bestämma prioritet, men säger inte till webbläsaren rakt av vad som ska laddas först eller sist, utan ger viktig kontext för webbläsarens val.
Cumulative Layout Shift (CLS)
Är ett verktyg för att mäta visuell stabilitet, att se hur mycket layouten för en sida skiftar när tillgångar laddar och sidan framställs.
Largest Contentful Paint (LCP)
Mäter tiden det tar att ladda de största och mest innehållsrika elementen som är synbara i användarens visningsport
