Framtidens bilder använder <picture>

Responsiv design börjar bli ett allt mer känt uttryck för internetanvändare men framförallt för branschmänniskor inom webb runt om i världen. Trots internets snabba utveckling och hur enkelt webben idag kan anpassa sig till olika skärmupplösningar så är ett av de viktigaste informationselementen på webben fortfarande väldigt statiska – bilder.

På smashingmagazine.com presenterades nyligen en artikel om just bilder i responsiv design och på vad som snart kan vara en lösning på bildens statiska presentation på dagens responsiva webbplatser. När allt fler högupplösta skärmar kom ut på marknaden samtidigt som responsiv design blev allt mer vanligt så skapades bilder med högre upplösning för de högupplösta skärmarna på bekostnad av det nya fenomenet responsiv design. Detta skapade en sämre och långsammare upplevelse på en mobil enhet med begränsad uppkoppling, eftersom bilder fortfarande bara presenteras i ett utförande och genom ett src-attribut där filstorleken blir onödigt stor på små skärmar. Inom en snar framtid kan vi nog däremot räkna med att detta hanteras bättre genom HTML-elementet <picture>.

Det som elementet <picture> har som inte en vanligt <img>-element har är ett srcset-attribut vilket gör det möjligt att läsa in olika bildfiler för olika typer av skärmar och upplösningar, dessutom är det möjligt att ha en fallback till en vanlig bildkälla för webbläsare som ännu inte har stöd för <picture>-elementet. Faktum är att srcset-attributet är ett tillägg för det gamla <img>-elementet vilket även gör det möjligt att använda flera bildkällor på ett <img>-element.

Hela artikeln hittar du på smashingmagazine.com.

Fler intressanta artiklar

Hulténs väljer Motillo som ny e-handelspartner
Hulténs väljer Motillo som ny e-handelspartner
Hulténs, som har mer än 40 år i branschen, erbjuder trädgårdsmöbler, grillar och inredning för ett njutningsfullt liv. De väljer nu Motillo som ny partner för sin Litium-lösning.
Läs mer
Välkommen på e-handelsfrukost - Värmland EditionNyhet
Välkommen på e-handelsfrukost - Värmland Edition
I Värmland är vi duktiga på mycket, inte minst på e-handel! Förutom att utveckla e-handel har Motillo även ett Growth Team som fokuserar på att skapa lönsam tillväxt för våra kunder.
Läs mer
Code and Cheers - precis vad det låter som 🤖🍻Nyhet
Code and Cheers - precis vad det låter som 🤖🍻
Vi tänkte att det vore kul att gå på en AW med andra utvecklare och prestigelöst snacka kod, Chat GPT-prompts eller helt enkelt bara hänga och ha trevligt. Sagt och gjort - Code and Cheers uppfanns! 💡
Läs mer