RESPONSIVE AFBEELDINGEN MET <PIC­TU­RE>

Gebruik de best mo­ge­lij­ke a beel­ding, a han­ke­lijk van de scherm­groot­te en het beeld­for­maat

Web Designer Magazine - - Creatief Met CSS4 & Html 5.1 -

1. Ver­schil­len­de a beel­dings­ver­sies

Je hebt klei­ne en gro­te ver­sies van een a beel­ding no­dig, in zo­wel PNG als Webp-for­maat. PNG is niet moei­lijk, maar als je beeld­be­wer­kings­pro­gram­ma niet naar Webp kan ex­por­te­ren, con­ver­teer je JPG naar Webp met een grunt-taak: grunt-cwebp van www.npmjs.com/pack­a­ge/grunt-cwebp (ook ver­krijg­baar als gulp-pak­ket).

$ npm in­stall --sa­ve-dev grunt-cwebp

2. Mo­bie­le brow­sers

Met <pic­tu­re> krijg je de mo­ge­lijk­heid om een com­pleet an­de­re a beel­ding voor een an­der scherm­for­maat te ge­brui­ken. Met de vol­gen­de co­de stel je een a beel­ding in voor scher­men van 750px en gro­ter, met een fall­back als <pic­tu­re> niet on­der­steund wordt of als het scherm klei­ner is. <pic­tu­re>

<sour­ce sr­c­set=”ima­ges/im­g_o­ri­gi­nal/ rasp­ber­ry.png” me­dia=”(min-width: 750px)”>

<img src=”ima­ges/im­g_o­ri­gi­nal/rasp­ber­ry_ small.png” alt=”an il­lu­stra­ti­on of so­me rasp­ber­ries”> </pic­tu­re>

3. On­der­steun­de beeld­for­ma­ten

Met het ele­ment <pic­tu­re> kun je een be­paal­de af­beel­ding ge­brui­ken als de brow­ser het for­maat on­der­steunt. Hier vraag je om een Webp-a beel­ding – als die wordt on­der­steund (Blink/chro­me-brow­sers). De fall­back wordt op­nieuw ge­bruikt voor het ge­val <pic­tu­re> of Webp niet on­der­steund wor­den. <pic­tu­re>

<sour­ce sr­c­set=”ima­ges/im­g_webp/rasp­ber­ry. webp” ty­pe=”ima­ge/webp”>

<img src=”ima­ges/im­g_o­ri­gi­nal/rasp­ber­ry.png” alt=”an il­lu­stra­ti­on of so­me rasp­ber­ries”> </pic­tu­re>

4. Com­bi­neer de twee

Om de down­load zo klein mo­ge­lijk te hou­den, wil je de a beel­ding a han­ke­lijk van het scherm­for­maat en het beeld­for­maat weer­ge­ven. De­ze co­de com­bi­neert bei­de ei­sen om het bes­te plaat­je te le­ve­ren. <pic­tu­re>

<sour­ce sr­c­set=”ima­ges/im­g_webp/rasp­ber­ry. webp” me­dia=”(min-width: 750px)” ty­pe=”ima­ge/webp”>

<sour­ce sr­c­set=”ima­ges/im­g_o­ri­gi­nal/ rasp­ber­ry.png” me­dia=”(min-width: 750px)”>

<sour­ce sr­c­set=”ima­ges/im­g_webp/rasp­ber­ry_ small.webp” ty­pe=”ima­ge/webp”>

<img src=”ima­ges/im­g_o­ri­gi­nal/rasp­ber­ry_ small.png” alt=”an il­lu­stra­ti­on of so­me rasp­ber­ries”> </pic­tu­re>

“DE NIEU­WE CSS-MO­DU­LES VERRIJKEN DE TAAL MET MO­GE­LIJK­HE­DEN DIE DE­VEL­O­PERS NIET EER­DER KON­DEN GE­BRUI­KEN. MET NA­ME DE CSS-VARIABELEN ZIJN ZO KRACHTIG EN FLEXIBEL DAT JE DIE WELLICHT AL MET EEN VAN DE FRA­ME­WORKS ZO­ALS SASS OF LESS GE­BRUIKT.” MIKE BABB WEB­DE­VEL­O­PER MIKEBABB.COM

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.