Salut tout le monde. J'étais en retard avec un nouvel article (je me suis accordé quelques jours de congé et je suis allé au bord de la mer). Mais j'espère qu'avec cet article je rattraperai un peu cet incident :)

Le problème des images adaptatives est tout à fait pertinent, je vais donc commencer par un peu de raisonnement et de méthodes de mise en œuvre, puis je soulignerai l'option qui, à mon avis, convient le mieux.

Ainsi, il y a environ un an, je pensais que pour rendre une image réactive (c'est-à-dire l'étirer ou la réduire pour l'adapter à la largeur du conteneur), il suffisait d'utiliser le code suivant :

Emballage img (largeur : 100 % ; )

Et en effet, dans certains cas, cela peut être limité. Cette astuce fonctionne très bien lorsque la fenêtre du navigateur devient plus petite. Mais que se passe-t-il si la largeur du conteneur dans lequel se trouve l’image devient plus grande que la résolution de l’image ? Droite. L'image s'étend sur toute la largeur du conteneur, mais la qualité laisse beaucoup à désirer. Mais que se passe-t-il si vous avez besoin de prendre en charge une résolution de 2048x1536px ?

Si vous n'utilisez pas svg et qu'il s'agit d'une image raster, la première chose qui vous vient à l'esprit est de prendre une photo qui correspond à la résolution maximale de la page de destination, et lorsque vous redimensionnerez la fenêtre du navigateur, elle sera compressée avec qualité normale.

Et puis le problème des performances se pose. C’est stupide pour un smartphone de charger des images aussi volumineuses qui s’affichent bien en résolution Retina. Après tout, la vitesse des réseaux mobiles n'est pas aussi élevée que celle d'un PC, et certains utilisateurs peuvent ne pas attendre que la page de destination se charge sur leur smartphone. Le résultat est un client perdu.

Vous pouvez essayer de définir plusieurs divs avec des images, puis, à l'aide de requêtes multimédias, masquer celles inutiles et afficher uniquement l'image qui correspond à la résolution actuelle.

Il semble que le problème ait été résolu. Mais le fait est que les navigateurs, afin d'accélérer l'affichage de la page, préchargent les images écrites en HTML avant que le CSS ne commence à être traité. Peut-être que je ne me suis pas exprimé correctement (corrigez-moi), mais si vous effectuez cette astuce, alors toutes les images seront toujours chargées, quel que soit ce qui est écrit dans le CSS. Cela signifie que nous n’avons fait qu’aggraver la situation des appareils mobiles. Désormais, ils devront télécharger non pas une, mais plusieurs images.

Vous pouvez le vérifier en ouvrant les outils de développement et en consultant l'onglet « Réseau ».

En général, de nombreux problèmes peuvent encore survenir lors de la création d’images adaptatives. Et de nombreuses solutions se sont également accumulées. Tout dépend de la situation spécifique.

En HTML 5, la balise image est apparue, qui vous permet de résoudre la plupart des problèmes et a été créée spécifiquement pour créer un design adaptatif (responsive). Son design rappelle les tags vidéo et audio. L'essence du travail est que plusieurs images sont spécifiées à l'intérieur de la balise d'image pour des résolutions d'écran spécifiques. Cela ressemble à ceci :

La particularité est qu'au lieu de src, srcset est utilisé et quelque chose de similaire aux requêtes multimédias est utilisé. Une petite image est chargée à une résolution inférieure à 319px. Image moyenne avec une résolution de 320px à 480px, etc.

Vous pouvez voir la prise en charge actuelle du navigateur pour la balise d'image sur cette page.

En général, lors de l'utilisation de nouvelles balises, je recommande de consulter ce site et de vérifier l'état actuel des choses.

Comme vous pouvez le constater, la situation actuelle laisse beaucoup à désirer. Il n'y a pas de support sur les appareils IOS, sur Macbook(s) et sur IE (même si les utilisateurs d'IE ne se sentent pas désolés pour eux, ils doivent souffrir :)). Je pense que nous ne sommes pas tous prêts à perdre autant d'utilisateurs. Non, je l'ai mal exprimé. Ne le perdez pas, car notre image principale se chargera et s’affichera correctement. Mais je voudrais quand même ne pas perdre de clients avec la technologie Apple en raison des longs temps de chargement des pages, car il s'agit très probablement d'un public solvable :)

Afin de profiter de cette balise maintenant, vous devez utiliser un petit script (entre les balises head) picturefill.js .

