En nybörjarguide till responsiva bilder i HTML

En responsiv bild är en bild som anpassar sig till olika enhetsegenskaper. När de görs rätt kan responsiva bilder förbättra prestandan och användarupplevelsen på en webbplats.

Den här artikeln utforskar hur du kan skapa responsiva bilder i HTML med hjälp av srcset och bildelementet.

Varför ska du använda responsiva bilder?

När mjukvaruingenjörerna skapade webben tänkte de inte på hur webbläsare skulle hantera responsiva bilder. När allt kommer omkring hade användare bara tillgång till webben från stationära eller bärbara datorer. Det är förstås inte sant idag.

Enligt Statista, över 90 procent av den globala internetbefolkningen går online med sin mobiltelefon. De flesta webbsidorna på internet innehåller bilder och dessa bilder är ett av de mått som används för att mäta webbprestanda. För att förbättra prestandan måste du optimera dina bilder genom att göra dem responsiva.

Hur man skapar responsiva bilder i HTML

Du kan närma dig responsiva bilder från två vinklar – antingen genom att visa samma bild med olika storlekar eller visa olika bilder enligt visningsegenskaperna. Du kan använda eller. Dessa två alternativ hanterar responsiva bilder på olika sätt, men de visar alla en bild från givna alternativ beroende på reglerna.

Relaterad: Hur du gör din webbplats responsiv och interaktiv med CSS och JavaScript

Använder srcset

Standarden HTML låter dig bara ange en bildfil. Om du vill visa en annan bild beroende på enhetens storlek bör du använda srcset.

Syntax:

srcset låter dig tillhandahålla ytterligare källfiler, och webbläsaren kommer att välja den bild som verkar optimal för den bildstorleken.

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

srcset består av tre delar: Bildens filnamn som anger sökvägen till källbilden, ett mellanslag och bildens inneboende eller verkliga bredd.

Använder srcset With storlekar

Problemet med att använda srcset är att du inte har någon kontroll över vilken bild webbläsaren väljer att visa. Kombinerande srcset med storlekar löser detta problem. storlekar definiera en uppsättning medievillkor som antyder att bilden har den optimala storleken.

Du kan nu skriva om tagga ovan enligt följande.

storlekar="(maxbredd: 600px) 480px,
 800px"
 src="söt-katt.jpg"
 alt="En söt katt">

storlekar består av ett mediavillkor, i det här exemplet är det (maxbredd: 600px) som representerar visningsporten bredd, utrymme och fackbredden (480px) som anger utrymmet som bilden kommer att fylla om medievillkoret är Sann.

Relaterad: Hur man använder mediafrågor i HTML och CSS för att skapa responsiva webbplatser

Här kommer webbläsaren först att kontrollera enhetens bredd och jämföra den med mediatillståndet. Om villkoret är sant kommer den att kontrollera luckans bredd och ladda en bild från srcset med samma bredd eller nästa större.

Observera att du också inkluderar src som ger bilden att falla tillbaka på webbläsare som inte stöder srcset och storlekar.

srcset låter dig också visa bilder med olika upplösningar med hjälp av x-deskriptorer.

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

I det här exemplet, om enheten har en upplösning på två enhetspixlar per CSS eller mer, kommer webbläsaren att ladda cute-cat-high1.jpg-bilden.

Hårdvaru- och mjukvarupixlar

Problemet med denna lösning är att bilderna bara är lyhörda när det gäller enhetens pixeltäthet. Detta är förhållandet mellan hårdvarupixlarna och programvaran eller CSS-pixlarna. En hårdvarupixel är den faktiska ljuspunkten på skärmen medan mjukvarupixeln eller CSS-pixeln är en måttenhet. Pixeltätheten bestämmer enhetens upplösning.

Tänk inte bara på upplösningen när du renderar responsiva bilder. skärmstorleken är också viktig. Annars kan det sluta med att du laddar in stora bilder eller bilder som är för pixlade i onödan.

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

Använder sig av

är ett HTML-element som omsluter flera element som innehåller olika källfiler och en element. Medan gör bilder responsiva genom att visa olika storlekar av samma bild, låter dig faktiskt ändra bilden som visas.

Syntax:

Tänk på en situation där du har en stor landskapsbild. Bilden visas och ser proportionell ut på en dator, men den krymper avsevärt på mobilen så att element på bilden blir små. Den icke-responsiva bilden bidrar till en dålig användarupplevelse. Med du kan säga till din webbläsare att byta till en närbild porträttbild när du är på mobilen.

Som i det första tillvägagångssättet, innehåller ett mediaattribut som du kan använda för att tillhandahålla mediavillkoret. Till exempel kommer webbläsaren att visa "cute-cat-480w.jpg" om visningsportens bredd är 639px eller mindre. De srcset innehåller sökvägen till bildfilen du vill visa och src anger standardbilden.

Relaterad: 7 nya CSS-funktioner för att skapa en responsiv webbplats

Reserv för WebP-bildformat

En annan sak det hanterar bra ger en reserv för moderna bildformat som WebP. WebP-bilder har hög prestanda, är små och erbjuder en snabb webbupplevelse. Du kan därför välja att använda dem på dina webbplatser. En utmaning du kan uppleva är att inte alla webbläsare stöder WebP-bilder. Med, du upplever inte det här problemet eftersom din webbläsare kan ladda en alternativ bild om den inte stöder WebP.

Varför skapa responsiva bilder i HTML och inte i CSS?

CSS erbjuder robusta alternativ för att hantera responsiva bilder. Så varför inte använda det? Webbläsaren förladdar bilder innan den analyserar CSS. Så innan din webbplats JavaScript upptäcker visningsportens bredd för att göra lämpliga ändringar av bilderna, har de ursprungliga bilderna redan laddats in. På grund av detta är det bättre att hantera responsiva bilder med HTML.

Sikta efter bästa möjliga bildkvalitet

Du har sett hur du kan skapa responsiva bilder i HTML med hjälp av > och i den här artikeln. Att visa responsiva bilder innebär vanligtvis att man överväger bildstorleken och bildupplösningen som relaterar till skärmstorleken. Om det görs fel kan bildkvaliteten bli lidande. Se till att välja en bild som ger optimal användbarhet med minsta möjliga resurser.

Principer för responsiv webbdesign

Webbdesigners har kämpat för responsiv design i flera år nu, men vad är det och hur kan det producera överlägsna webbsidor?

Läs Nästa

Om författaren