Le problème de l'affichage des images se pose depuis l'avènement de l'adaptabilité sur Internet. Nous voulons que le site soit beau sur n'importe quelle tablette, téléphone, en orientation portrait ou paysage de l'écran, ainsi que sur de superbes écrans 5K. Les écrans Retina avec une haute densité de pixels (DPI) sont également sur le marché, où les images régulières sont floues. La part du trafic mobile augmente et de grandes ressources visent à charger économiquement des images. Voyons comment ils résolvent ces problèmes sur les sites Web d'Apple, de Tilda et de la plateforme de blog Medium.
Apple: utilisateur expérimenté de l'image d'arrière-plan
Apple s'appuie sur la conception de ses produits, avec un fort accent sur la recherche d'affichage d'image. Sur le site Web d'Apple - au moment d'écrire ces lignes - l'optimisation d'image est fournie par les capacités CSS, plus précisément, l'image d'arrière-plan. Le principe clé de cette approche est une largeur d'image fixe entre les points d'arrêt, c'est-à-dire le rejet des images «en caoutchouc». Prenons l'exemple d'une des images du site
www.apple.com/mac<figure class="imac-image" data-progressive-image=""></figure>
.section-imac .imac-image { width:939px; height:631px; background-size:939px 631px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_large.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_large_2x.jpg") } } @media only screen and (max-width: 1068px) { .section-imac .imac-image { width:795px; height:536px; background-size:795px 536px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_medium.jpg") } } @media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_medium_2x.jpg") } } @media only screen and (max-width: 735px) { .section-imac .imac-image { width:365px; height:246px; background-size:365px 246px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_small.jpg") } } @media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_small_2x.jpg") } }
Pour la compatibilité entre navigateurs, trois méthodes sont immédiatement utilisées pour définir la densité de pixels de l'écran:
-webkit-min-device-pixel-ratio: 1,5
résolution minimale: 1.5dppx
résolution minimale: 144 dpi
Quels sont les avantages et les inconvénients de cette approche?
Avantages
- Facilité de mise en œuvre. C'est peut-être le moyen le plus compréhensible de changer l'image à une certaine taille et densité d'écran.
- Couvrir tous les problèmes: le problème de la taille de l'écran et de la densité de pixels est en cours de résolution.
- Pas de disposition sautante grâce à des tailles pré-fixes.
- Vous pouvez utiliser les fonctionnalités CSS intégrées pour travailler avec les arrière-plans (mode de fusion des effets, position - recadrez l'image si nécessaire).
Inconvénients
- Vous ne pouvez pas faire une image «en caoutchouc». Les tailles fixes déterminent le rapport d'aspect, donc lorsque vous essayez de compresser ou d'étirer, nous recadrons l'image ou il y a un espace vide en bas. Oui, vous pouvez utiliser padding-bottom en pourcentage au lieu de taille, mais c'est déjà une solution de contournement, un hack CSS qui complique le concept de base.
- Beaucoup de code CSS. Oui, CSS est facile à lire, mais avec un grand nombre de points d'arrêt et d'images, la taille CSS peut augmenter indéfiniment (voir ci-dessous «Les préprocesseurs CSS à la rescousse»).
- Il n'y a aucun contrôle sur le téléchargement des images. Si vous utilisez cette approche dans sa forme pure, vous chargerez toutes les images sur la page en même temps. Et CSS, contrairement à img, n'a pas de rappels de chargement qui vous permettent de contrôler si les images sont chargées ou non.
- Nécessite une précision méticuleuse. Vous devrez définir les dimensions de toutes les photos. Et non moins important, lors du remplacement d'une image par une autre, vous devrez modifier le CSS pour les nouvelles dimensions.
Les préprocesseurs CSS à la rescousse
Très probablement, vous utilisez déjà l'un des préprocesseurs CSS tels que SCSS, LESS, PostCSS ou Stylus - et ils peuvent grandement vous simplifier la vie. Essayons d'optimiser le code du site Web d'Apple en utilisant SCSS. Pour les expressions médiatiques, prenez le
mixage multimédia et écrivez notre mixage pour l'image:
@mixin image($width, $height, $url) { width: $width; height: $height; background-size: $width $height; background-repeat:no-repeat; background-image:url($url); }
Définissons les variables:
$breakpoints: ( 'phone': 735px, 'tablet': 1068px ); $media-expressions: ( 'screen': 'only screen', 'retina': '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144dpi)' );
Nous obtenons un SCSS qui compile un à un dans le CSS d'Apple:
.section-imac .imac-image { @include image(939px, 631px, "image_large.jpg"); } @include media('screen', 'retina') { .section-imac .imac-image { @include image(939px, 631px, "image_large2x.jpg"); } } @include media('screen', '<=tablet') { .section-imac .imac-image { @include image(795px, 536px, "image_medium.jpg"); } } @include media('screen', '<=tablet', 'retina') { .section-imac .imac-image { @include image(795px, 536px, "image_medium_2x.jpg"); } } @include media('screen', '<=phone') { .section-imac .imac-image { @include image(365px, 246px, "image_small.jpg"); } } @include media('screen', '<=phone', 'retina') { .section-imac .imac-image { @include image(365px, 246px, "image_small_2x.jpg"); } }
Résumé
C'est une excellente approche pour vivre avec si vous n'avez pas beaucoup de photos ou si elles changent rarement.
Tilda: image de fond avec effet de flou
Tilda est un constructeur de site qui fournit divers composants pour afficher des images. Considérez la manière la plus simple de télécharger des photos paresseuses. À quoi ressemble html avant de charger une image:
<div data-original="https://static.tildacdn.com/image.jpg" style="background: rgba(0, 0, 0, 0) url(https://static.tildacdn.com/image-small.jpg) no-repeat scroll center center / cover;"> </div>
L'effet de flou est obtenu du fait que l'aperçu a une petite taille (20x20 pixels), mais à l'aide de la propriété css de la couverture, l'image est étirée sur toute la largeur et la hauteur. Moins: ce flou n'a pas l'air très joli, mais il est très simple et ne surcharge pas le processeur.
Après le chargement, l'image en taille réelle est simplement remplacée dans le style en ligne.
Avantages
- Chargement paresseux.
- Facile à entretenir.
Inconvénients
- La même image pour n'importe quel appareil. L'adaptabilité n'est implémentée que dans les limites de la stylisation (l'image est simplement recadrée de différentes manières).
- Effet de flou laid.
- Il n'y a pas de transition entre le flou et la pleine résolution.
Résumé
Il s'agit d'une méthode de travail si vous avez besoin d'un composant simple et que vous ne voulez pas vous embêter avec six images ou plus pour différentes résolutions d'écran. Bon pour les sites avec beaucoup de photos.
Medium: toile flou
La plate-forme de blogs medium.com a fait une grande différence dans le monde des images Web en raison du bel effet de flou pour les images sous-chargées. Cet effet est obtenu en utilisant la bibliothèque stackblur-canvas.
Le HTML ressemble à un sandwich:
<img src="placeholder.jpg"> <canvas> <img src="full-size.jpg">
Cela vous permet de réaliser l'effet d'une transition en douceur. Pour une image en taille réelle, initialement l'opacité: 0 passe par la transition css à l'opacité: 1.
Blur Battle: CSS vs SVG vs Canvas
Donc, si nous ne sommes pas Apple, il sera probablement plus pratique d'utiliser le chargement paresseux des images et l'effet de flou. Pour le moment, il existe au moins trois façons de créer un effet blair (et une autre option de Tilda, mais nous ne l'envisagerons pas, car ce n'est pas un "vrai" blair).
Pourquoi est-il utile d'utiliser stackblur-canvas pour le flou si vous avez déjà un filtre pour le flou intégré dans le navigateur CSS?
- Les problèmes. Les filtres CSS et SVG flouent par défaut les bords de l'image. Il existe une solution spéciale pour le filtre svg, pour le filtre intégré: blur () vous devez utiliser le recadrage.
- Performances Stackblur-canvas fonctionne très rapidement, les filtres CSS fonctionnent encore plus vite, donc avec un grand nombre d'images floues, le choix est définitivement pour les filtres CSS.
- La beauté Ici, subjectivement, mais à mon avis, stackblur est plus beau. Un filtre svg a des artefacts moches.
Tag photo - le summum de l'évolution
Au tout début, nous avons décrit la méthode Apple et découvert que css a des expressions multimédias pour la taille de l'écran et la densité de pixels. Et ils peuvent être utilisés simultanément pour sélectionner une image spécifique à afficher. Un inconvénient important est seulement que l'image en arrière-plan ne «connaît» pas son rapport d'aspect, ne peut pas être «en caoutchouc». De plus, du point de vue de la sémantique du Web, l'utilisation de l'arrière-plan est incorrecte pour afficher toutes les images d'affilée.
La balise img peut avoir un attribut srcset, mais vous devez choisir une taille d'écran ou une densité de pixels - vous ne pouvez pas combiner ces paramètres.
Le tag d'image est exempt de cet inconvénient et, comme img, il «connaît» son rapport d'aspect. Déjà, il est supporté par
92% des navigateurs. Cette balise convient à ceux qui peuvent se permettre de ne pas s'adapter à IE.
API Intersection Observer
Enfin, parlons de la mise en œuvre d'images de chargement paresseux. L'approche classique consiste à utiliser une combinaison d'événements de défilement, de redimensionnement et de changement d'orientation et à calculer la position d'une image particulière par rapport à la zone visible de l'écran.
En 2019, vous pouvez remplacer l'ensemble de béquilles par une API de navigateur spéciale -
observateur d'intersection . Il est pris en charge par tous les navigateurs modernes. Pour les anciens iOS et IE, vous devez utiliser le
polyfill officiel
w3c .
Un regard vers l'avenir: que manque-t-il pour un bonheur complet
Nous avons donc déjà une balise d'image, qui prend en charge un bon navigateur, mais le problème du chargement paresseux demeure. Nous devons toujours compter sur nos propres implémentations basées sur l'observateur d'intersection ou une combinaison d'événements JS. Quand les navigateurs proposeront-ils une solution native? Par exemple, la version 75 de Chrome promet de prendre en charge la propriété de chargement des balises img et iframe. Vous pouvez mettre à jour vos composants pour une prise en charge native du chargement paresseux en vérifiant la présence d'une propriété dans le prototype de l'image: en cas de succès, vous pouvez abandonner votre propre code de chargement paresseux, car tout sera fait par le navigateur pour vous!
if ('loading' in HTMLImageElement.prototype)
CMS et contenu utilisateur
Quelle est la meilleure façon d'afficher des images téléchargées par les utilisateurs? En règle générale, cela vaut la peine de tout faire aussi simple que possible, sans le forcer à télécharger des images séparément pour le téléphone, la tablette et le bureau. Nous n'avons donc qu'une seule image pour tous les appareils. Dans une telle situation, l'approche Tilda (pour une simplicité maximale) ou Medium est parfaite - si vous voulez créer un véritable effet de flou, en remplaçant peut-être stackblur-canvas par css: blur () standard pour de meilleures performances.
Résumé
Il n'y a toujours pas de façon unique et «la plus correcte» d'afficher les images. Si vous devez prendre en charge d'anciens navigateurs et IE, votre choix est une image d'arrière-plan avec des expressions multimédias et img pour les cas simples. Pour les nouveaux projets, il peut être plus pratique de remplacer l'image d'arrière-plan par l'image. Si vous voulez faire un beau chargement paresseux, essayez stackblur-canvas, et si les performances sont importantes pour vous, puis filtrez CSS ou images étirées sur un fond de style tilde.