Images responsives

Une image vaut 1 000 mots, et les images font partie intégrante de chaque page. Mais ils représentent aussi souvent la plupart des octets téléchargés. Avec le Responsive web design, non seulement nos mises en page peuvent changer en fonction des caractéristiques de l'appareil, mais aussi les images.

Le responsive web design signifie que non seulement nos mises en page peuvent changer en fonction de l'appareil mais le contenu peut lui aussi changer. Par exemple, en cas de résolution (x2), les graphismes haute résolution assurent la netteté. Une image qui fait 50% de largeur peut fonctionner correctement lorsque la largeur du navigateur est de 800 pixels, mais utilise trop d'espace sur un téléphone étroit et nécessite la même surcharge de bande passante lorsqu'il est réduit pour s'adapter à un écran plus petit.

Direction artistique

Dans d'autres cas, l'image doit être modifiée de façon plus drastique : les proportions, le recadrage et même le remplacement de l'ensemble de l'image. Dans ce cas, la modification de l'image est généralement appelée direction artistique. Voir responsiveimages.org/demos/ pour en savoir plus exemples.

Images responsives

Saviez-vous que les images représentent en moyenne plus de 60% des octets nécessaires au chargement d'une page Web ?

Dans ce cours, vous apprendrez à utiliser des images sur le Web moderne, afin que vos images s'affichent correctement et se chargent rapidement sur n'importe quel appareil.

En cours de route, vous acquérez de nombreuses compétences et techniques afin de d'intégrer des images responsives dans votre workflow de développement. D'ici la fin de vous développerez avec des images qui s'adaptent et répondent différentes tailles de fenêtre d'affichage et différents scénarios d'utilisation.

Ce cours est proposé sans frais via Udacity

Suivre la formation

Images dans le balisage

L'élément img est puissant : il télécharge, décode et affiche et les navigateurs récents sont compatibles avec de nombreux formats d'image. Inclus utilisables sur différents appareils n'est pas différent de celui d'un ordinateur de bureau, quelques ajustements mineurs sont nécessaires pour créer une bonne expérience.

Résumé

• Utilisez des tailles relatives pour les images afin d'éviter qu'elles ne débordent accidentellement le conteneur.
• Utilisez l'élément picture lorsque vous souhaitez spécifier différentes images en fonction sur les caractéristiques de l'appareil (direction artistique).
• Utilisez srcset et le descripteur x dans l'élément img pour donner des indications aux au navigateur la meilleure image à utiliser pour choisir parmi différentes densités.
• Si votre page ne contient qu'une ou deux images et si celles-ci ne sont pas utilisées ailleurs sur votre site, envisagez d'utiliser des images intégrées pour réduire le nombre de demandes de fichiers.

Utiliser des tailles relatives pour les images

N'oubliez pas d'utiliser des unités relatives lorsque vous spécifiez la largeur des images afin d'éviter qu'elles ne soient de dépasser accidentellement la fenêtre d'affichage. Par exemple, width: 50%; provoque La largeur de l'image doit correspondre à 50% de l'élément conteneur (et non à 50% de la fenêtre d'affichage ou 50% de la taille de pixel réelle).

Étant donné que le CSS autorise le contenu à dépasser de son conteneur, vous devrez peut-être utiliser max- largeur: 100% pour éviter que les images et autres contenus débordent. Exemple :

img, embed, object, video {
    max-width: 100%;
}

Veillez à fournir des descriptions pertinentes via l'attribut alt sur img éléments ; Elles rendent votre site plus accessible en fournissant du contexte à l'écran les lecteurs et d’autres technologies d'assistance.

Améliorez les imgs avec srcset pour les appareils à haute résolution.

L'attribut srcset améliore le comportement du l'élément img, ce qui permet de fournir facilement plusieurs fichiers image. pour différentes caractéristiques d'appareil. Semblable à image-set Fonction CSS natif en CSS, srcset permet au navigateur de choisir le meilleur en fonction des caractéristiques de l'appareil, par exemple en utilisant une image x2 sur un écran x2 et potentiellement, à l'avenir, une image x1 sur un appareil 2x sur un réseau à bande passante limitée.

