En begyndervejledning til responsive billeder i HTML

Et responsivt billede er et billede, der tilpasser sig forskellige enhedskarakteristika. Når det gøres rigtigt, kan responsive billeder forbedre ydeevnen og brugeroplevelsen på et websted.

Denne artikel undersøger, hvordan du kan oprette responsive billeder i HTML ved hjælp af srcset og billedelementet.

Hvorfor skal du bruge responsive billeder?

Da softwareingeniørerne lavede nettet, overvejede de ikke, hvordan browsere ville håndtere responsive billeder. Når alt kommer til alt, fik brugerne kun adgang til internettet fra stationære eller bærbare computere. Det er selvfølgelig ikke rigtigt i dag.

Ifølge Statista, går over 90 procent af den globale internetbefolkning online ved hjælp af deres mobiltelefon. De fleste af websiderne på internettet indeholder billeder, og disse billeder er en af ​​de målinger, der bruges til at måle nettets ydeevne. For at forbedre ydeevnen skal du optimere dine billeder ved at gøre dem responsive.

Sådan opretter du responsive billeder i HTML

Du kan nærme dig responsive billeder fra to vinkler – enten ved at vise det samme billede med forskellige størrelser eller ved at vise forskellige billeder i henhold til displayets karakteristika. Du kunne bruge eller. Disse to muligheder håndterer responsive billeder forskelligt, men de viser alle ét billede fra givne alternativer afhængigt af de fastsatte regler.

Relaterede: Sådan gør du din hjemmeside responsiv og interaktiv med CSS og JavaScript

Bruger srcset

Standarden HTML giver dig kun mulighed for at angive én billedfil. Hvis du vil vise et andet billede afhængigt af enhedens størrelse, skal du bruge srcset.

Syntaks:

srcset giver dig mulighed for at levere yderligere kildefiler, og browseren vælger det billede, der virker optimalt til den pågældende billedstørrelse.

 src="sød-kat.jpg"
 alt="En sød kat">

srcset er lavet af tre dele: Billedets filnavn, som angiver stien til kildebilledet, et mellemrum og billedets iboende eller reelle bredde.

Brug af srcset With størrelser

Problemet med at bruge srcset er, at du ikke har kontrol over, hvilket billede browseren vælger at vise. Kombinerer srcset med størrelser løser dette problem. størrelser definere et sæt mediebetingelser, der antyder billedet med den optimale størrelse.

Du kan nu omskrive tag ovenfor som følger.

størrelser="(max-bredde: 600px) 480px,
 800px"
 src="sød-kat.jpg"
 alt="En sød kat">

størrelser består af en mediebetingelse, i dette eksempel er det (max-width: 600px), som repræsenterer viewporten bredde, mellemrum og spaltebredden (480px), der angiver det rum, billedet vil fylde, hvis medietilstanden er rigtigt.

Relaterede: Sådan bruger du medieforespørgsler i HTML og CSS til at skabe responsive websteder

Her vil browseren først tjekke enhedens bredde og sammenligne den med medietilstanden. Hvis betingelsen er sand, vil den kontrollere spaltebredden og indlæse et billede fra srcset med samme bredde eller den næste større.

Bemærk, at du også medtager src som giver billedet til at falde tilbage på browsere, der ikke understøtter srcset og størrelser.

srcset giver dig også mulighed for at vise billeder i forskellige opløsninger ved hjælp af x-deskriptorer.

 src="cute-cat-low.jpg"
 alt="En sød kat">

I dette eksempel, hvis enheden har en opløsning på to enhedspixel pr. CSS eller mere, indlæser browseren cute-cat-high1.jpg-billedet.

Hardware- og softwarepixels

Problemet med denne løsning er, at billederne kun reagerer med hensyn til enhedens pixeltæthed. Dette er forholdet mellem hardwarepixels og software- eller CSS-pixels. En hardwarepixel er det faktiske lyspunkt på skærmen, mens softwarepixlen eller CSS-pixlen er en måleenhed. Pixeltætheden bestemmer enhedens opløsning.

Når du gengiver responsive billeder, skal du ikke kun overveje opløsningen; skærmstørrelsen er også vigtig. Ellers kan du ende med unødigt at indlæse store billeder eller billeder, der er for pixilerede.

 src="cute-cat-low.jpg"
 alt="En sød kat">

Ved brug af

er et HTML-element, der omslutter flere elementer, der indeholder forskellige kildefiler og en element. Mens gør billeder responsive ved at vise forskellige størrelser af det samme billede, giver dig mulighed for faktisk at ændre det viste billede.

Syntaks:

Overvej en situation, hvor du har et stort landskabsbillede. Billedet vises og ser proportionalt ud på en desktop, men det krymper betydeligt på mobilen, så elementerne på billedet bliver bittesmå. Det ikke-responsive billede bidrager til en dårlig brugeroplevelse. Med du kan bede din browser om at skifte til et nærbillede, når du er på mobilen.

Ligesom i den første tilgang, indeholder en medieattribut, som du kan bruge til at angive mediebetingelsen. For eksempel vil browseren vise "cute-cat-480w.jpg", hvis visningsportens bredde er 639px eller mindre. Det srcset indeholder den billedfilsti, du vil vise, og src angiver standardbilledet.

Relaterede: 7 nye CSS-funktioner til at lave et responsivt websted

Fallback til WebP-billedformat

En anden ting det håndterer godt, giver et alternativ til moderne billedformater som WebP. WebP-billeder har høj ydeevne, er små og tilbyder en hurtig weboplevelse. Du kan derfor beslutte dig for at bruge dem på dine sider. En udfordring, du måske oplever, er, at ikke alle browsere understøtter WebP-billeder. Med, oplever du ikke dette problem, da din browser kan indlæse et alternativt billede, hvis den ikke understøtter WebP.

Hvorfor oprette responsive billeder i HTML og ikke i CSS?

CSS tilbyder robuste muligheder for håndtering af responsive billeder. Så hvorfor ikke bruge det? Browseren forudindlæser billeder, før den analyserer CSS. Så før dit websteds JavaScript registrerer viewport-bredden for at foretage de passende ændringer af billederne, er de originale billeder allerede blevet forudindlæst. På grund af dette er det bedre at håndtere responsive billeder ved hjælp af HTML.

Sigt efter den bedst mulige billedkvalitet

Du har set, hvordan du kan skabe responsive billeder i HTML vha > og i denne artikel. Visning af responsive billeder involverer normalt at overveje billedstørrelsen og billedopløsningen, som de relaterer til skærmstørrelsen. Hvis det gøres forkert, kan billedkvaliteten lide. Sørg for at vælge et billede, der giver optimal brugervenlighed med de færreste ressourcer.

Principper for responsivt webdesign

Webdesignere har kæmpet for responsivt design i årevis nu, men hvad er det, og hvordan kan det producere overlegne websider?

Læs Næste

Om forfatteren