Get best of the week

[signet] Travailler avec des images sur le Web

L'une des décisions qu'un développeur front-end doit prendre lors de la création d'un site Web concerne le choix de la manière d'inclure des images dans les pages Web. Cette méthode peut consister à utiliser une balise HTML <img>. Cela peut être une propriété CSS backgroundou une balise d' <image>élément <svg>. Il est très important de choisir la bonne approche pour travailler avec des images, car cela peut grandement affecter les performances et la disponibilité du projet. Le matériel, dont nous publions la traduction aujourd'hui, est consacré à l'étude de diverses manières d'inclure des images dans des pages Web. Ici, les avantages et les inconvénients de ces méthodes seront discutés. De plus, nous parlerons quand et pourquoi ils sont généralement utilisés.





Élément HTML <img>


Un élément <img>dans les versions les plus simples de son utilisation ne contient que l'attribut nécessaire à son bon fonctionnement src:

<img src="cool.jpg" alt="">

▍Définition des attributs de largeur et de hauteur


Si la largeur et la hauteur de l'image ne sont pas ajustées, lors du chargement de la page puis du chargement de l'image, la mise en page peut avoir besoin d'être reconstruite. Pour éviter cela, vous pouvez définir les attributs widthet la heightbalise <img>:

<img src="cool.jpg" width="200" height="100" alt="">

Bien que cette approche puisse légèrement rappeler à quelqu'un la «vieille école», pour ainsi dire, elle est en fait très utile. Mieux comprendre cela, nous allons démontrer ce qui précède avec un exemple. À savoir, je vous suggère de regarder cette courte vidéo .


Image de la vidéo. L'image de gauche n'a ni largeur ni hauteur. Les images de droite sont définies.

Ici, laNetworkbarre d'outils du développeurdunavigateur est affichée et le processus de chargement d'une paire d'images est illustré. L'un d'eux est situé à gauche, représenté par la balise<img>, qui attribuewidthetheightn'est pas définie. À une autre valeur de ces attributs sont définis.

Avez-vous remarqué que sur la page l'espace pour la bonne image est réservé avant même que cette image ne soit chargée? Tout dépend des attributs donnéswidthetheight. Faites attention à ce qui se passe avec les légendes d'images pendant le processus de téléchargement. Ceci est une démonstration claire de la force des attributswidthetheight.

→ Voici un exemple de travail

▍Cacher l'image en utilisant CSS


L'image peut être masquée à l'aide de CSS. Certes, une telle image est toujours chargée lors du chargement de la page. Par conséquent, ce faisant, il faut faire preuve de prudence. Si une certaine image doit être cachée, elle ne peut être utilisée qu'à des fins décoratives.

Voici le code CSS cachant l'image:

img {
    display: none;
}

Je le répète: avec cette approche, le navigateur téléchargera l'image, le faisant même si elle s'avère invisible. Le point ici est qu'un élément <img>est considéré comme un élément remplaçable , donc notre capacité à gérer un tel élément à partir de CSS est limitée.

▍À propos de la disponibilité du contenu


La disponibilité des images affichées sur les pages utilisant un élément HTML <img>est assurée par leurs attributs alt. Un tel attribut doit contenir une description claire de l'image. Cela peut être très utile pour les utilisateurs utilisant des lecteurs d'écran.

Cependant, si l' altimage n'a pas besoin d' être décrite, il n'est pas recommandé de supprimer cet attribut. Le fait est que si cela est fait, le contenu de l'attribut sera «exprimé» src. C'est très mauvais pour l'accessibilité du contenu.

Mais l'attribut altest utile non seulement dans le cas ci-dessus. Si pour une raison quelconque, l'image ne sera pas téléchargée et qu'elle a un attributalt, le texte de cet attribut sera affiché à la place de l'image. Je veux illustrer ce qui précède avec l'exemple suivant.

Nous avons quelques images:

<img class="food-thumb" width="300" height="200" src="cheescake.jpg">
<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">

L'attribut srccontient une adresse incorrecte pour le fichier image; ce fichier ne peut pas être chargé par le navigateur. Le premier <img>n'a pas d'attribut altet le second a un attribut dans lequel une chaîne vide est écrite. Comment pensez-vous que ces éléments seront affichés sur la page?


À gauche, une image sans l'attribut alt. À droite - avec l'attribut alt vide