Désormais, tous les appareils devraient prendre en charge cette structure pour la mise en page des images adaptatives. C’est vrai, je ne l’ai pas testé sur Mac (je n’en ai pas encore).

Contrairement à la méthode décrite ci-dessus, une seule image est désormais chargée, et non trois, comme c'était le cas auparavant.

Ce n'est pas une méthode délicate. Comment rendre les images réactives ? Veuillez partager vos méthodes dans les commentaires. Merci.

Dans ce court didacticiel, nous examinerons les moyens les plus simples de créer des images réactives à l'aide de CSS. Il existe de nombreuses solutions différentes pour rendre les images réactives, elles varient toutes en termes de complexité et de degré de prise en charge par le navigateur. Un exemple de manière complexe d'implémenter des images réactives consiste à utiliser l'attribut srcset, qui nécessite plusieurs images, plus de balisage et dépend également de la prise en charge du navigateur.

Les spécifications modernes nous permettent de rendre flexibles les images utilisées sur les pages du site Web et de les afficher correctement sur les écrans des différents appareils des utilisateurs ; pour cela, il suffit d'utiliser seulement quelques propriétés du clip CSS.

Valeurs de base des images réactives

Commençons par examiner un exemple de base dans lequel nous devons rendre les images uniques utilisées dans les publications, ou d'autres blocs individuels, entièrement réactifs. Par exemple, nous avons un conteneur auquel nous avons donné une largeur de base de width : 96 % ; et définissez la largeur maximale sur max-width: 960px; , dans ce bloc, nous devons afficher une image adaptative. Pour cet élément à l'intérieur du conteneur, nous définissons la largeur à 100 %, de sorte que sa largeur soit toujours égale à la largeur du conteneur, quelle que soit la taille de la fenêtre. En conséquence, nous passons la hauteur en mode automatique, ce qui signifie que l'image changera proportionnellement.

HTML : CSS : div.container (largeur : 96 % ; largeur maximale : 960 px ; marge : 0 auto ; /* centrer le conteneur principal */ ) img ( largeur : 100 % ; /* largeur de l'image */ hauteur : auto ; /* hauteur Photos */ )

noter que l'élément sera réactif même si des valeurs fixes pour les attributs HTML width et height ont été spécifiées directement dans le balisage.

Salut tout le monde! Nous avons compris ce qu'est une mise en page adaptative, une grille et comment rendre les polices adaptatives. Voyons maintenant comment adapter les images.

C'est en fait un sujet très simple et cela ne nous prendra pas beaucoup de temps.

Pour rendre vos images responsive, il vous suffit de leur ajouter la propriété max-width=100%.

Image (
largeur maximale : 100 % ;
}

Tous! Désormais, notre image ne s'étendra pas au-delà du conteneur parent et s'adaptera en fonction de la résolution de l'écran.

Outre les images, vous pouvez utiliser cette technique pour les vidéos et autres fichiers multimédias.

Img, intégration, objet, vidéo (
largeur maximale : 100 % ;
}

Tout irait bien, mais cela ne fonctionne que dans IE7+. Si vous devez prendre en charge IE6, alors cette propriété y fonctionne dans l'entrée suivante :

Image (
largeur : 100 % ;
}

Ceux. Au lieu de max-width, écrivez width .

Un autre problème que vous pouvez rencontrer est une mauvaise mise à l'échelle de l'image sous Windows. Oui, exactement dans le système, pas dans le navigateur. Si vous regardez attentivement, vous pouvez voir quelques artefacts.

Résoudre ce problème pour IE est simple.

Logo (
arrière-plan : aucun ;
filtre : progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png",sizingMethod="scale");
}

Ceux. La propriété filter nous aide à résoudre ce problème.

Adaptatifs, ils varient tous en termes de complexité et de degré de prise en charge du navigateur. Un exemple de manière complexe d'implémenter des images réactives consiste à utiliser l'attribut srcset, qui nécessite plusieurs images, plus de balisage et dépend également de la prise en charge du navigateur.

Laissons de côté l'ennui inutile, les spécifications modernes nous permettent de rendre les images utilisées sur les pages du site Web flexibles et affichées correctement sur les écrans des différents appareils utilisateurs, pour cela il suffit d'utiliser seulement quelques propriétés du clip CSS.

