Een beginnershandleiding voor responsieve afbeeldingen in HTML

Een responsieve afbeelding is een afbeelding die zich aanpast aan verschillende apparaatkenmerken. Als het goed wordt gedaan, kunnen responsieve afbeeldingen de prestaties en gebruikerservaring van een site verbeteren.

Dit artikel onderzoekt hoe u responsieve afbeeldingen in HTML kunt maken met behulp van srcset en het afbeeldingselement.

Waarom zou u responsieve afbeeldingen gebruiken?

Toen de software-engineers het web aan het maken waren, dachten ze niet na over hoe browsers met responsieve afbeeldingen zouden omgaan. Gebruikers hadden immers alleen toegang tot internet vanaf desktops of laptops. Dat is vandaag de dag natuurlijk niet waar.

Volgens statistiek, gaat meer dan 90 procent van de wereldwijde internetbevolking online met hun mobiele telefoon. De meeste webpagina's op internet bevatten afbeeldingen en deze afbeeldingen zijn een van de statistieken die worden gebruikt om de webprestaties te meten. Om de prestaties te verbeteren, moet u uw afbeeldingen optimaliseren door ze responsief te maken.

Responsieve afbeeldingen maken in HTML

U kunt responsieve afbeeldingen vanuit twee hoeken benaderen: door dezelfde afbeelding met verschillende formaten weer te geven of door verschillende afbeeldingen weer te geven op basis van de weergavekenmerken. Je zou kunnen gebruiken of. Deze twee opties gaan anders om met responsieve afbeeldingen, maar ze geven allemaal één afbeelding weer van bepaalde alternatieven, afhankelijk van de ingestelde regels.

Verwant: Hoe u uw website responsief en interactief kunt maken met CSS en JavaScript

srcset gebruiken

De standaard Met HTML kunt u slechts één afbeeldingsbestand specificeren. Als je een andere afbeelding wilt weergeven, afhankelijk van de grootte van het apparaat, gebruik dan srcset.

Syntaxis:

srcset stelt u in staat om extra bronbestanden te verstrekken, en de browser zal de afbeelding kiezen die optimaal lijkt voor die afbeeldingsgrootte.

 src="schattige kat.jpg"
 alt="Een schattige kat">

srcset bestaat uit drie delen: De bestandsnaam van de afbeelding die het pad naar de bronafbeelding specificeert, een spatie en de intrinsieke of werkelijke breedte van de afbeelding.

Srcset gebruiken Met maten

Het probleem met het gebruik van srcset is dat je geen controle hebt over welke afbeelding de browser zal kiezen om weer te geven. Combineren srcset met maten lost dit probleem op. maten definieer een set mediacondities die verwijzen naar de afbeelding met de optimale grootte.

U kunt nu de. herschrijven tag hierboven als volgt.

maten = "(max-breedte: 600px) 480px,
 800px"
 src="schattige kat.jpg"
 alt="Een schattige kat">

maten bestaat uit een mediavoorwaarde, in dit voorbeeld is het (max-width: 600px) die de viewport vertegenwoordigt breedte, ruimte en de sleufbreedte (480px) die de ruimte specificeert die de afbeelding zal vullen als de mediaconditie is waar.

Verwant: Mediaquery's in HTML en CSS gebruiken om responsieve websites te maken

Hier controleert de browser eerst de apparaatbreedte en vergelijkt deze met de mediaconditie. Als de voorwaarde waar is, zal het de sleufbreedte controleren en een afbeelding laden van srcset met dezelfde breedte of de volgende grotere.

Houd er rekening mee dat u ook src die het beeld biedt om terug te vallen op browsers die dit niet ondersteunen srcset en maten.

srcset stelt u ook in staat om afbeeldingen met verschillende resoluties weer te geven met behulp van x-descriptors.

 src="schattige-kat-laag.jpg"
 alt="Een schattige kat">

Als het apparaat in dit voorbeeld een resolutie heeft van twee apparaatpixels per CSS of meer, laadt de browser de afbeelding cute-cat-high1.jpg.