Sous l'image sans l'attributalt, l'espace de page est réservé, ce qui peut dérouter l'utilisateur et nuire à la disponibilité du contenu. Et une autre image prend très peu d'espace pour afficher le "contenu" d'un attribut videalt. En conséquence, il ressemble plus à un point qu'à une image. Cela se produit en raison des paramètres de propriété d'borderimage.

Cependant, lorsquealtquelque chose est écritdans l'attribut, l'image sera différente.


A droite se trouve l'image dans l'attribut alt dont le texte

est écrit, c'est bien mieux que rien. De plus, si vous ne pouvez pas charger le fichier affiché dans<img>, vous pouvez lui ajouter un pseudo-élément .

▍ Images réactives



Images de différentes tailles

L'élément<img>est bon en ce qu'il peut être configuré de manière à afficher différentes versions de l'image dans les zones de visualisation de la page de différentes tailles. Ceci, par exemple, peut être utilisé pour les images utilisées dans les articles.

Un ensemble d'images réactif peut être personnalisé de deux manières.

1. attribut srcset


Voici le code image qui utilise l'attribut srcset:

<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">

Ceci est un exemple simple. Je ne le considère pas comme une solution idéale à utiliser srcsetpour décrire des images de différentes tailles affichées sur des écrans aux caractéristiques différentes. Le fait est que dans une telle situation, le dernier mot reste avec le navigateur, et le développeur ne peut pas influencer le choix du navigateur.

2. Élément d'image HTML


Voici le code qui utilise l'élément <picture>:

<picture>
  <source srcset="large.jpg" media="(min-width: 800px)" />
  <source srcset="medium.jpg" media="(min-width: 500px)" />
  <img src="small.jpg" />
</picture>

Une autre option pour créer des images réactives consiste à utiliser un élément <picture>. J'aime davantage cette approche parce qu'elle est plus simple et qu'elle donne des résultats plus prévisibles.

Voici un projet de démonstration pour cette section.

▍ Redimensionnement des images



Sur la gauche se trouve une image qui n'a pas de jeu de propriétés d'ajustement d'objet CSS. Sur la droite se trouve une image qui a cette propriété définie avec des

propriétés CSSobject-fitetobject-positionsont d'excellents outils que vous pouvez utiliser avec un élément<img>. Ils nous permettent de contrôler la façon dont le contenu d'un élément change et est positionné<img>. Cela revient à travailler avec une propriété CSSbackground.

La propriétéobject-fitpeut avoir les valeurs suivantes:fill,contain,cover,none,scale-down.

Voici comment l'utiliser:

img {
    object-fit: cover;
    object-position: 50% 50%;
}

Maintenant que nous avons un peu compris l'élément <img>, il est temps d'avancer et de maîtriser la prochaine technique de manipulation d'image.

Images de propriétés CSS


Lorsque vous utilisez la propriété CSS pour afficher des images background, vous devez appliquer cette propriété à un élément avec un certain contenu ou à un élément qui a des dimensions. Habituellement, le principal domaine d'utilisation de cette propriété est les éléments décoratifs.

▍Comment utiliser la propriété d'arrière-plan CSS


Pour utiliser la propriété CSS background, nous avons d'abord besoin d'un élément:

<div class="element">Some content</div>

Ensuite, vous avez besoin d'un style:

.element {
    background: url('cool.jpg');
}

▍Définissez plusieurs images dans la propriété d'arrière-plan


Une caractéristique intéressante des images affichées à l'aide des propriétés CSS backgroundest qu'il peut y avoir plusieurs images de ce type. Ces images peuvent être manipulées en utilisant CSS:

.element {
    background: url('cool-1.jpg'), url('cool-2.jpg');
}

▍Cacher l'image


En utilisant CSS, vous pouvez masquer et afficher des images dans une zone de visualisation spécifique. En même temps, les images qui ne seront pas affichées ne seront pas téléchargées. Si l'image en CSS n'est pas configurée comme visible, elle ne se chargera pas. Il s'agit d'un avantage supplémentaire de la propriété CSS backgroundsur l'élément <img>.

@media (min-width: 700px) {
    .element {
        background: url('cool-1.jpg');
    }
}

Cet exemple décrit une image d'arrière-plan qui s'affiche uniquement lorsque la largeur de la fenêtre est plus grande 700px.

▍À propos de la disponibilité du contenu


Si les images affichées à l'aide de la propriété CSS backgroundne sont pas utilisées correctement, cela peut nuire à l'accessibilité du contenu. Par exemple, l'accessibilité peut être affectée en utilisant une telle image pour mettre en signet un article, ce qui est vital lorsque vous travaillez avec un article.

