Explication détaillée de l'élément image en HTML5 et traitement d'image réactif

La conception dite réactive signifie que la mise en page de la page Web peut être ajustée de manière adaptative sur des terminaux dotés de différentes résolutions d'écran, de différents rapports de densité de pixels et de 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.

Bien que le responsive design 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{ largeur-max:100%; hauteur:auto }</style>

Définissez la largeur maximale de l'image à 100 % pour garantir 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'élément parent change. 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 aux images de 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 et de la bande passante, mais ralentit également la page Web. La vitesse d'ouverture affecte sérieusement l'expérience utilisateur.

1. <picture> est un nouvel élément de HTML5 ;
2. Si l'élément <picture> coopère avec les éléments <audio> et <video> actuels, cela améliorera le processus de travail d'image réactif. Il permettra de définir plusieurs balises <source> pour spécifier différentes conditions de chargement de fichier image. ;
3. <picture> 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), la direction (orientation), la densité de pixels (dpr), etc.

Dans le marron suivant, différentes images sont chargées pour différentes largeurs d'écran : minpic.png est chargé lorsque la largeur de la page est comprise entre 320 px et 640 px ; middle.png est chargé lorsque la largeur de la page est supérieure à 640 px.

 <image> <source media=(min-width : 320px) et (max-width : 640px) srcset=img/minpic.png> <source media=(min-width : 640px) srcset=img/middle.png> < img src=img/picture.png <source media=(min-width : 320px) et (largeur maximale : 640 px) et (orientation : paysage) srcset=img/minpic_landscape.png> <source media=(largeur min : 320 px) et (largeur maximale : 640 px) et (orientation : portrait) srcset=img/ minpic_portrait.png> <source media=(min-width: 640px) et (orientation : paysage) srcset=img/middlepic_landscape.png> <média source=(largeur min : 640px) et (orientation : portrait) srcset=img/middlepic_portrait.png> <img src=img/picture.png <média source =(largeur min : 320 px) et (largeur max : 640 px) 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 <source type=image/webp srcset=img/picture.webp> <img src=img/picture.png tailles=90vw srcset=picture-160.png 160w, photo-320.png 320w, photo-640.png 640w, photo-1280.png 1280w>

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

 <source media=(min-width : 800px) tailles=90vw srcset=picture-landscape-640.png 640w, Picture-landscape-1280.png 1280w, Picture-landscape-2560.png 2560w><img src=picture-160 Tailles .png = 90vw srcset=image-160.png 160w, image-320.png 320w, image-640.png 640w, image-1280.png 1280w>

compatibilité:

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

1. Chargez des fichiers image de taille appropriée afin que la bande passante disponible soit pleinement utilisée ;
2. Chargez des images recadrées différemment et ayant des proportions différentes pour s'adapter aux modifications de mise en page à différentes largeurs ;
3. Chargez une densité de pixels plus élevée et affichez des images de résolution plus élevée ;

1. Créez la balise <picture></picture> ;
2. Dans ces balises, créez une balise <source></scource> que vous souhaitez utiliser pour exécuter n'importe quelle fonctionnalité ;
3. Ajoutez un attribut multimédia pour inclure les caractéristiques souhaitées, telles que la largeur (largeur maximale, largeur minimale), l'orientation (orientation), etc. ;
4. 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, comme les écrans Retina, vous pouvez ajouter des noms de fichiers supplémentaires à l'attribut srcset ;
5. Ajoutez une balise <img> de secours ;

Comme le montre l'exemple de code ci-dessus, sans introduire de bibliothèques js et tierces, et sans inclure de requêtes multimédias dans CSS, l'élément <picture> peut déclarer des images réactives en utilisant uniquement HTML ;

La balise <picture> elle-même n'a aucun attribut. La partie magique est que <picture> est utilisé comme conteneur pour <source>.

L'élément <source>, 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 :

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

Ou il s'agit d'un chemin d'image séparé par des virgules décrit par densité de pixels (tel que : srcset=img/minpic.png, img/minpic_retina.png 2x La description 1x n'est pas utilisée par défaut).

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

Il a été utilisé dans l'exemple de syntaxe <picture> précédent.

Recevez une description de largeur unique (par exemple : sizes=100vw) ou une description de largeur de requête multimédia unique (par exemple : sizes=(min-width : 320px) 100vw).

Ou des descriptions de largeur de requête multimédia séparées par des virgules (par exemple : size=(min-width : 320px) 100vw, (min-width : 640px) 50vw, calc(33vw - 100px)) Le dernier est utilisé par défaut.

Accepte les types MIME pris en charge (par exemple : 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 <source> approprié et ignorera les balises <source> suivantes.

L'élément <img> est utilisé à l'intérieur de <picture> pour être affiché lorsque le navigateur ne le prend pas en charge ou lorsqu'il n'y a pas de balise source correspondante. Il est nécessaire d'utiliser la balise <img> à l'intérieur de <picture>. Si vous oubliez, aucune image ne sera affichée.

Utilisez <img> pour déclarer l'affichage de l'image par défaut. Placez la balise <img> à la fin de <picture> et le navigateur ignorera la déclaration <source> avant de trouver la balise <img>. 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 ~

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.