Een responsieve afbeelding is een afbeelding die zich aanpast aan de verschillende kenmerken van het apparaat waarop deze wordt weergegeven. Als het correct wordt gedaan, kunnen responsieve afbeeldingen de prestaties van de website verbeteren en uw gebruikerservaring differentiëren.
Dit artikel onderzoekt hoe u responsieve HTML-afbeeldingen kunt maken met behulp van srcset en element beeld. Verifiëren Code on the Go: beste HTML-bewerkingsapps voor Android.
Snelle links
Waarom zou je responsieve afbeeldingen gebruiken?
Toen een software-engineer webpagina's aan het maken was, dacht hij niet na over hoe browsers met responsieve afbeeldingen omgaan. Gebruikers hebben immers vaak alleen toegang tot internet vanaf desktop- of laptopcomputers. Dat is vandaag de dag natuurlijk niet het geval.
لـ Statista Meer dan 90 procent van 's werelds internetgebruikers surft op internet met hun mobiele telefoon. De meeste webpagina's 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 verbeteren door ze responsief te maken. Verifiëren Top populaire webontwikkelingstools die elke professional gebruikt.
Responsieve HTML-afbeeldingen maken
Responsief webdesign betekent niet alleen dat lay-outs kunnen veranderen op basis van de kenmerken van het apparaat dat wordt gebruikt, maar ook de inhoud. Op monitoren met een hoge resolutie (2x) zijn bijvoorbeeld ook afbeeldingen met een hoge resolutie vereist om de scherpte te waarborgen. Een afbeelding met een breedtewaarde van 50% werkt mogelijk alleen goed als de browser 800px breed is, maar het zal een grote impact hebben op een smalle telefoon, en het probleem van het verbruiken van hoge bandbreedte zal nog steeds bestaan wanneer de grootte wordt verkleind om klein te passen schermen.
Artikelkenmerken img uitermate belangrijk; Omdat het helpt bij het downloaden, decoderen en weergeven van inhoud, zijn moderne browsers compatibel met een aantal verschillende afbeeldingsindelingen. Het insluiten van afbeeldingen die op verschillende apparaten werken, is niet hetzelfde als voor desktops, en er zijn slechts een paar kleine wijzigingen nodig om een goede indruk te maken.
U kunt vanuit twee hoeken met responsieve afbeeldingen werken: u kunt dezelfde afbeelding in verschillende formaten presenteren of verschillende afbeeldingen presenteren op basis van de weergavekenmerken. je kunt gebruiken of . Deze twee opties gaan anders om met responsieve afbeeldingen, maar ze geven allemaal één afbeelding weer van bepaalde alternatieven, afhankelijk van de set regels.
gebruik srcset
Met de functie kunt u: Standaard HTML door slechts één afbeeldingsbestand op te geven. Als u een andere afbeelding wilt weergeven, afhankelijk van de grootte van het apparaat, moet u gebruik maken van srcset.
syntaxis:
Met de functie kunt u: srcset Door extra bronbestanden aan te bieden, kiest de browser de afbeelding die er optimaal uitziet voor de gebruikte schermgrootte.
bestaan uit srcset Het bestaat uit drie delen: de naam van het afbeeldingsbestand dat het pad naar de bronafbeelding aangeeft, het gebied en de intrinsieke of werkelijke breedte van de afbeelding.
Gebruik srcset met maten
Het probleem ligt in het gebruik van srcset In die zin kunt u niet bepalen welke afbeelding de browser kiest om weer te geven. Het combineren van srcset en maten lost dit probleem op. Maten worden gedefinieerd door een reeks mediatermen die aangeven dat een afbeelding de optimale grootte heeft.
U kunt de tag nu opnieuw typen hierboven als volgt.
De formaten bestaan uit een mediastatus, in dit voorbeeld (max-breedte: 600px) die de breedte van de poort, het gebied en de breedte van de sleuf (480px) vertegenwoordigt met de hoeveelheid ruimte die de afbeelding zal vullen als de media staat is waar.
Hier controleert de browser eerst de weergave van het apparaat en vergelijkt deze met de staat van de media. Als de voorwaarde waar is, zal het de breedte van het diafragma controleren en een afbeelding uploaden van srcset Dezelfde breedte of de eerstvolgende grotere afbeelding.
Houd er rekening mee dat u ook src Die de afbeelding levert als referentie voor browsers die srcset en formaten niet ondersteunen.
Sta je toe srcset Presenteert ook afbeeldingen in verschillende resoluties met behulp van descriptors x.
Als het apparaat in dit voorbeeld een resolutie van 1 pixels per CSS of meer heeft, laadt de browser de afbeelding cute-cat-highXNUMX.jpg.
Het srcset-attribuut verbetert het gedrag van het img-element, waardoor het gemakkelijker wordt om meerdere afbeeldingsbestanden te leveren voor verschillende hardwarefuncties. Net als in de image-set , de originele CSS-functie, srcset De browser heeft het recht om de beste afbeelding te kiezen op basis van apparaateigenschappen, bijvoorbeeld met behulp van een 2x afbeelding op een 2x scherm, en mogelijk in de toekomst een 1x afbeelding op een 2x apparaat bij gebruik van een netwerk met beperkte bandbreedte.
Hardware- en softwarepixels
Het probleem met deze oplossing is dat de afbeeldingen alleen reageren op de pixeldichtheid van het apparaat. Dit is de verhouding tussen hardwarepixels en software- of CSS-pixels. Een hardwarepixel is het eigenlijke lichtpunt op het scherm, terwijl een softwarepixel of CSS-pixel een meeteenheid is. De pixeldichtheid bepaalt de resolutie van het apparaat.
Denk bij het renderen van responsieve afbeeldingen niet alleen aan resolutie; Schermgrootte is ook van belang. Anders kan het zijn dat u onnodig grote afbeeldingen of extreem gepixelde afbeeldingen uploadt.
Gebruiken
Attribuut Het is een HTML-element dat veel elementen omvat die verschillende bronbestanden en een element bevat . tijdens het maken Afbeeldingen reageren door verschillende formaten van dezelfde afbeelding aan te bieden, zodat u kunt de weergegeven afbeelding daadwerkelijk wijzigen.
syntaxis:
Denk aan een situatie waarin je een grote landschapsfoto hebt. De afbeelding wordt weergegeven en ziet er proportioneel uit op de desktop, maar krimpt zo veel op mobiel dat de elementen in de afbeelding klein worden. Een niet-reagerend beeld draagt bij aan een slechte gebruikerservaring. met behulp van het .attribuut , kunt u uw browser vertellen om over te schakelen naar een close-up wanneer u een mobiele telefoon gebruikt.
Net als bij de eerste methode bevat het .attribuut bevat een media-attribuut dat u kunt gebruiken om de status van de media op te geven. De browser geeft bijvoorbeeld "cute-cat-480w.jpg" weer als de viewport 639 pixels of minder is. behoud het attribuut srcset Het pad van het afbeeldingsbestand dat u wilt weergeven is opgegeven src standaard afbeelding.
Terug naar WebP. Afbeeldingsindeling
Het andere waar je mee te maken hebt, is een functie Een goede zaak is om een back-up te maken naar moderne afbeeldingsformaten zoals WebP. WebP-afbeeldingen presteren goed, zijn vaak klein van formaat en bieden een snelle webervaring. U kunt dus besluiten ze op uw websites te gebruiken. De uitdaging waarmee u te maken kunt krijgen, is dat niet alle browsers WebP-afbeeldingen ondersteunen. met .thema U zult dit probleem niet tegenkomen omdat uw browser een alternatieve afbeelding kan uploaden als deze WebP niet ondersteunt.
Waarom zou u kuifafbeeldingen in HTML maken en niet in CSS?
CSS biedt krachtige opties voor het verwerken van responsieve afbeeldingen. Waarom gebruik je het dan niet? De webbrowser laadt de afbeeldingen vooraf voordat de CSS wordt geparseerd. Dus voordat het javascript van uw site de viewport detecteert om de juiste wijzigingen in de afbeeldingen aan te brengen, worden de originele afbeeldingen vooraf geladen. Om deze reden kun je het beste werken met responsive afbeeldingen met HTML.
Streef naar de best mogelijke beeldkwaliteit
Je hebt gezien hoe je responsieve HTML-afbeeldingen kunt maken met een .-attribuut و In dit artikel. Het leveren van responsieve afbeeldingen houdt meestal in dat rekening wordt gehouden met de afbeeldingsgrootte en resolutie in relatie tot de schermgrootte. Als het verkeerd wordt gedaan, kan de beeldkwaliteit worden beïnvloed. Zorg ervoor dat u een afbeelding kiest die het beste gebruik maakt van de minste middelen. Verifiëren Hoe HEIC-afbeeldingen op Android te openen en te converteren.
