En nybegynnerveiledning til responsive bilder i HTML

Et responsivt bilde er et bilde som tilpasser seg ulike enhetsegenskaper. Når det gjøres riktig, kan responsive bilder forbedre ytelsen og brukeropplevelsen til et nettsted.

Denne artikkelen utforsker hvordan du kan lage responsive bilder i HTML ved å bruke srcset og bildeelementet.

Hvorfor bør du bruke responsive bilder?

Da programvareingeniørene laget nettet, vurderte de ikke hvordan nettlesere ville håndtere responsive bilder. Tross alt hadde brukere bare tilgang til nettet fra stasjonære eller bærbare datamaskiner. Det er selvfølgelig ikke sant i dag.

I følge Statista, går over 90 prosent av den globale internettbefolkningen online ved å bruke mobiltelefonen. De fleste nettsidene på internett inneholder bilder, og disse bildene er en av beregningene som brukes til å måle nettytelse. For å forbedre ytelsen må du optimalisere bildene dine ved å gjøre dem responsive.

Hvordan lage responsive bilder i HTML

Du kan nærme deg responsive bilder fra to vinkler – enten ved å vise det samme bildet med forskjellige størrelser eller vise forskjellige bilder i henhold til skjermegenskapene. Du kan bruke eller. Disse to alternativene håndterer responsive bilder forskjellig, men de viser alle ett bilde fra gitte alternativer avhengig av reglene.

I slekt: Hvordan gjøre nettstedet ditt responsivt og interaktivt med CSS og JavaScript

Bruker srcset

Standarden HTML lar deg bare spesifisere én bildefil. Hvis du vil vise et annet bilde avhengig av størrelsen på enheten, bør du bruke srcset.

Syntaks:

srcset lar deg oppgi ekstra kildefiler, og nettleseren vil velge bildet som virker optimalt for den bildestørrelsen.

 src="søt-katt.jpg"
 alt="En søt katt">

srcset består av tre deler: Bildefilnavnet som spesifiserer banen til kildebildet, et mellomrom og den iboende eller reelle bredden til bildet.

Bruke srcset With størrelser

Problemet med å bruke srcset er at du ikke har kontroll over hvilket bilde nettleseren velger å vise. Kombinere srcset med størrelser løser dette problemet. størrelser definere et sett med medieforhold som antyder bildet med optimal størrelse.

Du kan nå skrive om tagge ovenfor som følger.

størrelser="(maks-bredde: 600px) 480px,
 800px"
 src="søt-katt.jpg"
 alt="En søt katt">

størrelser består av en mediebetingelse, i dette eksemplet er det (maks-bredde: 600px) som representerer visningsporten bredde, plass og sporbredden (480px) som spesifiserer plassen bildet vil fylle hvis medietilstanden er ekte.

I slekt: Hvordan bruke mediesøk i HTML og CSS for å lage responsive nettsteder

Her vil nettleseren først sjekke enhetsbredden og sammenligne den med medietilstanden. Hvis betingelsen er sann, vil den sjekke sporbredden og laste et bilde fra srcset med samme bredde eller den neste større.

Merk at du også inkluderer src som gir bildet til å falle tilbake på nettlesere som ikke støtter srcset og størrelser.

srcset lar deg også vise bilder med forskjellige oppløsninger ved å bruke x-deskriptorer.

 src="cute-cat-low.jpg"
 alt="En søt katt">

I dette eksemplet, hvis enheten har en oppløsning på to enhetspiksler per CSS eller mer, vil nettleseren laste ned cute-cat-high1.jpg-bildet.

Maskinvare- og programvarepiksler

Problemet med denne løsningen er at bildene bare er responsive når det gjelder enhetens pikseltetthet. Dette er forholdet mellom maskinvarepiksler og programvare- eller CSS-piksler. En maskinvarepiksel er den faktiske lysprikken på skjermen, mens programvarepikselen eller CSS-pikselen er en måleenhet. Pikseltettheten bestemmer enhetens oppløsning.

Når du gjengir responsive bilder, må du ikke bare vurdere oppløsningen; skjermstørrelsen er også viktig. Ellers kan du ende opp med å laste inn store bilder eller bilder som er for pikserte unødvendig.

 src="cute-cat-low.jpg"
 alt="En søt katt">

Ved hjelp av

er et HTML-element som omslutter flere elementer som inneholder forskjellige kildefiler og en element. Samtidig som gjør bilder responsive ved å vise forskjellige størrelser av samme bilde, lar deg faktisk endre bildet som vises.

Syntaks:

Tenk på en situasjon der du har et stort landskapsbilde. Bildet vises og ser proporsjonalt ut på et skrivebord, men det krymper betydelig på mobil, slik at elementer på bildet blir bittesmå. Det ikke-responsive bildet bidrar til en dårlig brukeropplevelse. Med du kan fortelle nettleseren din om å bytte til et nærbilde portrettbilde når du er på mobil.

Som i den første tilnærmingen, inneholder et medieattributt som du kan bruke til å angi mediebetingelsen. For eksempel vil nettleseren vise "cute-cat-480w.jpg" hvis visningsportens bredde er 639px eller mindre. De srcset holder bildefilbanen du vil vise og src spesifiserer standardbildet.

I slekt: 7 nye CSS-funksjoner for å lage et responsivt nettsted

Tilbakeslag for WebP-bildeformat

En annen ting det håndterer godt gir en reserve for moderne bildeformater som WebP. WebP-bilder har høy ytelse, er små og gir en rask nettopplevelse. Du kan derfor velge å bruke dem på nettstedene dine. En utfordring du kan oppleve er at ikke alle nettlesere støtter WebP-bilder. Med, opplever du ikke dette problemet siden nettleseren din kan laste inn et alternativt bilde hvis den ikke støtter WebP.

Hvorfor lage responsive bilder i HTML og ikke i CSS?

CSS tilbyr robuste alternativer for håndtering av responsive bilder. Så hvorfor ikke bruke det? Nettleseren forhåndslaster bilder før den analyserer CSS. Så før nettstedets JavaScript oppdager viewport-bredden for å gjøre de nødvendige endringene i bildene, er de originale bildene allerede forhåndslastet. På grunn av dette er det bedre å håndtere responsive bilder ved hjelp av HTML.

Sikt etter best mulig bildekvalitet

Du har sett hvordan du kan lage responsive bilder i HTML ved hjelp av > og i denne artikkelen. Å vise responsive bilder innebærer vanligvis å vurdere bildestørrelsen og bildeoppløsningen i forhold til skjermstørrelsen. Hvis det gjøres feil, kan bildekvaliteten lide. Sørg for å velge et bilde som gir optimal brukervennlighet ved å bruke færrest ressurser.

Prinsipper for responsiv webdesign

Webdesignere har vært forkjemper for responsiv design i mange år nå, men hva er det og hvordan kan det produsere overlegne nettsider?

Les Neste

Om forfatteren