Comment gérer les images de manière réactive à l'aide de l'élément image en HTML5

La conception dite réactive signifie que la mise en page de la page Web peut être ajustée de manière adaptative dans les terminaux avec différentes résolutions d'écran, différents rapports de densité de pixels et différentes largeurs. L'intention initiale du design réactif est de rendre le site Web PC d'origine compatible avec les terminaux mobiles. La plupart des pages Web réactives sont mises en œuvre via des requêtes multimédias et le chargement de fichiers CSS de différents styles. Ce type de mise en page flexible rend la mise en page du site Web plus raisonnable sur différents terminaux d'appareils. Cet article présente principalement l'explication détaillée du traitement d'image réactif de l'élément image en HTML5. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Bien que le design réactif présente de nombreux avantages, il présente également de nombreux inconvénients. Étant donné que le PC et les terminaux mobiles accèdent au même site Web, le PC n'a pas besoin de se soucier de la limite de trafic, mais le terminal mobile ne peut pas l'ignorer.

Afin de s'adapter à la largeur d'écran et à la densité de pixels des différents modèles de terminaux, nous utilisons généralement la méthode suivante pour définir le style CSS de l'image :

<style>
    img{
        max-width:100%;
        height:auto;
    }
</style>

Définissez la largeur maximale de l'image à 100 % pour vous assurer que l'image ne dépasse pas la largeur de son élément parent. Si la largeur de l'élément parent change, la largeur de l'image changera également en hauteur : auto peut garantir que la largeur de l'image change, la hauteur de l'image sera mise à l'échelle en fonction de son propre rapport largeur/hauteur.

De cette façon, lorsque nous accédons à l'image dans la page Web réactive sur un appareil mobile, nous redimensionnons uniquement la résolution de l'image et téléchargeons la grande image sur le PC. Cela gaspille non seulement du trafic, mais également de la bande passante. De plus, cela ralentira la vitesse d’ouverture des pages Web et affectera sérieusement l’expérience utilisateur.

Nouvelle solution :

1. est un nouvel élément de HTML5 ;

2. Le processus Le travail avec des images réactives sera amélioré si l'élément fonctionne en conjonction avec les éléments

3. peut charger différentes images selon différentes conditions. Ces conditions peuvent être la hauteur actuelle de la fenêtre (fenêtre), la largeur (largeur). ), l'orientation, la densité de pixels (dpr), etc. ;

Donnez quelques châtaignes

Dans la châtaigne suivante, différentes images sont chargées pour différentes largeurs d'écran lorsque ; la page Minpic.png est chargée lorsque la largeur est comprise entre 320px et 640px ; middle.png est chargée lorsque la largeur de la page est supérieure à 640px

<picture>
    <source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png">
    <source media="(min-width: 640px)" srcset="img/middle.png">
    <img src="img/picture.png" alt="this is a picture">
</picture>

2 Dans le marron suivant, le sens de l'écran est ajouté. comme condition : lorsque l'orientation de l'écran est horizontale. Lorsque l'orientation de l'écran est en orientation portrait, l'image se terminant par _landscape.png est chargée ; lorsque l'orientation de l'écran est en orientation portrait, l'image se terminant par _portrait.png est chargée ;

<picture>
    <source media="(min-width: 320px) and (max-width: 640px) and (orientation: landscape)" srcset="img/minpic_landscape.png">
    <source media="(min-width: 320px) and (max-width: 640px) and (orientation: portrait)" srcset="img/minpic_portrait.png">
    <source media="(min-width: 640px) and (orientation: landscape)" srcset="img/middlepic_landscape.png">
    <source media="(min-width: 640px) and (orientation: portrait)" srcset="img/middlepic_portrait.png">
    <img src="img/picture.png" alt="this is a picture">
</picture>

3. La densité de pixels de l'écran est ajoutée comme condition dans la châtaigne suivante ; Lorsque la densité de pixels est 2x, chargez l'image _retina.png 2x, lorsque la densité de pixels est 1x, chargez l'image sans suffixe rétine. ;

<picture>
    <source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png,img/minpic_retina.png 2x">
    <source media="(min-width: 640px)" srcset="img/middle.png,img/middle_retina.png 2x">
    <img src="img/picture.png,img/picture_retina.png 2x" alt="this is a picture">
</picture>

4. Ajoutez le format de fichier image comme condition dans le châtaigne suivant. Lorsque l'image au format webp est prise en charge, l'image au format webp est chargée. Lorsque l'image au format png n'est pas prise en charge. l'image au format png est chargée ;