<img src="photo.png" srcset="photo@2x.png 2x" ...>

Sur les navigateurs qui ne sont pas compatibles avec srcset, il utilise simplement le paramètre par défaut spécifié par l'attribut src. C'est pourquoi il est important de toujours inclure une image x1 qui peut être affichée sur n'importe quel appareil, quel que soit des fonctionnalités. Lorsque srcset est pris en charge, la liste des valeurs séparées par une virgule image/conditions est analysée avant d'effectuer toute requête, et seuls les éléments les plus l'image appropriée est téléchargée et affichée.

Bien que les conditions puissent inclure tout, de la densité en pixels à la largeur et seule la densité de pixels est compatible aujourd'hui. Pour équilibrer l'actuel avec les futures fonctionnalités, continuez de ne pas fournir l'image x2 dans l'attribut.

Direction artistique dans les images responsives avec picture

Pour modifier les images en fonction des caractéristiques de l'appareil utilisez l'élément picture. La L'élément picture définit une solution déclarative pour de fournir plusieurs versions d'une image en fonction comme la taille de l'appareil, la résolution de l'appareil, l'orientation, et plus encore.

Utiliser l'élément picture lorsqu'une source d'image existe en plusieurs densités, ou lorsqu'une conception réactive impose une une image légèrement différente sur certains types d'écrans. Semblable à la section l'élément video, plusieurs éléments source peuvent être inclus, ce qui permet de spécifier différents fichiers image en fonction des requêtes média ou du format d'image.

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

Essayer

Dans l'exemple ci-dessus, si la largeur du navigateur est d'au moins 800 pixels, head.jpg ou head-2x.jpg est utilisé, selon la résolution de l'appareil. Si le la taille du navigateur est comprise entre 450 et 800 pixels, l'utilisation de head-small.jpg ou de head-small- 2x.jpg est toujours utilisée, en fonction de la résolution de l'appareil. Pour la largeur d'écran inférieures à 450 px et rétrocompatibilité lorsque l'élément picture n'est pas pris en charge, le navigateur affiche l'élément img à la place et doit toujours être inclus.

Images de taille relative

Lorsque la taille finale de l'image n'est pas connue, il peut être difficile de spécifier une de densité pour les sources de l'image. Cela est particulièrement vrai pour les images qui s'étendent sur une largeur proportionnelle du navigateur et sont fluides, en fonction la taille du navigateur.

Au lieu de fournir des tailles et des densités d'image fixes, vous pouvez spécifier la taille de chaque image fournie en ajoutant un descripteur de largeur avec la taille d'image, ce qui permet au navigateur de calculer automatiquement la valeur et sélectionnez la meilleure image à télécharger.

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

Essayer

L'exemple ci-dessus affiche une image dont la taille est la moitié de la largeur de la fenêtre d'affichage (sizes="50vw"), et selon la largeur du navigateur et le pixel de l'appareil permet au navigateur de choisir la bonne image, quelle que soit sa taille. la fenêtre du navigateur. Par exemple, le tableau ci-dessous indique quelle image navigateur choisit:

Largeur du navigateur	Rapport de pixels de l'appareil	Image utilisée	Résolution effective
400px	1	200.jpg	x 1
400px	2	400.jpg	2x
320px	2	400.jpg	2,5 x
600px	2	800.jpg	2,67x
640px	3	1000.jpg	3,125x
1100px	1	800.png	x 1,45

Tenir compte des points d'arrêt dans les images responsives

Dans de nombreux cas, la taille de l'image peut changer en fonction de la mise en page du site. des points d'arrêt. Par exemple, sur un petit écran, vous pouvez souhaiter que l'image s'étendent sur toute la largeur de la fenêtre d'affichage, tandis que sur les grands écrans, prendre une petite proportion.

<img src="400.png"
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

Essayer

Dans l'exemple ci-dessus, l'attribut sizes utilise plusieurs requêtes média pour spécifier la taille de l'image. Lorsque la largeur du navigateur est supérieure à 600 pixels, l'image représente 25% de la largeur de la fenêtre d'affichage. lorsqu'elle est comprise entre 500 pixels et 600 pixels, l'image fait 50% de la largeur de la fenêtre d'affichage. et de moins de 500 pixels, est en pleine largeur.