▍ Difficultés à charger des images d'arrière-plan par les utilisateurs réguliers


Les utilisateurs ordinaires savent que si vous devez enregistrer une certaine image, faites un clic droit dessus et sélectionnez la commande de menu contextuelle appropriée. Cela peut vous sembler drôle, mais avec des images définies à l'aide de la propriété CSS background, cette technique ne fonctionne pas. Une telle image ne peut pas être chargée de la manière habituelle. Pour le télécharger, vous devrez examiner le code de l'élément dans les outils de développement et utiliser le lien depuis url.

▍ Pseudo-éléments


Les pseudo-éléments peuvent également être utilisés avec des images définies par la propriété CSS background. Par exemple, pour afficher une image au-dessus d'une autre. Dans le cas d'un élément, <img>cela ne peut être réalisé qu'en utilisant un élément supplémentaire superposé à un autre élément.

Parlons maintenant de l'utilisation d'images SVG

Images SVG


La principale force des images SVG est leur capacité à les mettre à l'échelle sans perte de qualité. De plus <svg>, en plus des images SVG , un élément peut également afficher des fichiers JPG et PNG. Voici le code HTML de l'image SVG:

<svg width="200" height="200">
  <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>


Image JPG affichée au moyen de l'élément SVG

Faites attention à l'attributpreserveAspectRatio? Grâce à lui, l'image occupe toute la largeur et la hauteur de l'élément<svg>, sans s'étirer et sans se contracter.

Si la largeur de l'élément est<image>supérieure, il remplira l'élément parent (<svg>) en largeur, mais il ne s'étirera pas.


L'image ne s'étire pas.

Ceci est très similaire au fonctionnementobject-fit: coverou auxpropriétés CSSbackground-size: cover.

▍À propos de la disponibilité du contenu


Si nous parlons de la disponibilité du contenu lors de l'utilisation d'images SVG, je peux dire qu'une telle conversation me rappelle immédiatement un élément <title>. Voici un exemple de code dans lequel l' <svg>élément suivant est ajouté à la sortie d'image au moyen :

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

Ici, d'ailleurs, vous pouvez utiliser l'élément <desc>:

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <desc>A meaningful description about the image</desc>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

▍Difficultés avec le chargement d'images <svg> par les utilisateurs réguliers


L'image affichée avec l'aide <svg>, vous ne pouvez la télécharger qu'en analysant son code et en accédant au lien vers l'image. C'est un inconvénient, mais si quelqu'un veut limiter la capacité des utilisateurs ordinaires à télécharger des images, cette fonctionnalité peut être utile. À tout le moins, cela réduira les chances de télécharger une telle image.

→ Voici un exemple pour cette section

Scénarios d'utilisation de différentes méthodes de sortie d'image


Section Section de page affichée en haut


Lors de la conception de la section de page située dans sa partie supérieure (une telle section est appelée la "section de héros"), il est parfois nécessaire de lui faire afficher une image, au-dessus de laquelle un titre et d'autres données sur la page sont affichés. Cela peut ressembler à ce qui suit.


La partie supérieure de la page avec l'image et les inscriptions

Faites attention au fait qu'il y a une image de fond. Comment comptez-vous développer une telle section de la page? Mais, avant de répondre à cette question, permettez-moi de formuler quelques exigences:

  • L'image doit prendre en charge un changement dynamique facile lors de l'intégration de la page avec le CMS backend.
  • Un élément doit être placé sur l'image pour simplifier la lecture du texte.
  • Il est nécessaire de prendre en charge la sortie d'image en trois tailles: petite, moyenne et grande. Chacun d'eux est destiné à sa propre zone de visualisation.

Avant de procéder à la résolution de ce problème, nous nous interrogeons sur la nature de l'image de fond qui sera utilisée ici. Voici quelques questions d'appui pour nous aider à aller au fond des choses:

  1. Est-ce important l'image du point de vue de l'utilisateur, ou il ne perdra rien s'il n'est pas visible?
  2. Cette image doit-elle être affichée dans des zones de visualisation de toutes tailles?
  3. Cette image est-elle statique ou est-elle en train de changer dynamiquement (à partir du CMS, par exemple)?

Considérez quelques options pour résoudre ce problème.

La première solution au problème


En utilisant une propriété CSS backgroundavec plusieurs images définies, l'une d'elles peut être utilisée pour un élément superposé à l'image principale et l'autre pour représenter l'image elle-même. Jetez un oeil à ce CSS:

.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var('landscape.jpg');
    background-repeat: no-repeat;
    background-size: 100%, cover;
}

Cette approche vous permet de réaliser ce que background-imagevous voulez, vous pouvez le changer en utilisant JavaScript:

<section class="hero" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
  <!-- Hero content -->
</section>

backgroundJ'ai défini la propriété dans un style intégrable. Bien que cela fonctionne, il semble mauvais et peu pratique.

Vous pouvez peut-être utiliser des variables CSS ici?

<section class="hero" style="--bg-url: url('landscape.jpg')">
  <!-- Hero content -->
</section>

Voici le résultat d'une étude de style.


Étudiez le style de l'élément.

Maintenant, pour changer l'image d'arrière-plan, il suffit de changer la variable--bg-url. C'est un million de fois mieux que les styles en ligne.

Une analyse


  1. La solution proposée au problème ici n'est bonne que si l'image n'est pas particulièrement importante.
  2. Cela peut convenir si l'image n'est pas prévue pour être modifiée dynamiquement, en utilisant le CMS utilisé sur le backend du projet.

→ Voici un exemple de travail

La deuxième solution au problème


Ici, nous utiliserons des outils de sortie d'image HTML:

<section class="hero">
  <h2 class="hero__title">Using Images in CSS</h2>
  <p class="hero__desc">An article about which and when to use</p>
  <img src="landscape.jpg" alt="">
</section>

En CSS, vous devez ajuster le positionnement absolu de l'image en la plaçant sous le texte. De plus, il nous faut ici un pseudo-élément qui jouera le rôle de l'élément superposé à l'image:

.hero {
    position: relative;
}

.hero img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

Cette solution est bonne car lors de son utilisation, il est très facile de modifier l'attribut d'image src. De plus, c'est mieux dans le cas où l'image de sortie est importante.

De plus, je note que j'aime <img>les images β que lorsque vous les utilisez, vous pouvez utiliser des mécanismes de sauvegarde qui fonctionnent si le fichier image ne se charge pas. Un tel mécanisme auxiliaire, disons, en sortie au lieu d'une image d'un simple arrière-plan coloré, permettra au moins aux utilisateurs de lire le texte:

.hero img {
    /*   */
    background: #2962ff;
  }


La couleur d'arrière-plan s'affiche si l'image ne se charge pas.

La bonne chose est que la couleur d'arrière-plan s'affiche uniquement si l'image ne se charge pas. Cela nous conviendra.

→ Voici un exemple de travail

▍ Logo du site


Le logo est très important. Les logos ajoutent un caractère unique aux sites. Afin d'afficher un logo sur une page, nous pouvons recourir à plusieurs possibilités:

  • Un élément <img>qui affiche une image PNG, JPG ou SVG.
  • Image SVG intégrée.
  • Image de fond.

Parlons de la façon dont les images doivent être utilisées pour les logos et comment choisir exactement ce dont vous avez besoin.

Logo avec de nombreux détails.


Si le logo contient de nombreux détails ou contient de nombreuses formes, l'afficher à l'aide de l'image SVG intégrée peut ne pas être une bonne idée. Dans une telle situation, je recommande d'utiliser une balise <img>au moyen de laquelle une image PNG, JPG ou SVG est affichée.


Logos divers

Voici le code pour afficher un logo similaire stocké au format SVG:

<a href="#"><img src="logo.svg" alt="Nature Food"></a>

Logo simple à animer



Logo animé simple

Considérons une situation où il existe un logo simple contenant une certaine figure ou du texte. Lorsque vous passez la souris dessus, vous devez modifier la couleur de la forme et du texte. Comment faire? Il me semble que dans cette situation, il est préférable d'utiliser l'image SVG intégrée:

<a href="#">
    <svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#D8D8D8" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="25" font-weight="400" fill="#6F6F6F">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
    </svg>
</a>

Voici les styles:

.logo rect,
.logo text {
  transition: 0.3s ease-out;
}

.logo:hover rect,
.logo:hover text {
  fill: #4a7def;
}

Voici un projet de démonstration pour cette section:

Logo réactif


Quand j'ai pensé à des logos réactifs, je me suis souvenu du logo Smashing Magazine. J'aime la façon dont sa taille change. Voici une mise en page illustrant le logo de base et le logo affiché dans les grandes zones de visualisation.


Logo réactif

Pour implémenter ce comportement de logo, un élément<picture>qui vous permet de décrire deux versions du logo estidéal:

<a class="logo" href="/">
    <picture>
      <source media="(min-width: 1350px)" srcset="sm-logo--full.svg"><img src="sm-logo.svg" alt="Smashing Magazine"></picture>
  </a>

En CSS, vous devez modifier la largeur du logo dans le cas où la largeur de la fenêtre est égale ou supérieure 1350px:

.logo {
  display: inline-block;
  width: 45px;
}

@media (min-width: 1350px) {
  .logo {
    width: 180px;
  }
}

Nous avons devant nous une solution simple et compréhensible au problème des logos réactifs.

→ Voici un exemple de travail pour cette section

Logo avec dégradé



Un exemple de logo avec un dégradé

Lorsque vous travaillez avec des logos qui ont un dégradé, vous devez être conscient que l'exportation d'un tel logo à partir d'une application de conception, comme Adobe Illustrator ou Sketch, peut être loin d'être parfaite. Pendant ce processus, quelque chose dans le logo peut se casser.

Lorsque vous utilisez le format SVG, vous pouvez facilement appliquer une couleur dégradée au logo. Dans l'exemple suivant, j'ai utilisé<linearGradient>, en définissant avec lui l'attribut textfill:

<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">
        <stop offset="0%" stop-color="#4a7def"></stop>
        <stop offset="50%" stop-color="#ab4787"></stop>
      </linearGradient>
    </defs>
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#AB4787" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="30" font-weight="400" fill="url(#gradient)">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
</svg>

→ Voici un exemple

▍Utilisateur d'avatar


Les avatars se présentent sous plusieurs formes, mais généralement des avatars carrés ou ronds. Dans cet exemple, je veux partager un conseil important que vous pourriez trouver utile.

Pour commencer, jetez un œil à la disposition suivante. Veuillez noter qu'il existe deux avatars soignés avec des bords clairs.


Une paire d'avatars réussis

Et si l'utilisateur, en tant qu'avatar, décide d'utiliser une image avec un fond presque blanc? Si c'est le cas, l'avatar sera loin d'être aussi bon.


Avatar infructueux

Notez que l'image précédente montre un avatar avec un fond très lumineux. Par conséquent, pour comprendre qu'elle a une forme ronde, il faut la regarder de près. C'est mauvais. Afin de résoudre ce problème, vous devez ajouter une bordure intérieure à l'avatar. Cette bordure sera utilisée comme solution auxiliaire, appliquée lorsque l'image est trop lumineuse.


À gauche, un avatar avec un fond trop clair. Sur la droite se trouve le résultat de la résolution de ce problème. Il

existe plusieurs façons de résoudre ce problème:

  • Utilisation <img>.
  • Utilisation <img>et élément auxiliaire <div>.
  • Utilisation des <div>propriétés et CSS background.
  • Utilisation de <image>c <svg>.

Qu'est-ce qui convient le mieux ici? Découvrons-le.

Utilisation de <img>


Comment résoudre ce problème? Peut-être - ajustez simplement la bordure de l'élément? Nous explorons cette possibilité (je m'excuse immédiatement pour le fait que ci-dessous vous verrez souvent ma photo).

Voici le CSS:

.avatar {
    border: 2px solid #f2f2f2;
}

Voici à quoi ça ressemble.


Le résultat n'a pas été comme prévu: la bordure sombre est située en dehors des bords de l'image.

Ce qui s'est passé ne nous convient pas. Nous avons besoin que l'image ait une bordure intérieure qui se confond avec l'image sombre. En conséquence, il s'avère que la définition de la bordure de l'élément ne nous aidera pas ici.

Utilisation de <img> et de l'aide <div>


Permettez-moi de vous rappeler que nous sommes confrontés à la tâche d'ajouter une ombre intérieure à l'image. Nous ne pouvons pas résoudre ce problème en utilisant l'ombre intérieure ( box-shadow) et le mot clé inset, car les éléments HTML <img>ne prennent pas en charge l'ombre intérieure. Pour résoudre ce problème, vous devez mettre un avatar dans un élément <div>et utiliser un autre élément, dont le seul but est de dessiner une bordure interne.

Voici le code HTML:

<div class="avatar-wrapper">
     <img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
     <div class="avatar-border"></div>
</div>

Voici les styles:

.avatar-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
}

.avatar-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

Si l'élément <div>a une bordure peinte en noir à 10%, cela garantira qu'une telle bordure ne sera pas visible dans l'image sombre, et sera visible à la lumière, mettant en évidence sa bordure. Voici à quoi ça ressemble.