Hardware- en softwarepixels

Het probleem met deze oplossing is dat de afbeeldingen alleen reageren in termen van de pixeldichtheid van het apparaat. Dit is de verhouding van de hardwarepixels tot de software- of CSS-pixels. Een hardwarepixel is de werkelijke lichtpunt op het scherm, terwijl de softwarepixel of CSS-pixel een maateenheid is. De pixeldichtheid bepaalt de resolutie van het apparaat.

Houd bij het renderen van responsieve afbeeldingen niet alleen rekening met de resolutie; de weergavegrootte is ook belangrijk. Anders kan het zijn dat u onnodig grote afbeeldingen of afbeeldingen met te veel pixels laadt.

 src="schattige-kat-laag.jpg"
 alt="Een schattige kat">

Gebruik makend van

is een HTML-element dat meerdere omhult elementen die verschillende bronbestanden bevatten en een element. Terwijl maakt afbeeldingen responsief door verschillende formaten van dezelfde afbeelding weer te geven, stelt u in staat om de weergegeven afbeelding daadwerkelijk te wijzigen.

Syntaxis:

Overweeg een situatie waarin u een groot landschapsbeeld hebt. De afbeelding wordt weergegeven en ziet er proportioneel uit op een desktop, maar krimpt aanzienlijk op mobiel, zodat elementen op de afbeelding klein worden. Het niet-reagerende beeld draagt ​​bij aan een slechte gebruikerservaring. Met je kunt je browser vertellen om over te schakelen naar een close-up portretafbeelding wanneer je mobiel bent.

Net als bij de eerste benadering, bevat een mediakenmerk dat u kunt gebruiken om de mediavoorwaarde op te geven. De browser zal bijvoorbeeld de "cute-cat-480w.jpg" weergeven als de breedte van de viewport 639px of minder is. De srcset bevat het afbeeldingsbestandspad dat u wilt weergeven en src specificeert de standaardafbeelding.

Verwant: 7 nieuwe CSS-functies om een ​​responsieve website te maken

Fallback voor WebP-beeldformaat

Nog iets dat goed overweg kan, biedt een uitwijkmogelijkheid voor moderne afbeeldingsformaten zoals WebP. WebP-afbeeldingen presteren goed, zijn klein en bieden een snelle webervaring. U kunt er dus voor kiezen ze op uw sites te gebruiken. Een uitdaging die u zou kunnen ervaren, is dat niet alle browsers WebP-afbeeldingen ondersteunen. Met, ervaar je dit probleem niet omdat je browser een alternatieve afbeelding kan laden als deze WebP niet ondersteunt.

Waarom responsieve afbeeldingen maken in HTML en niet in CSS?

CSS biedt robuuste opties voor het verwerken van responsieve afbeeldingen. Dus waarom zou je het niet gebruiken? De browser laadt afbeeldingen vooraf voordat CSS wordt geparseerd. Dus voordat het JavaScript van uw site de breedte van de viewport detecteert om de juiste wijzigingen in de afbeeldingen aan te brengen, zijn de originele afbeeldingen al vooraf geladen. Daarom is het beter om responsieve afbeeldingen met HTML te verwerken.

Streef naar de best mogelijke beeldkwaliteit

Je hebt gezien hoe je responsieve afbeeldingen in HTML kunt maken met behulp van > en in dit artikel. Bij het weergeven van responsieve afbeeldingen moet meestal rekening worden gehouden met de afbeeldingsgrootte en de afbeeldingsresolutie in relatie tot de weergavegrootte. Als het verkeerd wordt gedaan, kan de beeldkwaliteit eronder lijden. Zorg ervoor dat u een afbeelding kiest die optimale bruikbaarheid biedt met zo min mogelijk middelen.

Responsieve webontwerpprincipes

Webdesigners pleiten al jaren voor responsive design, maar wat is het en hoe kan het superieure webpagina's produceren?

Lees volgende

Over de auteur