Rendre les images du produit extensibles

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Les clients veulent voir ce qu'ils achètent. Sur les sites de vente au détail, les utilisateurs s'attendent à en vue d'afficher des gros plans en haute résolution sur les produits les détails et participants à l'étude ont été frustrés s'ils n'y sont pas parvenus.

Le J est un bon exemple d'images extensibles tactiles. Site de l'équipage. Une superposition qui disparaît indique qu'il est possible d'appuyer sur une image, ce qui dans une image avec des détails précis visibles.

Autres techniques d'image

Images compressées

La technique d'image compressée diffuse une image x2 hautement compressée sur tous les appareils, quel que soit le de l'appareil. Selon le type d'image et le niveau compression, la qualité de l'image ne semble pas changer, mais la taille du fichier diminue de manière significative.

Essayer

Remplacement d'image JavaScript

Le remplacement d'image JavaScript vérifie les capacités de l'appareil et est une bonne chose. » Vous pouvez déterminer le rapport de pixels de l'appareil window.devicePixelRatio, obtenir la largeur et la hauteur de l'écran, et même potentiellement une connexion réseau reniflant via navigator.connection ou émettant un faux requête. Une fois toutes ces informations collectées, vous pouvez à charger.

L'un des grands inconvénients de cette approche est que l'utilisation de JavaScript signifie que vous retarder le chargement de l'image jusqu'à ce que l'analyseur anticipé ait au moins terminé. Ce signifie que le téléchargement des images ne commencera qu'après l'événement pageload les incendies. De plus, il est très probable que le navigateur télécharge à la fois les fichiers 1x et 2x ce qui augmente le poids de la page.

Images intégrées: matricielles et vectorielles

Il existe deux manières fondamentalement différentes de créer et de stocker des images : cela affecte la façon dont vous déployez les images de façon responsive.

Les images matricielles, comme les photos et autres images, représentées par une grille de points de couleur individuels. Les images matricielles peuvent être ajoutées à partir d'un appareil photo ou d'un scanner, ou être créé avec l'élément HTML canvas. Formats comme PNG, JPEG et WebP sont utilisés pour stocker des images matricielles.

Les images vectorielles, comme les logos et les dessins au trait, sont définies comme un ensemble courbes, lignes, formes, couleurs de remplissage et dégradés. Vous pouvez créer des images vectorielles à des programmes comme Adobe Illustrator ou Inkscape, ou manuscrites dans du code à l'aide de dans un format vectoriel, comme SVG.

SVG

Le format SVG permet d'inclure des graphiques vectoriels responsifs dans une page Web. La l'avantage des formats de fichiers vectoriels par rapport aux formats de fichiers matriciels est que le navigateur peut effectuer le rendu d'une image vectorielle de n'importe quelle taille. Les formats vectoriels décrivent la géométrie l'image (la façon dont elle est construite à partir de lignes, de courbes, de couleurs, etc.). Les formats matriciels, en revanche, ne contiennent que des informations sur les points individuels. de couleur. Le navigateur doit donc deviner comment remplir les blancs lors de la mise à l'échelle.

Voici deux versions de la même image: une image PNG à gauche et une image SVG sur vers la droite. Le fichier SVG s'affiche correctement, quelle que soit la taille, tandis que le fichier PNG à côté un rendu flou sur les écrans plus grands.

Si vous souhaitez réduire le nombre de demandes de fichiers envoyées par votre page, vous pouvez coder au format SVG ou URI de données. Si vous affichez le code source de cette page, vous constaterez que les deux logos ci-dessous sont déclarés de manière intégrée: un URI de données et un SVG.

Le format SVG est excellent sur mobile et ordinateur. et les outils d'optimisation peuvent considérablement la taille du SVG. Les deux logos SVG intégrés suivants ont l'apparence suivante : identiques, mais l'un fait environ 3 Ko et l'autre seulement 2 Ko:

URI de données

