Meilleures pratiques pour les images de navigateur pleine largeur?

Quelles sont les meilleures pratiques suivies par les utilisateurs en ce qui concerne les images sur des fenêtres plus grandes?

Quelle taille de navigateur devrions-nous concevoir? Ce qui signifie comment gérer les moniteurs haute résolution et quel% des utilisateurs ont de grands écrans?

Comment pouvons-nous gérer au mieux la hauteur des images de héros, car nous devons vraiment décider avec quelle résolution d'écran aller?

Bien sûr, tout cela en respectant la philosophie de la grille à 12 colonnes;)

Asprilla,

Bien que les commentaires ci-dessus apportent de très bons points techniques, je suggère d'adapter votre travail à un client particulier, qui commence par regarder Google Analytics - Reporting / Technology / Browser & OS / Screen Resolution de leur site actuel. De cette façon, vous dépenserez votre temps et le budget de votre client à bon escient en répondant aux besoins spécifiques de votre client plutôt qu'en appliquant des directives générales. En fait, nous devions parfois conseiller à nos clients de ne pas faire de conception entièrement réactive simplement parce que leur trafic non lié au bureau ne justifierait pas les dépenses.

Il y a plusieurs choses à garder à l'esprit lors de la diffusion d'images aux téléspectateurs.

1. 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.

2. 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.

3. 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.

Consignes pour choisir les dimensions de votre image de navigateur pleine largeur

J'ai appris cela grâce à la recherche tout au long de l'année dernière et à l'expérimentation au cours des derniers jours pour ce cas d'utilisation spécifique.

• Choisissez une image avec un seul point focal, ou aucun point focal du tout.

• Votre fichier image source devra être énorme (minimum 5000 x 5000) si vous souhaitez servir de nombreuses images dépendantes de la résolution.

• Pour la version portrait, vous devez utiliser un format d'image de 9w:16h.

• Pour la version paysage, vous devez utiliser un format d'image de 4w:3h.

• Dans les deux images, il y a une zone de sécurité du contenu où vous pouvez garantir qu'une partie de l'image sera vue ou au-dessus de la ligne de flottaison comme on dit en Klingon.

• Les zones de sécurité de contenu pour les images, à partir de ces cinq rapports d'aspect: 3:2, 4:3, 5:3, 16:10et 16:9, est à peu près les trois quarts des deux images.

  

• srcsetest le Saint Graal de la mise en œuvre d'images réactives. <picture>sera probablement encore mieux à l'avenir, mais srcsetest roi pour l'instant. Consultez la réponse de Zach Saucier pour plus d'informations à ce sujet.

Voici un exemple que j'ai créé après une expérimentation approfondie.

Ces images devraient couvrir presque tous les écrans. Redimensionnez le panneau d'aperçu pour voir les différentes images. Le repli devrait être sur l'une des images de milieu de gamme, mais j'ai lié à la page où j'ai trouvé l'image à la place comme une sorte d'attribution mineure.

J'ai essayé de garder cette réponse brève (réécrite 3 fois), même si je peux fournir les justifications de mes affirmations, je ne l'ai pas fait car cela alourdirait beaucoup cette réponse. J'espère que vous pouvez déduire les justifications de l'image ci-dessus et voir les preuves de mon exemple jsFiddle.

Sur un 4:3écran:

Sur un écran super large:

Sur un mobile portrait:

Voici quelques informations supplémentaires qui pourraient vous être utiles.

Statistiques de taille d'écran

Les tailles d'écran populaires varient, alors voici quelques sites statistiques qui répertorient l'utilisation de la taille de l'écran en pourcentage, les tendances du navigateur, les systèmes d'exploitation et plus encore.

1. http://www.w3schools.com/browsers/browsers_display.asp
2. http://www.netmarketshare.com/

Héros et grandes images