La bordure intérieure, visible uniquement dans les images lumineuses

→ Voici un exemple pour cette section

Utilisation de <div> et de la propriété d'arrière-plan CSS


Si j'utilisais un élément pour afficher l'avatar <div>, cela signifierait probablement que l'image joue un rôle décoratif. Un exemple me vient à l'esprit, illustré ci-dessous. Ici, divers avatars sont simplement dispersés sur la page.


Des avatars disséminés sur la page. Le

HTML ici sera:

<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>

Voici le style:

.avatar {
  background: var(--img-url) center/cover;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}

Ici vous pouvez trouver un exemple de travail.

Utilisation de <image> dans <svg>


Je pense que c'est la solution la plus intéressante à notre problème. J'ai découvert cette astuce en étudiant le nouveau design de Facebook.

Voici le balisage:

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <circle cx="18" cy="18" fill="white" r="18"></circle>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <circle cx="18" cy="18" r="18"></circle>
  </g>
</svg>

Tout d'abord, analysons ce code. Voici ce que c'est:

  1. Un masque recadrant une image circulaire.
  2. Groupe auquel s'applique le masque.
  3. L'image elle-même avec l'attribut preserveAspectRatio=«xMidYMid».
  4. Un cercle utilisé comme bordure intérieure.

Voici comment il est stylé:

circle {
  stroke-width: 2;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}

→ Ici vous pouvez trouver un exemple

Avec les avatars, nous l'avons compris. Par conséquent, nous continuons.

▍ Champ de saisie avec icône


Voici un exemple de champ de saisie avec une icône.


Champ de saisie avec une icône

Ces champs sont assez courants. Comment équiper un champ d'une icône? Que se passe-t-il lorsqu'un tel champ reçoit le focus? Explorez ces problèmes.

Voici le code HTML:

<p>
    <label for="name">Full name</label>
    <input type="text" id="name">
</p>

Je pense que la meilleure solution à ce problème est d'utiliser des images d'arrière-plan définies par CSS. Il est simple, rapide et ne nécessite pas d'éléments HTML supplémentaires:

input {
    background-color: #fff;
    background-image: url('user.svg');
    background-size: 20px 20px;
    background-position: left 10px center;
    background-repeat: no-repeat;
}

Vous pouvez utiliser une image SVG codée URL pour modifier la couleur de l'icône lorsque le champ reçoit le focus. C'est très simple à faire. Par exemple, cet outil est conçu à cet effet , développé par Yoksel.

Voici un exemple.

Styles Styles CSS pour l'impression


Un visiteur de page devra peut-être l'imprimer sur une imprimante. Supposons qu'il y ait une recette culinaire sur la page et que vous deviez l'imprimer pour ne pas avoir à regarder constamment le téléphone ou l'ordinateur dans la cuisine.

S'il y a des étapes dans la recette illustrée avec des images, il est important qu'elles tombent dans sa version imprimée, sinon celui qui imprime la page ne pourra pas utiliser la recette.

Essayez de ne pas inclure dans les pages destinées à l'impression des images affichées à l'aide de l'arrière-plan de la propriété CSS


Si l'image est incluse dans la page à l'aide de la propriété CSS background, elle ne sera pas imprimée. L'endroit où il était affiché sera vide lors de l'impression. Voilà de quoi je parle.


Espaces vides au lieu d'images incluses dans la page utilisant la propriété d'arrière-plan CSS

Il y aura peu d'utilité pour une telle version imprimée de la recette. Cela peut être résolu en forçant le navigateur à afficher des images similaires dans la version imprimée de la page. Mais cette approche ne fonctionne pas dans Firefox et dans IE. Voici à quoi cela ressemble en CSS:

.element {
    background: url('cheesecake.png') center/cover no-repeat;
    -webkit-print-color-adjust: exact; /*        */
}

Dans de telles situations, il est préférable d'utiliser un élément HTML <img>. Les images incluses dans la page utilisant cet élément sont imprimées sans problème.

→ Voici un exemple

Sommaire


Aujourd'hui, nous avons parlé de différentes façons d'inclure des images dans les pages Web, discuté de leurs avantages et inconvénients et examiné des scénarios pour leur utilisation. Nous espérons que vous trouverez utile ce que vous avez appris aujourd'hui.

Chers lecteurs! Avez-vous rencontré des problèmes d'affichage d'images sur des pages Web?

More articles:


All Articles