J'ai préparé des exemples de plusieurs variantes d'images adaptatives, une seule image, des images sur deux colonnes ou plus, ainsi qu'un exemple d'utilisation d'une grande image d'arrière-plan avec une adaptabilité garantie. Toutes les options sont basées sur l'utilisation de valeurs de pourcentage pour la propriété width et de valeurs automatiques pour la propriété height des images.

img (largeur : 100 % ; hauteur : auto ;)

img (largeur : 100 % ; hauteur : auto ; )

Valeurs de base des images réactives

Commençons par examiner un exemple de base dans lequel nous devons rendre les images uniques utilisées dans les publications, ou d'autres blocs individuels, entièrement réactifs.
Par exemple, nous avons un conteneur auquel nous avons donné une largeur de base de width : 96 % ; et définissez la largeur maximale sur max-width: 960px; , dans ce bloc, nous devons afficher une image adaptative.
Pour cet élément à l'intérieur du conteneur, nous définissons la largeur à 100 %, de sorte que sa largeur soit toujours égale à la largeur du conteneur, quelle que soit la taille de la fenêtre. En conséquence, nous passons la hauteur en mode automatique, ce qui signifie que l'image changera proportionnellement.

div.container ( width : 96% ; max-width : 960px ; margin : 0 auto ; /* centre le conteneur principal */ ) img ( width : 100% ; /* largeur de l'image */ height : auto ; /* hauteur de l'image * / )

div.container ( largeur : 96 % ; largeur maximale : 960 px ; marge : 0 auto ; /* centrer le conteneur principal */ ) img ( largeur : 100 % ; /* largeur de l'image */ hauteur : auto ; /* hauteur de l'image * / )

noter que l'élément sera réactif même si des valeurs fixes pour les attributs HTML width et height ont été spécifiées directement dans le balisage.

Images de colonnes réactives

Parfois, nous souhaitons voir des images alignées côte à côte, ou dans une grille, par exemple, pour organiser une simple galerie d'images.
Pour ce faire, il vous suffit d'apporter de petites modifications au code utilisé ci-dessus, la première consiste à réduire la propriété width width et à définir l'élément la valeur du bloc en ligne pour la propriété d'affichage, c'est-à-dire mettez-le en ligne.
Examinons deux mises en page : une mise en page d'image à deux colonnes et une mise en page à trois colonnes.

1. Disposition de l'image sur deux colonnes
Pour une mise en page d'image à deux colonnes, nous pouvons définir la largeur à 48 %, soit environ la moitié du conteneur. Nous ne fixons pas les valeurs à 50% afin d'avoir un remplissage latéral.

img (largeur : 32 % ; affichage : bloc en ligne ;)

img (largeur : 32 % ; affichage : bloc en ligne ; )

Placement conditionnel d'images adaptatives

Dans l'exemple suivant, nous considérerons la possibilité d'utiliser des images adaptatives avec des dispositions différentes selon les appareils de visualisation, c'est-à-dire Lorsqu’elles sont visualisées sur des smartphones, les images apparaîtront dans une colonne, dans deux colonnes sur les tablettes et dans quatre colonnes sur des écrans plus grands.
Pour implémenter cela, nous utiliserons des requêtes @media media, spécifiant le type de média pour lequel telle ou telle largeur maximale d'image max-width sera appliquée.

/* Pour les petits appareils (smartphones) */ img ( max-width: 100%; display: inline-block; ) /* Pour les appareils de taille moyenne (tablettes) */ @media (min-width: 420px) ( img ( max- width: 48%; ) ) /* Pour les gros appareils (ordinateurs portables, PC) */ @media (min-width: 760px) ( img ( max-width: 24%; ) )

Tout est assez simple, n'est-ce pas ? L'idée des requêtes multimédias est géniale, existe depuis un certain temps et a été largement utilisée. Les paramètres montrés dans l'exemple fonctionnent bien avec cette disposition particulière ; leur comportement dans d'autres conceptions doit être soigneusement vérifié, donc...

Image réactive en plein écran

Afin de créer des images réactives grand format qui remplissent 100 % de la taille de la fenêtre d'affichage, il vous suffit de supprimer la propriété max-width du conteneur (une valeur de 960 px) et de définir sa largeur sur 100 %. La largeur de l'image est également définie sur 100 %.

.container ( largeur : 100% ; ) img ( largeur : 100% ; )

Conteneur (largeur : 100 % ; ) img (largeur : 100 % ; )

Bien que cette technique soit très simple à utiliser et qu'elle soit fortement prise en charge par les navigateurs, vous devez vous rappeler que les images seront toujours affichées en taille réelle, c'est-à-dire en taille réelle. De grandes images haute résolution sont affichées remplissant tout l'espace, ce qui n'est pas toujours approprié pour les petits appareils mobiles, à moins que l'image ne soit utilisée comme image d'arrière-plan.

C'est probablement tout. Si vous souhaitez utiliser des images distinctes de différentes tailles pour différents appareils, utilisez-les, cela ne sera certainement pas pire. Connaissez-vous d'autres méthodes pour rendre les images adaptatives, écrivez dans les commentaires, nous y réfléchirons certainement, les nouvelles sont toujours intéressantes.

Date de publication : 2013-12-16

De l'auteur : Si vous codez des sites Web, je peux parier qu'au moins un de vos clients s'est renseigné ou a commandé un site Web prenant en charge la saisie tactile. Si vous optez pour le design réactif (dans lequel votre site Web est suffisamment flexible pour s'adapter visuellement à la largeur de l'écran du mobile au bureau), vous aurez également besoin d'une stratégie pour créer des images réactives - une solution d'image réactive.

Apprendre les bases est assez simple, mais une fois que vous aurez compris, vous constaterez que la mise à l'échelle de l'image n'est qu'un début et que vous devrez également faire face à des problèmes de performances et à des énigmes en matière de direction artistique. Vous serez confronté à une vaste gamme de solutions au problème de l'image réactive, chacune avec ses propres forces et faiblesses - et aucune n'est parfaite ! Cet article vous présentera les bases, puis vous fournira les informations dont vous avez besoin pour choisir la meilleure solution d'image responsive pour votre situation.

Les bases

Il est très simple de styliser les images de premier plan pour qu'elles correspondent à la largeur de leur conteneur. Le code suivant est ajouté à la feuille de style, éventuellement une feuille de style de normalisation ou de réinitialisation :

img (largeur maximale : 100 % ; )

img( largeur maximale : 100 % ;

La plupart du temps, cette petite règle de coiffage crée le résultat souhaité ! À l'arrêt, si le conteneur autour de l'image devient plus étroit que sa largeur, l'image est mise à l'échelle pour correspondre à la largeur de son conteneur. Définir la largeur maximale sur 100 % garantit également que l'image ne deviendra pas plus grande que sa taille réelle, ce qui réduirait considérablement sa qualité. Si vous ne parvenez pas à fournir un support pour IE 6 ou 7, vous devrez ajouter une règle de style width: 100%, qui cible uniquement ces navigateurs car ils ne comprennent pas la largeur maximale.

Les images « Retina » haute résolution peuvent compliquer cette simple mise en œuvre. Supposons que vous ayez besoin d'un logo de 150 x 150 px pour qu'il apparaisse avec une densité de pixels deux fois supérieure à sa taille normale, et que l'image soit suffisamment petite pour que l'obtention de deux variantes distinctes ne soit pas un problème. Vous créez donc une version 300×300 px du logo, vous l'activez - et maintenant c'est énorme ! Votre premier réflexe pourrait être d’essayer quelque chose comme ceci en CSS :

img.sitelogo (largeur maximale : 150 px ; )

img. logo du site ( largeur maximale : 150px ;

Malheureusement, rien ne fonctionne comme prévu : l'image du logo refusera désormais de s'adapter correctement aux autres images de la page.

Pour limiter la largeur maximale d'une image responsive, vous devrez limiter la largeur maximale du conteneur d'image, pas l'image elle-même ! Disons que vous avez enveloppé une image de logo dans un module avec une classe de marque. Voici un style qui produira le résultat souhaité :

Image de marque (largeur maximale : 150 px ; )

L'image de marque ( largeur maximale : 150px ;

Désormais, la mise en page du site réactif comprend des images réactives évolutives. Mission accomplie. Il est temps de découvrir ce que cet espace extérieur inconnu a à offrir au promoteur affamé de soleil, n'est-ce pas ?

Pas si vite! Nous avons encore deux difficultés majeures à surmonter.

Problème de performance

Avec la solution d’image adaptative décrite ci-dessus, tous les appareils reçoivent les mêmes images. Il fait du bon travail avec les petites icônes et logos, mais le problème devient rapidement plus difficile à mesure que les images deviennent plus grandes et plus lourdes. Les images Retina renforcent encore davantage la netteté : vous n'avez pas besoin d'envoyer de grandes images Retina à un appareil qui ne peut pas afficher ses détails !

Pensez-y. Est-il vraiment nécessaire d'envoyer une image de 990 x 300 px et 100 Ko destinée aux utilisateurs de bureau vers un téléphone mobile ? Bien sûr, un visiteur sur un appareil mobile peut être connecté à la connexion Wi-Fi de sa cafétéria locale, mais il peut se retrouver sur la route avec une connexion sans fil instable et essayer de trouver des informations importantes sur votre site Web. Tout mobinaute qui abandonne lorsqu’une page met trop de temps à charger est un client potentiel perdu !

Aujourd’hui, dans la nature, vous pouvez trouver de nombreux sites Web mobiles aussi grands, voire plus, que leurs homologues de bureau. Guy Podjarny(Guy Podjarny) a fait plusieurs tests il y a environ un an, et n'a pas constaté d'amélioration significative : en 2011. 86 % des sites Web étaient de même taille ou plus, et en 2012 ce nombre est tombé à 72 %, mais la taille globale des sites a augmenté. Dave Rupert a également noté ce problème dans son article Mo' Pixels Mo' Problems.

PROCHAINE COMPLICATION : PRÉCHARGEMENT DU NAVIGATEUR

Lorsque j'ai commencé à lutter contre les problèmes de performances des sites Web réactifs, j'avais initialement prévu de récupérer toutes les variantes d'image sur la page, mais d'installer des classes CSS avec des requêtes multimédias qui masqueraient les grandes images et en afficheraient les petites sur de petites largeurs, et feraient le opposé aux largeurs du bureau. Cela semble logique : le navigateur ne devrait-il pas télécharger uniquement les images visibles ?

Le problème c’est que les navigateurs sont trop rapides pour nous ! Pour garantir le temps de chargement le plus rapide possible, les navigateurs prétéléchargent toutes les images qu'ils peuvent identifier dans le code source avant le début de tout traitement CSS ou JavaScript. Donc en réalité, cette approche désavantagera encore plus les visiteurs mobiles en les obligeant à télécharger toutes les options d’image !

En raison du prétéléchargement, soit une solution back-end d'application est requise (pour empêcher le prétéléchargement), soit un balisage spécial et du JavaScript.

DÉTERMINATION DE LA BANDE PASSANTE

La dernière pièce du puzzle des performances est la vitesse du réseau. Il est clair que vous ne devez diffuser des images volumineuses qu'aux appareils connectés à un réseau rapide, mais comment déterminer cela ? Il existe plusieurs méthodes pour estimer la vitesse, mais elles ne sont pas encore totalement fiables.

Le W3C travaille sur une technologie API d'information réseau qui pourrait être très utile à l'avenir, mais qui n'est actuellement prise en charge que par un petit nombre d'appareils (et, malheureusement, de petite taille). Il est actuellement implémenté dans quelques solutions d'images réactives, mais il ne sera pas largement adopté tant qu'il n'aura pas un support approprié. Mesurer le réseau est difficile et, comme le soutient Yoav Weiss dans son article sur le site Internet de Smashing Magazine, des « requêtes de bande passante multimédia » fiables ne semblent pas pouvoir être mises en œuvre correctement dans un avenir proche.

Foresight.js d'Adam Bradley utilise JavaScript pour tester le temps nécessaire à un navigateur pour charger une image de 50 Ko, puis stocke ces informations et les utilise pour prendre des décisions en matière de bande passante. Il présente quelques inconvénients mineurs : il ajoute un téléchargement d'image de 50 Ko à votre page, et le chargement du reste des images peut être bloqué jusqu'à ce que le téléchargement de celle de test soit terminé. De nombreuses solutions d'images réactives utilisant actuellement la détection de bande passante utilisent une variante ou une adaptation de Foresight.js.

Le problème de la « direction artistique »

Disons que vous disposez d'une image très large sur la page d'accueil de votre site Web. Il représente une scène pastorale avec des champs et des forêts, un ciel bleu et des nuages ​​duveteux, ainsi qu'une famille heureuse sur l'herbe.
Maintenant, redimensionnez-le pour un appareil mobile sur une largeur de 300 px. Avec cette taille, une famille en vacances ressemble à des fourmis en pique-nique !

Lors de la mise à l'échelle d'une grande image, les détails sont perdus.

C’est là que réside le problème de la « direction artistique ». Certaines images ne peuvent tout simplement pas être correctement mises à l'échelle ; les détails fins sont perdus et l'impact lumineux est réduit. Dans le cas de notre image, elle aurait été bien meilleure visuellement si la version mobile de la photo avait été agrandie, recadrée et que l'heureuse famille aurait été mise au point. Pour ce problème, nous avons besoin d'une solution d'image réactive qui nous permet soit de définir différentes versions de l'image pour différentes situations, soit d'ajuster l'image à la volée.

Parfois, lorsque la largeur de l'écran est petite, il est souhaitable de recadrer ou de zoomer sur l'image..

Choisir votre solution

Heureusement, la communauté du développement et de la conception Web ne manque pas d’individus intelligents et créatifs travaillant pour résoudre ces problèmes. Bien sûr, le revers de la médaille est qu’on peut facilement se laisser submerger par le nombre de solutions adaptatives qui existent. Selon vous, lequel vous conviendra le mieux ?

Le choix peut être extrêmement difficile car de nombreux facteurs entrent en jeu. Il n’existe actuellement pas de solution parfaite pour chaque situation ; chacun a été créé pour résoudre un ensemble spécifique de problèmes. Pour choisir, vous devrez les peser en fonction des besoins spécifiques de votre projet. Chris Coyier fait un excellent travail en résumant les facteurs de décision (y compris un tableau pour les suivre, bien que certaines des méthodes les plus récentes ne soient pas mentionnées). Voici quelques-uns des facteurs à considérer :

Devrez-vous faire face à la question de la direction artistique (c'est-à-dire différents ratios d'image, recadrage et tailles pour différentes largeurs) ?

Avez-vous un grand site Web ou un CMS sur lequel il est impossible de revenir en arrière et d'ajouter un balisage personnalisé à chaque image ?

Toutes les images sont-elles présentes lors du chargement de la page, ou certaines sont-elles chargées dynamiquement via JavaScript ?

Voulez-vous tester la bande passante d'un utilisateur pour déterminer si sa connexion est suffisamment rapide pour télécharger des images haute résolution ?

La solution que vous avez choisie nécessite-t-elle un framework (tel que jQuery ou PHP) qui n'est pas disponible pour vous ?

Une solution tierce est-elle applicable pour vous, ou en avez-vous besoin sur un hébergement interne ?

À cette fin, examinons quelques solutions d'images réactives qui existent depuis un certain temps et sont largement utilisées dans la communauté des développeurs.

Veuillez noter que la liste des solutions ci-dessous n’est en aucun cas définitive. Soit je les ai personnellement trouvés les plus utiles, soit ils ont déjà fait leurs preuves en matière de fiabilité. Avez-vous une solution préférée qui ne figure pas ici ? Parle-nous-en dans les commentaires!

Solutions adaptatives éprouvées et fiables

REMPLISSAGE DE L'IMAGE

Le réseau est véritablement mondial et nous devons faire face au fait que tout le monde n’a pas accès aux connexions fibre optique et aux réseaux 4G. Scott Jehl Scott Jehl a fait l'expérience directe de cette fracture numérique alors qu'il voyageait et travaillait en Asie du Sud-Est, et il est un ardent défenseur des sites Web réactifs et axés sur le mobile qui ne surchargent pas les utilisateurs mobiles. Son script Picturefill est un polyfill pour l'élément proposé - un code JavaScript qui émule l'API d'image - nous donnant la possibilité de l'utiliser aujourd'hui sur nos sites Web. L'avenir, c'est maintenant, bébé !

Picturefill ne nécessite pas jQuery, mais bien sûr, il nécessite que le script Picturefill.js soit inclus quelque part sur la page. Le remplissage d'images nécessite également un balisage spécial, avec des divs pour représenter les variations de l'image, distinguées par des attributs de support de données, qui agissent comme des requêtes multimédias en CSS. Vous pouvez également éventuellement inclure une image dans les commentaires conditionnels pour les navigateurs qui ne prennent pas en charge les requêtes multimédias (il s'agit d'IE 8) et une option alternative dans la balise noscript pour les navigateurs sur lesquels JavaScript est désactivé (il s'agit de BlackBerry). Voici un exemple de paramètres Picturefill typiques :

< span data - picture data - alt = "Balise alt descriptive" > < span data - src = "images/myimage_sm.jpg" > < / span > < span data - src = "images/myimage_lg.jpg" data - media = "(min-width: 600px)" > < / span > < ! -- [ if (lt IE 10 ) & (! IEMobile ) ] > < span data - src = "images/myimage_sm.jpg" > < / span > < ! [ endif ] -- > < ! -АльтернативныйконтентдлябраузеровбезJS . -- > < noscript > < img src = "images/myimage_sm.jpg" alt = "Balise alt descriptive" / > < / noscript > < / span >

C'est tout ce qu'il faut pour afficher des images réactives pendant le chargement de la page à l'aide de Picturefill. Entrez le script, configurez le balisage et tout fonctionnera facilement. Vous pouvez également appeler Picturefill par programme si vous souhaitez ajouter des images à la page à la volée.

Picturefill nécessite beaucoup de balisage personnalisé, ce n’est donc peut-être pas le meilleur choix pour ceux qui ne sont pas autorisés à modifier le code source du site Web. De plus, il ne détermine pas la bande passante. Si cela est très important pour votre projet, envisagez la solution suivante.

HiSRC de Marc Grabanski(Marc Grabanski) et Christophe Schmitt(Christopher Schmitt) est un plugin jQuery qui vous permet de créer des versions basse, moyenne et haute résolution d'une image, et le script affiche la version la plus appropriée en fonction de la préparation Retina et de la vitesse de connexion réseau.

Pour l'installer, assurez-vous d'abord que jQuery et le script HiSRC sont ajoutés quelque part sur la page.

Dans le code HTML, ajoutez d'abord une balise d'image normale à la page et définissez la source sur la version de résolution la plus basse (ou la plus petite) de l'image. Ajoutez une classe (comme .hisrc) à l'image ou à son wrapper pour définir quelles images HiSRC doit traiter. Ajoutez ensuite un balisage spécial à la balise d'image : attributs data-1x et data-2x pour les versions moyenne et haute résolution, respectivement. Par exemple:

< img src = "//placekitten.com/200/100" data - 1x = "http://placekitten.com/400/200" data - 2x = "http://placekitten.com/800/400" class = "hisrc" / >

Ensuite, une fois le DOM chargé, appelez simplement une fonction sur la classe d'image que vous utilisez, comme ceci :

$(document).ready(function())( $(".hisrc").hisrc(); ));

$(document). prêt(fonction()( $(".hisrc" ) . hisrc(); } ) ;

En fait, le navigateur chargera d'abord la source de l'image, c'est-à-dire version mobile de l'image. Le script vérifiera ensuite si l'utilisateur utilise la bande passante mobile (comme la 3G). Si tel est le cas, l’image mobile sera laissée en premier. Si la connexion est rapide et que le navigateur prend en charge les images Retina, alors la version @2x sera livrée. Si la connexion est rapide, mais que Retina n'est pas pris en charge, alors la version @1x sera livrée.

Vous avez peut-être remarqué que l'image basse résolution est toujours chargée, même si le script décide ultérieurement que l'appareil de l'utilisateur est un candidat approprié pour la haute résolution. Même s'il s'agit techniquement d'un double téléchargement, ce n'est qu'un inconvénient pour ceux qui disposent d'une connexion rapide. Je suis heureux d'accepter ce compromis!

HiSRC peut gérer les images ajoutées dynamiquement à la page. Il permet également d'avoir plusieurs images, de sorte que différents recadrages et tailles peuvent être définis pour lutter contre le problème de direction artistique.

Quant à ses faiblesses, HiSRC nécessite jQuery, il ne sera donc pas utile si vous n'utilisez pas cette bibliothèque. Il nécessite également un balisage HTML personnalisé, ce n'est donc peut-être pas le meilleur choix si vous avez un grand site Web avec de nombreuses images héritées ou un CMS dans lequel vous ne pouvez pas modifier l'édition des balises d'image. Si tel est votre cas, continuez à lire !

IMAGES ADAPTATIVES

Contrairement aux deux premiers scripts, Adaptive Images Matt Wilcox(Matt Wilcox) - Il s'agit principalement d'une solution côté serveur. Cela nécessite un peu de JavaScript, mais le vrai travail est effectué à l'aide du serveur Web Apache 2, de PHP 5.x et de la bibliothèque GD.

Pour l'installer sur votre serveur Web, vous devrez modifier ou ajouter un fichier .htaccess, vider certains fichiers PHP dans le répertoire racine de votre site Web, ajouter du JavaScript aux pages (ce qui ajoutera un cookie pour enregistrer l'écran de l'utilisateur résolution) et configurez quelques points de variables de contrôle dans les fichiers PHP qui correspondent aux requêtes multimédias de votre site Web.

Les instructions d'installation sont assez verbeuses – un peu longues pour cet article. Pour plus d’informations, visitez le site officiel et cliquez sur le lien « Détails » en haut.

La meilleure chose à propos des images adaptatives est qu'elles ne nécessitent pas de balisage personnalisé pour vos images. Si vous avez réussi à l'installer et à le configurer correctement, alors c'est tout ! Le script PHP interceptera toute demande d'image, la redimensionnera à la volée selon les besoins pour les points d'arrêt individuels et l'installera automatiquement sur vos pages.

PHP propose de nombreuses options de configuration telles que la qualité de l'image, les points d'arrêt, la mise en cache et même un filtre de netteté qui peut être appliqué pour générer des images mises à l'échelle.

Il présente plusieurs limites :

Parce qu'elles nécessitent une combinaison d'Apache et de PHP, les images adaptatives peuvent ne pas convenir à la plate-forme de votre site Web ou ne pas être accessibles depuis le serveur de votre hébergeur.

Il s'appuie sur la capacité du serveur web à intercepter toutes les requêtes d'images (via le fichier .htaccess). par conséquent, si vos images se trouvent ailleurs, par exemple sur un réseau de diffusion de contenu, cela ne fonctionnera pas.

Cela ne détermine pas le débit.

Il n’est pas destiné à résoudre le problème de la direction artistique car il redimensionne uniquement les images originales. Il ne peut pas recadrer l'image originale ni créer des proportions différentes à partir de celle-ci.

Vous avez peut-être remarqué que toutes les solutions nécessitent JavaScript d'une manière ou d'une autre, et souvent une configuration détaillée. Si vous en recherchez un qui ne nécessite pas JavaScript et qui est relativement facile à mettre en œuvre, considérez ce qui suit.

SENCHA.IO SRC

Anciennement connue sous le nom de TinySrc, Sencha.io Src est une solution tierce qui agit comme intermédiaire afin que vous n'ayez rien à configurer sur le serveur. Soumettez simplement votre image aux serveurs de Sencha (avec ou sans options définies) et Sencha la traitera et renverra la version correcte dans les dimensions requises.

Disons que vous avez une grande image :

< img src = "//www.your-domain.com/path/to/image.jpg" alt = "Ma grande image" / >

Dans la version la plus simplifiée, vous pouvez ajouter un préfixe à l'attribut src depuis http://src.sencha.io/, comme ici :

< img src = "//src.sencha.io/http://www.your-domain.com/path/to/image.jpg" alt = "Ma grande image" / >

Sencha.io redimensionnera par défaut votre image pour l'adapter à la largeur de l'écran de l'appareil, en utilisant une chaîne d'agent utilisateur pour la détection. Une image de 320 px de large sera envoyée aux téléphones, de 768 px de large aux tablettes, etc.

Vous pouvez également configurer la chaîne de préfixe Sencha.io pour renvoyer des dimensions, une orientation, des dimensions en pourcentage spécifiques et un certain nombre de calculs complexes.

Sencha.io est un service gratuit pour les utilisateurs individuels et peut constituer une solution très pratique au problème des images réactives. Cependant, vous ajoutez une dépendance à l’égard d’un tiers, avec un risque de temps d’arrêt et de problèmes indépendants de votre volonté. Pesez soigneusement ces risques.

Solutions au problème de l'image réactive qui méritent d'être prises en compte

Les solutions décrites sont déjà applicables, mais ne sont pas les seules du genre. Certains des plus récents sont très compromis et je les surveille de près pour voir comment ils évoluent dans les technologies Web modernes. En particulier, vous en trouverez ci-dessous deux que vous pourriez envisager.

CAPTURE/MOBIFY.JS 2.0

La capture est une nouvelle fonctionnalité de Mobify.js 2.0 en développement qui offre un accès (ou une « capture ») au balisage HTML source avant qu'il ne soit analysé ou rendu dans le navigateur. L'accès au code source à cette étape permet de modifier l'attribut src de l'image avant que le navigateur ne la télécharge. Vous pouvez même faire une alternative à l'une des autres solutions, comme Picturefill, en cas d'échec.

Étant donné que cette technique contourne directement le préchargement natif du navigateur, c'est un point un peu controversé dans les cercles de performances Web. S’il est mal utilisé, il peut créer de réels problèmes de performances du site au lieu de les résoudre !