Les URI de données permettent d'intégrer un fichier, tel qu'une image, en le définissant la valeur "src" d'un élément img en tant que chaîne encodée en base64 à l'aide de la le format suivant:

<img src="data:image/svg+xml;base64,[data]">

Le début du code pour le logo HTML5 ci-dessus se présente comme suit:

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

(La version complète contient plus de 5 000 caractères !)

Glisser-déposer d’un outil de déposer tel que jpillora.com/base64-encoder sont disponibles pour convertir des fichiers binaires tels que des images en URI de données. Tout comme les fichiers SVG, Les URI de données sont bien compatibles sur les appareils mobiles et des navigateurs pour ordinateur.

Intégration dans CSS

Les URI de données et les SVG peuvent également être intégrés en CSS, ce qui est pris en charge sur à la fois sur mobile et ordinateur. Voici deux images identiques implémentées en tant que des images de fond dans CSS ; un URI de données et un SVG:

Fournisseurs de l'intégration et Inconvénients

Le code intégré pour les images peut être long, en particulier les URI de données. Pourquoi ? voudriez-vous l'utiliser ? Pour réduire le nombre de requêtes HTTP Les SVG et les URI de données peuvent activer une page Web entière, y compris les images, CSS et JavaScript, à récupérer avec une seule demande.

L'inconvénient:

• Sur mobile, les URI de données peuvent être considérablement plus longs de s'afficher sur les mobiles que les images provenant d'un src externe.
• Les URI de données peuvent augmenter considérablement la taille d'une requête HTML.
• Elles ajoutent de la complexité à votre balisage et à votre flux de travail.
• Le format de l'URI de données est considérablement plus grand que le binaire (jusqu'à 30%). ne réduit donc pas la taille totale du téléchargement.
• Les URI de données ne peuvent pas être mis en cache. Ils doivent donc être téléchargés pour chaque page sur laquelle ils sont utilisés.
• Elles ne sont pas prises en charge dans IE 6 et 7, prise en charge incomplète dans IE8.
• Avec le protocole HTTP/2, la réduction du nombre de demandes d'éléments devient moins une priorité.

Comme pour tout élément responsif, vous devez tester ce qui fonctionne le mieux. Utiliser l'option "Développeur" des outils pour mesurer la taille du fichier de téléchargement, le nombre de demandes et le nombre total la latence. Les URI de données peuvent parfois être utiles pour les images matricielles, par exemple sur une page d'accueil qui ne contient qu'une ou deux photos qui ne sont pas utilisées ailleurs. Si vous d'intégrer des images vectorielles, le format SVG est une bien meilleure option.

Images dans CSS

La propriété CSS background est un outil performant permettant d'ajouter des images complexes. à des éléments, ce qui facilite l'ajout de plusieurs images et la répétition de celles-ci, et plus encore. Lorsqu'elle est combinée à des requêtes média, la propriété d'arrière-plan devient Il est encore plus efficace d'utiliser le chargement conditionnel d'image en fonction de l'écran la résolution, la taille de la fenêtre d'affichage, etc.

Résumé

• Utiliser la meilleure image compte tenu des caractéristiques de l'écran (penser à l'écran) la taille de l'appareil, la résolution de l'appareil et la mise en page.
• Modifiez la propriété background-image dans CSS pour les écrans à haute résolution à l'aide de des requêtes média avec min-resolution et -webkit-min-device-pixel-ratio.
• Utilisez srcset pour fournir des images haute résolution en plus de l'image 1x dans le balisage.
• Tenir compte des coûts liés aux performances lors du remplacement d'images JavaScript ou lors de la diffusion d'images haute résolution hautement compressées des appareils de résolution inférieure.

Utiliser des requêtes média pour le chargement conditionnel d'image ou la direction artistique

Les requêtes média ont un impact sur la mise en page, vous pouvez également les utiliser pour Charger des images de manière conditionnelle ou indiquer une direction artistique en fonction de la fenêtre d'affichage la largeur.

Dans l'exemple ci-dessous, sur les petits écrans, seul small.png est téléchargée et appliquée au contenu div, alors que sur des écrans plus grands background-image: url(body.png) est appliqué au corps et background-image: url(large.png) est appliqué au contenu div.

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

