Comment utiliser HTML5 Élément pour obtenir une image réactive

Responsive Design est peut-être là pour rester mais il y a beaucoup de problèmes qui doivent être résolus quand il s'agit de rendre les images sensibles . Bien que les images responsives se redimensionnent automatiquement en fonction de la taille de la fenêtre (ce qui est techniquement facile), un des problèmes rencontrés par les utilisateurs est que le point vocal de l'image devient à peine visible lorsque l'image devient trop petite .

Le consensus idéal parmi les développeurs Web est que la dimension réelle devrait également être réactive . Le navigateur doit pouvoir charger des images plus petites ou plus grandes en fonction de la taille de la fenêtre. De cette façon, nous pouvons diriger et fournir la meilleure proportion d'image plutôt que l'image rétrécie (comme indiqué).

C'est là que l'élément d' picture HTML5 entre en jeu. L' picture nous permet de fournir plusieurs sources d'images et de contrôler la diffusion via les requêtes média. Bien qu'il n'y ait pas encore de navigateur implémentant cet élément, nous pouvons utiliser un polyfill appelé Picturefill pour cela. Voyons voir comment c'est fait, allons-nous?

Commencer

Picturefill est une bibliothèque JavaScript développée par Filament Group. Cela nous permet d'utiliser l'élément d' picture maintenant. Pour commencer, téléchargez le script dans le référentiel Github et placez le picturefill.js ou picturefill.min.js . Picurefill est une bibliothèque JavaScript autonome qui ne nécessite aucune autre bibliothèque pour fonctionner. Vous pouvez simplement l'ajouter dans l'étiquette de head .

L'image

J'ai préparé une image dans trois dimensions différentes, comme suit. L'image a été recadrée pour conserver le focus sur la personne dans l'image. Le plan ici est que nous allons montrer la plus petite taille dans les petits écrans et la plus grande image dans les grands écrans.

Utilisation de l'élément d'image

Picturefill peut fonctionner de deux façons: nous pouvons intégrer srcset dans la balise img ou utiliser l'élément d' picture . Ici, nous allons opter pour l'élément d' picture car il est plus facile à gérer, plus facile à comprendre et plus lisible.

Similaire aux éléments video et audio, l' picture enveloppe des éléments source multiples pointant vers la source de l'image, comme suit.

L'élément source, comme vous pouvez le voir dans l'extrait de code ci-dessus, est défini avec media attribut media . Dans cet attribut, nous spécifions le point d'arrêt de la fenêtre sur laquelle l'image doit être présentée. Vous pouvez voir l'effet immédiatement.

Consultez la page de démonstration, et redimensionnez la taille de la fenêtre, vous devriez trouver l'image affichée dans la largeur de la fenêtre spécifiée.

Picturefill pour WordPress

Si vous utilisez WordPress, vous pouvez utiliser un plugin appelé Picturefill.WP qui vous permet d'implémenter l'élément d'image dans WordPress, sans les tracas. Il suffit de télécharger et d'intégrer votre image comme d'habitude, et ce plugin s'occupera du reste.

Pensée finale

L'élément d' picture est un excellent ajout en HTML5. Nous avons plus de contrôle sur la taille de l'image et la dimension que le navigateur devrait présenter. Et avec picturefill, nous pouvons utiliser ce nouvel élément même si aucun navigateur ne l'a encore implémenté. Picturefill fonctionne dans un large éventail de navigateurs, y compris dans IE (mais avec quelques mises en garde).

Enfin, voir la démo et télécharger le code source ci-dessous.

• Démo
• Source de téléchargement

Web mobile Design: 10 conseils pour une meilleure convivialité

La navigation Web mobile devrait devenir la prochaine grande plateforme Internet. Il est maintenant facile de naviguer sur le net de presque n'importe où en utilisant des appareils mobiles qui tiennent dans une main en raison de la technologie. Être court dans la mise en œuvre de la facilité d'utilisation dans la conception de sites Web mobiles, il est difficile de naviguer sur votre chemin autour de divers sites Web mobiles populaires. Co

(Conseils techniques et de conception)

6 façons Internet transforme lentement nos esprits

Avec Internet infiltrant toutes les facettes de notre vie professionnelle et personnelle, nos esprits luttent pour suivre le développement. Beaucoup d'entre nous ont pris l'habitude de rester en ligne 24 heures sur 24, 7 jours sur 7, que nous ressentons à perte lorsque nous débranchons. Nous devons avoir un accès constant à nos messagers, nos réseaux sociaux et nos applications de toutes sortes pour nous sentir intégrés au monde connecté.Il n'

(Conseils techniques et de conception)