Astuce comment utiliser une image HTML5 pour des images réactives

Les images sont notoirement l'un des aspects les plus difficiles de la conception Web réactive. Aujourd'hui, nous verrons comment le element, une solution au problème des images sensibles, peut être utilisé maintenant.

D'abord, le problème

La conception de sites Web parfaits en pixels à largeur fixe et à largeur fixe est bel et bien derrière nous. À l’époque actuelle, avec des écrans larges, des téléviseurs Internet, des tablettes de tailles multiples et des téléphones intelligents, nos conceptions doivent désormais prendre en charge tout, allant de 320 pixels de large à potentiellement jusqu’à 7680 pixels de large..

Parallèlement à ce paysage multi-résolution, il est nécessaire que les images soient étirées ou réduites pour répondre à ces exigences extrêmement variées. Cela peut s'avérer être un problème étant donné que, à l'exception des graphiques vectoriels, la grande majorité des images ont des largeurs spécifiques en pixels qui ne changent pas..

Alors que faisons-nous?

La solution la plus courante actuelle

En règle générale, vous trouverez ce qui suit dans à peu près n'importe quel CSS de site sensible:

img max-width: 100%; hauteur: auto; 

Ce code utilise le largeur maximale: 100%; paramètre permettant d’assurer que les images ne dépassent jamais la largeur de leur conteneur parent. Si le conteneur parent diminue en dessous de la largeur de l'image, celle-ci sera réduite. le hauteur: auto; Ce paramètre garantit que le rapport de format des images est préservé lorsque cela se produit..

Une image fluide pour toutes les circonstances

Cela résout le problème sous un aspect, nous permettant d'afficher la même image dans de nombreuses circonstances différentes. Mais cela ne nous permet pas de spécifier différent images pour différentes circonstances.

Une nouvelle solution:

est un nouvel élément qui devrait faire partie de HTML5. 

Cela accélérera le processus de placement d’images réactives par rapport à la façon dont le et les éléments fonctionnent. Cela vous permettra de placer plusieurs la source balises, chacune spécifiant des noms de fichiers d'image différents ainsi que les conditions dans lesquelles elles doivent être chargées.

Cela vous permettra de charger une image entièrement différente selon:

• Résultats de la requête multimédia, par exemple hauteur, largeur, orientation de la fenêtre
• Densité de pixels

Cela signifie que vous pouvez:

• Chargez des images de taille appropriée, en exploitant au mieux la bande passante disponible.
• Chargez des images recadrées de manière différente avec des formats d’image différents pour répondre aux changements de disposition de différentes largeurs.
• Chargez des images de résolution supérieure pour des écrans à densité de pixels plus élevée.

Différentes images servies, selon les circonstances

Comment Travail?

Les étapes de base du travail avec sont:

1. Créer ouverture et fermeture Mots clés.
2. Dans ces balises, créez un élément pour chaque requête que vous souhaitez exécuter.
3. Ajouter un médias attribut contenant votre requête sur des choses comme la hauteur de la fenêtre, la largeur, l'orientation, etc..
4. Ajouter un srcset attribuer avec le nom de fichier image correspondant à charger.
5. Ajouter des noms de fichiers supplémentaires à votre srcset attribuez-le si vous souhaitez définir différentes densités de pixels, par ex. Affiche de la rétine.
6. Ajouter un repli élément.

Voici un exemple de base qui vérifie si la fenêtre d'affichage est inférieure à 768 pixels, puis charge alors une image plus petite:

Vous remarquerez que la syntaxe utilisée dans le médias Cet attribut est identique à celui auquel vous êtes habitué lors de la création de requêtes multimédia CSS. Vous pouvez utiliser les mêmes contrôles, ce qui signifie que vous pouvez interroger largeur maximale, largeur min, hauteur maximum, hauteur min, orientation etc.

Vous pouvez utiliser ces vérifications pour effectuer des opérations telles que le chargement de versions au format paysage ou portrait d'une image, en fonction de l'orientation du périphérique. Vous pouvez également mélanger des requêtes de taille en même temps. Par exemple:

Le code ci-dessus charge une version recadrée de l'image plus petite et paysage sur un périphérique plus petit orienté paysage. Il charge une version plus grande de la même image sur un périphérique plus grand orienté paysage. 

Si le périphérique est orienté portrait, il charge une version rognée portrait, de petite taille sur un petit périphérique ou de grande taille sur un grand périphérique..

Si vous souhaitez fournir différentes versions de résolution de vos images pour des affichages à haute densité, vous devez ajouter des noms de fichiers supplémentaires à la liste. srcset attribut. Par exemple, regardons notre premier extrait de code présenté ci-dessus, avec la gestion de la résolution 2x de Retina ajoutée:

La requête multimédia est toujours évaluée en premier afin que vous puissiez contrôler les dimensions sur lesquelles votre image apparaîtra à l'écran. Ensuite, la densité de pixels de l'écran sera vérifiée et si des densités plus élevées sont à la fois supportées et autorisées par les préférences de l'utilisateur, la version de l'image à la densité la plus élevée sera chargée..

En utilisant  Aujourd'hui

À l'heure actuelle, la mise en œuvre native pour est dans les travaux pour Chrome, Firefox et Opera. À l'avenir, il est probable que le support sera généralisé, car d'autres navigateurs s'y intéressent également. Mais pour le moment, le soutien reste à venir.

En attendant, vous n’avez pas à attendre si vous souhaitez commencer à utiliser maintenant. Vous devez simplement utiliser Picturefill 2.0; un polyfill fourni par ces gens intelligents chez Filament Group.

Après avoir téléchargé le picturefill.js fichier sur votre projet, il peut être implémenté en le chargeant simplement dans la section head de votre site:

Il existe également une option pour charger le script de manière asynchrone pour une efficacité accrue, que vous pouvez lire dans la documentation de Picturefill..

Avec ce script chargé, le l'élément fonctionnera comme je l'ai expliqué, avec seulement quelques limitations.

Limites de remplissage d'images

IE9

Picturefill fonctionne parfaitement avec les autres versions d'IE, mais IE9 ne le reconnaît pas. la source éléments qui sont emballés dans image Mots clés. Pour résoudre ce problème, conditionnez conditionnellement vos éléments source dans vidéo balises qui les rendent ensuite visibles pour IE9, par exemple:

Android 2.3

Comme IE9, Android 2.3 ne peut pas voir la source éléments à l'intérieur d'un image élément. Cependant, il peut comprendre la srcset attribuer lorsqu'il est utilisé sur une base régulière img étiquette. Assurez-vous de toujours inclure votre solution de rechange img élément avec le nom de fichier par défaut dans le srcset attribut pour Android 2.3 et tous les autres navigateurs pouvant avoir le même problème.

Requiert la prise en charge de JavaScript et des requêtes de média natif

Cette solution étant basée sur JavaScript, elle nécessite donc l'activation de JavaScript dans le navigateur. Picturefill 2.0 ne fournit pas de solution de contournement "no-js", car si cela se produisait, plusieurs images apparaissaient lorsque le navigateur natif prend en charge est déployé. Cependant, vous avez la possibilité d’utiliser Picturefill 1.2 si une option "non-js" est indispensable pour vous..

L’autre exigence imposée par Picturefill concerne la prise en charge des requêtes de média natives, afin d’activer les requêtes dans le répertoire. médias attribuer au travail. Tous les navigateurs modernes prennent en charge les requêtes de média, IE8 et versions antérieures étant le seul navigateur non compatible avec une petite base d'utilisateurs restante..

Requêtes HTTP supplémentaires possibles

Dans les navigateurs prenant en charge nativement srcset, mais pas encore pour image, il est possible que le nom de fichier spécifié dans le repli img élément peut être demandé avant une meilleure image de la la source les éléments sont déterminés.

Ceci est seulement un problème temporaire et disparaîtra une fois natif image la mise en œuvre est déployée.

Plus d'information

• En savoir plus sur Picturefill 2.0 et le télécharger pour votre projet sur la page Picturefill
• Obtenir des informations complètes sur le  élément de responsiveimages.org.

Essaie  dans votre projet aujourd'hui et voir ce que vous pensez!