Il y a plusieurs choses à garder à l'esprit lors de la diffusion d'images aux téléspectateurs.
- Gardez le rapport d'image identique aux dimensions d'origine
Nous faisons cela pour éviter que l'image ne soit biaisée et pour éviter que les images soient floues. Nous pouvons soit conserver le même rapport de dimension, soit couper les parties qui ne correspondent pas.
Lorsque vous utilisez un <img>élément ou quelque chose de similaire, c'est assez simple, cela nécessite simplement d'utiliser un ensemble widthou un ensemble heightOU max-widthou max-height.
Cependant, dans le cas d'une image pleine largeur de la fenêtre, c'est un peu plus complexe. Il existe plusieurs façons CSS de le faire , dont la meilleure est background-size:covercomme le premier exemple lié dans l'article et l' émission de réponses de Talkingrock .
De plus, nous avons maintenant la possibilité d'utiliser les fonctionnalités trouvées dans la spécification d'images réactives, notamment srcsetl' <picture>élément et l' élément, qui sont très utiles. J'en parlerai plus tard dans cette réponse.
- Donnez aux spectateurs uniquement les images dont ils ont besoin
Afin d'avoir un chargement de page plus rapide et d'empêcher les utilisateurs d'avoir à transférer plus de données, il est extrêmement important de ne fournir à l'utilisateur final que la ou les images dont il a besoin, quand il en a besoin. Cela signifie que nous leur servons une image de la même taille ou juste un peu plus grande que celle de la fenêtre d'affichage qu'ils utilisent et attendent de charger des images qui ne seront pas vues immédiatement après le chargement initial de la page.
Nous pouvons servir une image de taille plus appropriée en utilisant CSS en utilisant des @mediarequêtes lorsque nous utilisons des images d'arrière-plan. Les images qui ne figurent pas dans la requête multimédia utilisée ne sont pas chargées . Je recommanderais d'utiliser au moins trois tailles de photo (ce qui signifie au moins 3 requêtes multimédias), mais en avoir quelques autres pourrait être très performant. Voici un exemple, mais il devrait généralement coïncider avec certains points d'arrêt généraux pour la mise en page de votre site.
@media (max-width: 320px) { /* For phones (this breakpoint is the one I'm least sure about) */
... background-image(imageURLforPhones.png); ...
}
@media (min-width:501px) and (max-width: 1024px) { /* For tablets and such */
... background-image(imageURLforTablets.png); ...
}
@media (min-width: 1025px) { /* For large screens */
... background-image(imageURLforLargeScreens.png); ...
}
Mais avouons-le: nous ne sommes pas bons pour choisir des points d'arrêt ni parfaits pour choisir les dimensions de l'image étant donné une certaine taille d'écran. Ne serait-ce pas formidable si nous pouvions laisser quelque chose faire «magiquement» pour nous?
La bonne nouvelle, c'est que maintenant nous le pouvons !
Avec la spécification d'images réactives, nous pouvons laisser le navigateur décider de tout cela pour nous, à condition que nous l'aidions un peu. La srcsetpropriété toujours aussi utile peut être utilisée avec un <img>ou un <picture>élément. Pour le changement de résolution comme nous le faisons ici, nous devons utiliser un <img>élément.
Ce qui suit est un exemple du code HTML nécessaire pour permettre srcsetde faire son travail. Pour en savoir plus, vous pouvez lire le grand article de Yoav Weiss sur le sujet. L'exemple en est tiré.
<img src="cat_500px.jpg"
srcset="cat_750px.jpg 1.5x, cat_1000px.jpg 2x"
width="500" alt="lolcat">
Remarque: Si vous devez diffuser la même image avec des dimensions différentes à certaines tailles de fenêtre, vous pouvez utiliser l' sizesattribut.
Je ne dis pas que l'utilisation srcsetest nécessairement meilleure que l'utilisation d'une image d'arrière-plan CSS, je n'ai pas fait assez de travail avec elle-même pour le dire à coup sûr, mais c'est potentiellement une meilleure façon.
De plus, pour améliorer les performances, nous pouvons «charger paresseusement» des images qui ne seront pas visibles initialement. Cela signifie que nous les empêchons de charger initialement mais commençons à les charger dès que le chargement de la page initiale est terminé. De cette façon, nous pouvons amener le spectateur à voir la page dès que possible et à compléter certains détails plus tard. Voici un moyen de le faire, je n'entrerai pas dans les détails pour le moment.
- Assurez-vous que le contenu de l'image que vous souhaitez afficher est affiché
Si nous avons les bonnes dimensions et d'excellentes performances, c'est génial, mais si le spectateur ne voit pas ce que nous voulons qu'il voit, cela ne sert à rien. Si nous affichons l'image complètement tout le temps, ce n'est pas un problème, mais si nous devons recadrer l'image, cela peut être un problème.
Nous pouvons recadrer background-images en utilisant CSS en utilisant background-sizeet background-position(et en quelque sorte en utilisant clip, mais cela est généralement utilisé pour des formes plus artistiques et complexes). Les détails exacts de cela varieront d'une image à l'autre en fonction de la façon dont il est mis en œuvre.
La deuxième option consiste à utiliser l' <picture>élément. Nous l'utilisons lorsque nous voulons seulement montrer une partie de l'image, comme on le voit ici , mais en voici un exemple simple dans la pratique (tiré du grand article de Jason Grigsby sur ce sujet).
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)" srcset="med.jpg">
<img src="small.jpg" alt="The president giving an award.">
</picture>
Je tiens à répéter, si vous avez seulement besoin de faire une commutation de résolution, n'utilisez pas l' <picture>élément , utilisez simplement l' <img>élément avec srcset. La seule fois où nous avons besoin de l' <picture>élément est pour cette direction artistique, c'est-à-dire l'écrêtage, etc.
Il y a aussi la possibilité de recadrer côté serveur, d'utiliser un masque SVG, ou de faire des trucs avec Canvas, mais c'est un peu en dehors de la portée de cette réponse.
Quelques autres notes
Les points d'arrêt spécifiques ne sont pas si importants. Comme pour tout design réactif, il est important de faire de notre mieux pour toutes les fenêtres, mais il n'y a pas de requêtes multimédias qui seront parfaites pour tous les sites.
Le temps de chargement des pages est très important et les images peuvent ralentir considérablement le temps de chargement initial. Assurez-vous de charger des images qui seront immédiatement vues en premier, puis d'autres. Essayez d'empêcher les images (comme les JPEG) d'afficher une partie de l'image pendant qu'elle charge le reste. Optimisez également toutes vos images afin qu'elles soient de la plus petite taille de fichier possible tout en conservant la qualité requise.
Il est important de se rappeler que les images, dans la plupart des cas, devraient être un accessoire, pas une nécessité. Je recommande de toujours tester à quoi ressemble une page Web sans images pour vous assurer qu'elle est utilisable.
Remarque : Nous pouvons utiliser un polyfill appelé Picturefill pour servir les navigateurs plus anciens qui ne prennent pas en charge la spécification d'images réactives.
