Bakgrundsbilder

Låt oss prata om bilder på webbsidan.

Bild för logo (och favicon)

Till min webbplats ville jag ha en ny logo. Jag valde att leta reda på en bild på en webbplats som har en stor fri samling av SVG-bilder. Jag tycker de är lätta att redigera i ett verktyg likt Inkscape (fritt verktyg som finns på flera plattformar).

Jag hittade en fisk som jag bytte färg på till blå.

Image description — Bild: Min blåa fisk som jag bygger mitt färgtema kring.

Det fick bli min logo och min favicon.

Sagt om SVG-formatet.

SVG-bilder (Scalable Vector Graphics) är ett XML-baserat vektorfilformat som används för att rendera tvådimensionell grafik direkt i webbläsaren. Till skillnad från pixelbaserade format som JPEG eller PNG förlitar sig SVG på matematiska formler för att beskriva former, linjer och färger, vilket gör dem upplösningsoberoende och perfekta för responsiv webbdesign. Med SVG behåller bilder sin skärpa och kvalitet oavsett skärmstorlek eller zoomnivå, de har ofta mindre filstorlek för enkel grafik, de kan stylas och animeras med CSS och JavaScript, och de kan indexeras av sökmotorer vilket gynnar tillgänglighet och SEO.

Allmänt om bilder

När man jobbar med bilder mot en webbplats så är det bra att alltid spara bilderna i den upplösning som är relevant för webbsidan. Använd inte för stora bilder då det slöar ned nedladdningen och presentationen av webbsidan.

Ett fritt verktyg som kan användas för bildbehandling är Gimp som är en fri variant av Photoshop.

De vanliga formaten för bilder i webbplatsen är PNG och JPEG, eller det nyare formatet WebP tillsammans med SVG.

Sagt om bildformaten.

JPEG är idealiskt för fotografier och komplexa bilder med många färger, då det erbjuder bra komprimering, men på bekostnad av förlust av kvalitet. PNG används oftast för bilder som kräver genomskinlighet eller skarpare detaljer, som logotyper och grafik, och är ett förlustfritt format. GIF stöder enkla animationer och har begränsat färgomfång, vilket gör det lämpat för enkla rörliga bilder. SVG är ett vektorformat som används för ikoner, logotyper och illustrationer som behöver skalas utan förlust av kvalitet, oavsett skärmstorlek. WebP, utvecklat av Google, erbjuder generellt bättre komprimering och kvalitet jämfört med JPEG och PNG, men har inte fullt stöd i alla äldre webbläsare.

När man väljer bildformat så är det en avvägning mellan bildkvalitet, filstorlek och webbplatsens prestanda. Men ibland har man bilden i ett visst format och då kan det vara enklast att använda det formatet.

Bygger man större webbplatser med många bilder så behöver man en taktik för vilka bildstorlekar man skall använda och vilka bildformat man föredrar och man kan också behöva optimera de bilder man har. Detta kan man delvis göra med verktyg via terminalen. Ofta är det bäst att processa bilderna innan de placeras i webbplatsen, till skillnad från att processa bilderna med hjälp av CSS (även om det är en möjlighet).

Bakgrundsbild

Som ett första tillskott till vår webbplats så lägger vi till en bakgrundsbild.

Lägg till följande till din webbsida, inuti din wrapper för sidans huvudsakliga innehåll.

<div class="wrapper">
  <h1>Här skall vi nu fylla på med innehåll!</p>

  <section class="row cols1 color1">
    <div class="col background">
    </div>
  </section>
</div>

Den koden som visas ovan är alltså det som skall finnas i din HTML-sida, under din header och över din footer.

Nu ser du att det finns en massa klasser på rad och kolumn som ger oss en style. Tanken är att du kan börja med en grundstyle för kolumner och rader som ser ut så här.

.row {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}

.row.color1 {
  background-color: blue;
}

.row.cols1 .col {
  flex: 1 1 100%;
}

.row.cols2 .col {
  flex: 1 1 50%;
}

.row.cols3 .col {
  flex: 1 1 33.333%;
}

.col {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 10rem;
}

Studera CSS-koden så kan du se att vi tänker jobba med rader som bas-layout och inuti en rad finns det 1, 2 eller 3 kolumner som kan ha innehåll. Varje rad kan ha en bakgrundsfärg så kan vi skifta mllan ljusa och mörka bakgrundsfärger när vi bygger upp sidan.

I detta fallet handlar det om att lägga till en bakgrundsbild. Den kan vi placera rakt in i kolumnen. Vi behöver ingen extra div för den.

Här är CSS som placerar en bakgrundsbild i kolumnen.

.background {
  min-height: 20rem;
  background-image: url('../img/risbrodammen-oversikt.png');
  background-size: cover;
  background-position: center;
}

Här är en förklaring i text om vad CSS-konstruktionen gör.

CSS-klassen .background används för att skapa en sektion med en bakgrundsbild som täcker hela ytan. Regeln min-height: 20rem; ser till att sektionen alltid är minst 20 rem hög, även om det inte finns något innehåll i den. Med background-image sätts själva bilden, här hämtad från sökvägen ../img/risbrodammen-oversikt.png (relativt där stylesheeten finns). Egenskapen background-size: cover; gör att bilden skalas upp eller ner för att alltid täcka hela ytan, utan att ändra proportionerna. Slutligen ser background-position: center; till att bilden centreras så att den alltid visas snyggt i mitten, även om delar beskärs för att fylla ytan.

Så här blev det för mig.

Nu är det din tur att leta reda på en bild som passar din webbplats så att du kan lägga in den på liknande sätt.