Il existe une excellente solution CSS simple pour Hero et d'autres grandes images. Ça l'est background-size:cover. Il est utile car il couvre la totalité du div sans déformer l'image à différentes tailles d'écran, ou si le div parent change de forme (plus / moins de texte ...). Cela fonctionne en écrêtant des morceaux de l'image pour maintenir des proportions appropriées, et vous pouvez également positionner l'arrière-plan de sorte que les parties importantes soient toujours affichées (centre au centre, en bas à droite ...).

Un autre avantage est qu'il affiche l'image en arrière-plan, de sorte que du texte et d'autres informations peuvent être facilement ajoutés à la div. Il fonctionne également comme arrière-plan en taille réelle. Voici un exemple JSFiddle pour jouer avec qui utilise l'arrière-plan: la couverture comme arrière-plan plein écran, et un autre qui utilise une div Hero . Redimensionnez la fenêtre JSFiddle et modifiez le positionnement CSS pour le voir fonctionner.

background-image:url(http://i.imgur.com/OaE8VAj.jpg);
background-repeat:no-repeat;
background-position:bottom right;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;

La prise en charge du navigateur pour la taille d' arrière-plan (CanIUse.com) est très bonne, et voici un correctif pour IE7 et IE8 .

Une solution populaire pour toutes les tailles d'affichage des appareils (ordinateur de bureau / tablette / ordinateur de poche) consiste à créer un site réactif qui se repositionne pour s'adapter aux différentes tailles d'écran, de la télévision grand écran à l'ordinateur de poche. Si cela vous intéresse, voici un bon tutoriel de niveau intermédiaire: http://www.elated.com/articles/responsive-web-design-demystified/ .

Les conceptions réactives fonctionnent avec des dispositions de grille, et si le site est basé sur des pixels, il existe une formule qui convertit les tailles de pixels en pourcentage équivalent. Une recherche rapide à l'aide des termes «grille réactive à 12 colonnes» et «calculatrice de grille réactive à colonnes» a révélé de nombreuses ressources utiles comme des wireframes réactifs à 12 colonnes, des calculatrices et plus encore. Voici un exemple: http://onepcssgrid.mattimling.com/

La version courte

Essayez de concevoir pour la compatibilité avec la plus petite résolution de fenêtre:

Ordinateurs de bureau: 800x600 / 1024x768 (en pixels)

téléphones mobiles plus anciens: 320x480 (en pixels)

tablettes: 800x1280 (en pixels)

En choisissant la résolution la plus basse, vous vous assurez que la conception fonctionnera pour les personnes ayant des résolutions plus petites ainsi que des résolutions plus grandes.

La version longue

Il me semble que vous êtes tous deux intéressés par les fenêtres pour différents appareils plutôt que par la taille du navigateur.

Le navigateur est la fenêtre complète utilisée pour la navigation Web visuelle. Cette zone comprend l'entrée d'URL de navigation, les onglets et les barres d'outils.

La fenêtre d'affichage est la zone du navigateur qui affiche un site Web rendu. C'est généralement en dessous des barres d'outils et de l'URL. C'est le domaine qui intéresse généralement les designers.

Quant à décider de la résolution de votre écran, vous devez d'abord vous demander ceci: sur quoi sera-t-il principalement affiché? S'il est destiné à un usage interne dans une entreprise, nous pouvons supposer qu'il sera très probablement utilisé sur un ordinateur portable ou de bureau. S'il était destiné à être utilisé en déplacement, nous pouvons supposer qu'il sera principalement utilisé sur les appareils mobiles.

La tendance actuelle pour la conception de sites Web est "Mobile First". C'est là qu'un site Web est conçu pour les mobiles avant d'être réactif pour les autres plateformes. En effet, de plus en plus de personnes utilisent des appareils mobiles pour accéder à Internet plutôt que des ordinateurs de bureau ou des ordinateurs portables.

Les tailles de fenêtre peuvent être très utiles pour en savoir plus sur les dimensions de fenêtre. Ce site donne la fenêtre pour de nombreux appareils mobiles et quelques ordinateurs de bureau. Il devrait vous permettre d'explorer la variété des tailles de fenêtres.