<picture>
    <source type="image/webp" srcset="img/picture.webp">
    <img src="img/picture.png" alt="this is a picture">
</picture>

5. Ajoutez une description de largeur dans l'exemple suivant ; la page choisira de charger une image pas plus grande que la largeur actuelle en fonction de la plus grande image ;

<img src="picture-160.png" alt="this is a picture"
     sizes="90vw" 
     srcset="picture-160.png 160w,
             picture-320.png 320w,
             picture-640.png 640w,
             picture-1280.png 1280w">

6. Ajoutez l'attribut tailles dans l'exemple suivant ; chargez la version correspondante de l'image lorsque la largeur de la fenêtre est supérieure ou égale à 800px ;

Actuellement, seuls Chrome, Firefox et Opera sont compatibles avec celui-ci. La compatibilité spécifique est la suivante :

<img src="picture-160.png" alt="this is a picture"
     sizes="90vw" 
     srcset="picture-160.png 160w,
             picture-320.png 320w,
             picture-640.png 640w,
             picture-1280.png 1280w">

Avantages :

Chargez des fichiers image de taille appropriée afin que la bande passante disponible soit pleinement utilisée

1. Chargez des images recadrées différemment et ayant des proportions différentes pour s'adapter aux changements de mise en page à différentes largeurs ; 🎜 >

2. Charge une densité de pixels plus élevée, affiche des images de plus haute résolution

3. Étapes :

Créer <

1. Dans ces balises, créez une balise 🎜>
   Ajoutez un attribut média pour inclure les caractéristiques souhaitées, telles que la largeur (largeur maximale, largeur minimale), l'orientation (orientation), etc.

2. Ajoutez un attribut srcset, la valeur de l'attribut est le nom du fichier image correspondant et chargez-le. Si vous souhaitez fournir différentes densités de pixels, telles que les écrans Retina, vous pouvez ajouter des noms de fichiers supplémentaires à l'attribut srcset

3. Ajouter une balise de secours 🎜>
4. principe de fonctionnement
   syntaxe
5. Comme le montre l'exemple de code ci-dessus, sans introduire de js et de bibliothèques tierces, Lorsque les requêtes multimédias ne sont pas incluses dans CSS, l'élément peut déclarer des images réactives en utilisant uniquement l'élément
   La balise

   elle-même n'a aucun attribut. La partie magique est que est utilisé comme conteneur pour . L'élément
   , qui est utilisé pour charger du multimédia tel que la vidéo et l'audio, a été mis à jour pour charger des images et de nouveaux attributs ont été ajoutés :

   srcset (obligatoire)
   

   Accepte un seul chemin de fichier image (par exemple : srcset="img/minpic.png")

   Ou un chemin d'image séparé par des virgules décrivant la densité des pixels (par exemple : srcset=" img/). minpic.png, img/minpic_retina.png 2x"), les descriptions 1x ne sont pas utilisées par défaut.

   media (facultatif)

   Accepte toute requête média validée, comme vous pouvez le voir dans le sélecteur CSS @media (ex : media="(min-width: 320px)"). >

   a été utilisé dans l'exemple de syntaxe
   sizes (facultatif)
   Reçoit une description de largeur unique (telle que : size="100vw") ou une description de largeur de requête multimédia unique (telle que : size="(min-width : 320px ). )") Le dernier est considéré comme la valeur par défaut.
   type (facultatif)
   Accepter les types MIME pris en charge (tels que : type="image/webp" ou type="image/vnd.ms-photo")
   Le navigateur chargera la ressource d'image exacte en fonction de ces astuces et attributs. Selon l'ordre de la liste des balises. Le navigateur utilisera le premier élément approprié et ignorera les balises
   Ajouter l'élément final
   L'élément est utilisé à l'intérieur de l'élément balise source. Il est obligatoire d'utiliser la balise dans . Si vous oubliez, aucune image ne sera affichée.
   Utilisez pour déclarer l'affichage de l'image par défaut. Placez la balise à la fin de et le navigateur ignorera la déclaration avant de trouver la balise . Cette balise d'image nécessite également que vous écriviez son attribut alt.
   Cet article s'inspire de nombreux autres articles. Toutes les introductions à l'image sont ici, alors essayons-le maintenant~
   Recommandations associées ;

   Expliquez le réactif. framework Système de grille Bootstrap avec exemples

   Plusieurs frameworks réactifs adaptés aux programmeurs web

   Tutoriel de production de bannière réactive HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!