Essayer

Utiliser l'ensemble d'images pour fournir des images haute résolution

La fonction image-set() dans CSS améliore le comportement de la propriété background, ce qui facilite la fourniture de plusieurs fichiers image pour différents appareils caractéristiques. Cela permet au navigateur de choisir la meilleure image en fonction les caractéristiques de l'appareil, par exemple en utilisant une image x2 sur un écran x2, ou une image x1 sur un appareil x2 sur un réseau à bande passante limitée.

background-image: image-set(
    url(icon1x.jpg) 1x,
    url(icon2x.jpg) 2x
);

En plus de charger la bonne image, le navigateur la met à l'échelle en conséquence. En d'autres termes, le navigateur suppose que les images x2 sont deux fois plus grande qu'une image x1, ce qui réduit l'image x2 par un facteur de 2, de sorte que que l'image semble avoir la même taille sur la page.

La compatibilité avec image-set() est encore récente et n'est prise en charge qu'avec Chrome et Safari avec le préfixe de fournisseur -webkit. Veillez à inclure un image de remplacement lorsque image-set() n'est pas pris en charge. Par exemple:

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
  background-image: image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
}

Essayer

Le code ci-dessus charge l'élément approprié dans les navigateurs qui prennent en charge image-set. sinon elle revient à l'élément x1. La mise en garde évidente est que, si La compatibilité avec les navigateurs image-set() est faible. La plupart des navigateurs obtiennent l'élément x1.

Utilisez des requêtes média pour fournir des images haute résolution ou une direction artistique

Les requêtes média peuvent créer des règles en fonction device pixel ratio (ratio de pixels de l'appareil) ce qui permet de spécifier des images différentes pour les écrans x2 et 1x.

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
    /* High dpi styles & resources here */
}

Chrome, Firefox et Opera sont tous compatibles avec la norme (min-resolution: 2dppx), tandis que les navigateurs Safari et Android requièrent tous deux le préfixe de l'ancien fournisseur sans l'unité dppx. N'oubliez pas que ces styles ne sont chargés appareil correspondant à la requête média, et vous devez spécifier des styles pour le cas de base. Cela permet également de s'assurer que quelque chose s'affiche si le navigateur ne prend pas en charge les requêtes média spécifiques à la résolution.

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

Essayer

Vous pouvez également utiliser la syntaxe de largeur minimale pour afficher d'autres images en fonction de la taille de la fenêtre d'affichage. L'avantage de cette technique est que l'image téléchargée si la requête média ne correspond pas. Par exemple, bg.png n'est téléchargée et appliquée à body si la largeur du navigateur est supérieure ou égale à 500 pixels:

@media (min-width: 500px) {
    body {
    background-image: url(bg.png);
    }
}

Utiliser le format SVG pour les icônes

Lorsque vous ajoutez des icônes à votre page, utilisez des icônes SVG dans la mesure du possible et les caractères Unicode.

Résumé

• Utilisez le format SVG ou Unicode pour les icônes plutôt que les images matricielles.

Remplacer les icônes simples par unicode

De nombreuses polices sont compatibles avec une multitude de glyphes Unicode, qui peuvent être utilisés au lieu d'images. Contrairement aux images, les polices Unicode s'adaptent bien quelle que soit leur taille à l'écran.

Au-delà du jeu de caractères normal, Unicode peut inclure des symboles pour flèches (←), opérateurs mathématiques (√), formes géométriques (★), contrôler les images (▶), notation musicale (♬), des lettres grecques (Ω), et même des pièces d'échecs (♞).

L'inclusion d'un caractère Unicode s'effectue de la même manière que les entités nommées: &#XXXX, où XXXX représente le numéro de caractère Unicode. Exemple :

You're a super ★

Vous êtes un super ★

Remplacer les icônes complexes par le format SVG

Pour répondre à des exigences plus complexes, les icônes SVG sont généralement légères, faciles à utiliser et peuvent être stylisées avec CSS. Le format SVG présente de nombreux avantages par rapport images matricielles:

• Ce sont des graphiques vectoriels dont l'échelle est illimitée.
• Les effets CSS, comme la couleur, les ombres, la transparence et les animations, sont simple.
• Les images SVG peuvent être intégrées directement dans le document.
• Ils sont sémantiques.
• Elles offrent une meilleure accessibilité grâce aux attributs appropriés.

With SVG icons, you can either add icons using inline SVG, like
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

Essayer

Utilisez les polices d'icône avec précaution

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Les polices d’icône sont populaires et peuvent être faciles à utiliser, mais elles présentent quelques inconvénients par rapport aux icônes SVG:

• Ce sont des graphiques vectoriels dont l'échelle est illimitée anticrénelées, les icônes ne sont pas aussi nettes que prévu.
• Styles limités avec CSS
• Le positionnement parfait au pixel peut s'avérer difficile, en fonction de la hauteur de la ligne, l'espacement entre les lettres, etc.
• Ils ne sont pas sémantiques et peuvent être difficiles à utiliser avec des lecteurs d'écran ou d'autres technologies d'assistance.
• Si leur champ d'application n'est pas adapté, ils peuvent entraîner une taille de fichier importante, car seule l'utilisation d'un un petit sous-ensemble des icônes disponibles.

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

Essayer

Des centaines de polices d'icônes sans frais et payantes sont disponibles, y compris Parfait, Pictos et Glyphicons.

Veillez à équilibrer le poids de la requête HTTP supplémentaire et la taille du fichier avec le besoin des icônes. Par exemple, si vous n'avez besoin que d'une poignée d'icônes, il peut être préférable d'utiliser une image ou un sprite.

Optimiser les performances des images

Les images représentent souvent la majeure partie des octets téléchargés et occupent souvent une part importante de l'espace visuel sur la page. Par conséquent, l'optimisation les images peuvent souvent permettre de réaliser des économies d'octets plus importantes et d'améliorer les performances d'amélioration pour votre site Web: moins le navigateur doit télécharger d'octets, moins il y a de concurrence pour la bande passante du client et plus la le navigateur peut télécharger et afficher tous les éléments.

Résumé

• Ne vous contentez pas de choisir un format d'image au hasard, formats disponibles et utilisez celui qui convient le mieux.
• Incluez des outils d'optimisation et de compression d'images dans votre workflow pour réduire les tailles de fichier.
• Réduisez le nombre de requêtes HTTP en plaçant les images fréquemment utilisées dans des sprites.
• Pour améliorer le temps de chargement initial et réduire la taille de la page initiale, envisagez de ne charger les images qu'après avoir fait défiler la page jusqu'à l'affichage.

Choisir le bon format

Il existe deux types d'images à prendre en compte: images vectorielles et des images matricielles. Pour les images matricielles, vous devez également choisir le bon format de compression, Exemple: GIF, PNG, JPG.

Les images matricielles, comme les photographies et autres images, sont représentées sous forme de grille. de points ou de pixels individuels. Les images matricielles proviennent généralement d'un appareil photo ou peuvent être créées dans le navigateur avec l'élément canvas. En tant que la taille de l'image augmente, tout comme la taille du fichier. Lorsqu'elles sont mises à l'échelle leur taille d'origine, les images matricielles deviennent floues, car le navigateur doit deviner comment remplir les pixels manquants.

Les images vectorielles, comme les logos et les dessins au trait, sont définies par un ensemble de courbes, lignes, formes et couleurs de remplissage. Les images vectorielles sont créées à l'aide de programmes tels que Adobe Illustrator ou Inkscape et enregistrés dans un format vectoriel comme SVG Les images vectorielles étant basées sur primitives simples, elles peuvent être mises à l'échelle sans aucune perte de qualité ou un changement de taille de fichier.

Pour choisir le format approprié, vous devez tenir compte à la fois des l'origine de l'image (matricielle ou vectorielle) et son contenu (couleurs, animation, texte, etc.). Aucun format ne convient à tous les types d'images, et chacun a ses propres points forts et ses points faibles.

Pour choisir le format approprié, commencez par suivre ces consignes:

