Webbteknik 1

Laboration 8B-1 - Olika bilder baserat på enhetens upplösning och storlek

Vi börjar med att se hur vi kan specificera olika bildfiler, beroende på vilken pixeltäthet det finns på den enhet som användaren har.

Förberedelser

• Öppna mappen L8b i Visual Studio Code (VSC).
• Öppna filerna lab8b-1.html och style.css i VSC och öppna sidan i Live Server.
  • Du kommer endast göra ändringar i HTML-filen, men studera både HTML- och CSS-koden, så du förstår alla delar.
• I mappen img finns filerna cows300.jpg, cows600.jpg och cows900.jpg, som är samma bild i tre olika upplösningar.

Olika pixeltäthet

• I den första img-taggen (den inom det första section-elementet) lägger du till följande attribut

  srcset = "img/cows300.jpg 1x, img/cows600.jpg 2x,img/cows900.jpg 3x"

  • Dela gärna upp det på varsin rad, dvs radbrytning efter kommatecknen, för att öka läsbarheten och stilen på koden.

• Ta fram Följsamt designläge i Firefox. Prova att ändra pixelförhållande mellan DPR: 1, DPR: 2 och DPR: 3 i menyn högst upp, för att se att olika bilder används.

  • DPR = Device Pixel Ratio
  • Bildens bredd står inskriven i varje bild, så du ser direkt vilken fil som visas.
  • Webbläsaren byter inte alltid tillbaka till en mindre bild, om den redan hämtat en större. Ladda om sidan efter att du ändrat inställningen.

Olika bredd på enhetens skärm (fönster) och användning av bilden

• I den andra img-taggen (den inom det andra section-elementet) lägger du till följande attribut

  srcset = "img/cows300.jpg 300w, img/cows600.jpg 600w, img/cows900.jpg 900w"

  • Detta talar om för webbläsaren vilken bredd (width) bilderna har.

• Ta fram Följsamt designläge i Firefox. Prova att ändra sidans bredd. Notera att olika bilder används. Vid en bredd över 700px används bilden cows900.jpg, vilket är onödigt i den layout som sidan då har. Sidans innehåll är max 1000px och bilden fyller endast halva denna bredd.

  • Se till att DPR: 1 nu är valt i Följsamt designläge.
  • Ladda om sidan, om bilden inte byts ut när du gör fönstret smalare.

• I img-taggen lägger du till följande attribut

  sizes = "(max-width: 700px) 100vw, (max-width: 1000px) 50vw, 500px"

  • Den första gränsen på 700px är densamma som används i media queryn i CSS-koden, som ändrar layouten till en kolumn. För ett fönster som är mindre än 700px ska bilden fylla hela bredden (100vw).
  • Den andra gränsen på 1000px är den som satts med max-width för body i CSS-koden. För ett fönster mellan 700px och 1000px är det en layout med två kolumner, där bilden upptar halva bredden och därmed halva fönstrets bredd (50vw).
  • För fönster som är bredare än 1000px läggs det till marginaler enligt stilinställningen för margin i regeln för body. Bilden blir då inte bredare, utan kommer vara halva bredden, dvs 500px.

• Ta fram Följsamt designläge i Firefox. Prova att ändra fönstrets bredd. Nu används ingen större bild än vad som behövs.

Laboration 8B-2 — Olika bilder baserat på layout

I denna del ska vi studera picture-elementet, som används för att välja olika bildfiler för olika situationer.

Förberedelser

• Öppna mappen L8b i Visual Studio Code (VSC), om du inte redan har den öppen.
• Öppna filerna lab8b-2.html och style.css i VSC och öppna sidan i Live Server.
  • Du kommer endast göra ändringar i HTML-filen, men studera både HTML- och CSS-koden, så du förstår alla delar.
• I mappen img finns filerna cows-small.jpg, cows-narrow.jpg och cows-wide.jpg, som är bilden på korna fast beskuren på olika sätt och i olika storlek.

Val av olika bilder

• Lägg in start- och sluttagg för ett picture-element före och efter img-taggen.
• Ovanför img-taggen lägger du till ett source-element med attributen media="(max-width: 600px)" och srcset="img/cows-wide.jpg".
• Ta fram Följsamt designläge i Firefox och prova att ändra fönstrets bredd, för att se att bilden byts ut i de båda layouterna.
• Lägg till ytterligare ett source-element ovanför det förra med attributen media="(max-width: 400px)" srcset="img/cows-small.jpg".
  • Det är viktigt att source-elementen (dvs deras media queries) kommer i denna ordning och att img-taggen ligger sist, för att valet av bild ska bli rätt.
• Ta fram Följsamt designläge i Firefox och prova att ändra fönstrets bredd. Det ska nu ske en växling mellan tre bilder vid de gränser du angett i media-attributen.