• Utilisez JPG pour les images photographiques.
• Utilisez SVG pour les illustrations vectorielles et les graphiques en couleurs unies comme les logos et les dessins au trait. Si l'art vectoriel n'est pas disponible, essayez WebP ou PNG.
• Utilisez PNG plutôt que GIF, car il offre plus de couleurs et offre de meilleures offres. les rapports de compression.
• Pour les animations plus longues, envisagez d'utiliser <video>, qui fournit une meilleure image et permet à l'utilisateur de contrôler la lecture.

Réduire la taille du fichier

Vous pouvez réduire considérablement la taille du fichier image en effectuant un "post-traitement" les images après l'enregistrement. Il existe un certain nombre d'outils de compression d'image : sans perte, en ligne, interface graphique, ligne de commande. Dans la mesure du possible, d'automatiser l'optimisation des images pour l'intégrer le workflow de ML.

Plusieurs outils permettent d'effectuer une compression plus poussée sans perte sur JPG et PNG sans aucune incidence sur la qualité de l'image. Pour JPG, essayez jpegtran ou jpegoptim (disponible uniquement sur Linux ; s'exécute avec l'option --strip-all). Pour PNG, essayez OptiPNG ou PNGOUT

Utiliser des sprites

Le spriting CSS est une technique qui consiste à combiner plusieurs images en une seule "feuille de sprites" l'image. Vous pouvez ensuite utiliser des images individuelles en spécifiant de l'image de fond d'un élément (la feuille de sprites) et un décalage pour afficher la bonne pièce.

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px;
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

Essayer

La sprite a l'avantage de réduire le nombre de téléchargements requis pour obtenir plusieurs images, tout en activant la mise en cache.

Envisager le chargement différé

Le chargement différé permet d'accélérer considérablement le chargement des pages incluant de nombreuses pages en dessous de la ligne de flottaison en les chargeant si nécessaire ou lorsque le chargement et l'affichage du contenu sont terminés. En plus des performances , l'utilisation du chargement différé permet de créer des expériences de défilement infini.

Soyez prudent lorsque vous créez des pages à défilement infini, car le contenu est chargé en tant que il devient visible, les moteurs de recherche risquent de ne jamais le voir. De plus, aux utilisateurs qui recherchent des informations qu'ils s'attendent à voir dans le pied de page, ne voient jamais le pied de page, car le nouveau contenu est toujours chargé.

Évitez complètement les images

Parfois, la meilleure image n'est pas du tout une image. Dans la mesure du possible, utilisez les fonctionnalités natives du navigateur afin qu'elles fournissent des de Google Cloud. Les navigateurs génèrent des éléments visuels qui auraient auparavant nécessaire images. Cela signifie que les navigateurs n'ont plus besoin de télécharger des images distinctes ce qui permet d'éviter les images mal mises à l'échelle. Vous pouvez utiliser des caractères Unicode pour afficher les icônes.

Placez le texte dans le balisage plutôt que dans les images

Dans la mesure du possible, le texte doit se substituer à du texte et ne doit pas être intégré dans des images. Pour par exemple en utilisant des images pour les titres ou en plaçant des coordonnées de numéros de téléphone ou d'adresses : l'insertion directe dans les images empêche les utilisateurs copier et coller les informations ; cela rend les informations inaccessibles lecteurs d'écran et il ne répond pas. Placez plutôt le texte dans votre balisage et, si nécessaire, utiliser des polices Web pour obtenir le style dont vous avez besoin.

Utiliser du code CSS pour remplacer des images

Les navigateurs récents peuvent utiliser les fonctionnalités CSS pour créer des styles qui auraient les images requises. Par exemple, vous pouvez créer des dégradés complexes à l'aide du background, les ombres peuvent être créées à l'aide de box-shadow, et sont arrondies Vous pouvez ajouter des angles à l'aide de la propriété border-radius.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit pellentesque amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Ornare de Duis fringilla dui non vehicula. In hac habitasse platea dictumst. Dönec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.

<style>
    div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
    }
</style>

Gardez à l'esprit que l'utilisation de ces techniques nécessite des cycles de rendu, ce qui peut avoir un impact important sur les mobiles. Si vous vous en servez trop, vous perdrez tout avantage dont vous pourriez et peut nuire aux performances.