Comment afficher des images en HTML ----- La différence entre img et background

Ce chapitre vous présente la différence entre les méthodes d'affichage d'images en HTML -----img et background, afin que vous puissiez comprendre la différence entre les deux méthodes d'affichage d'images en HTML. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. À partir du mécanisme d'analyse

img appartient à la balise html et background est la méthode CSS. Une page est composée de HTML, CSS et JS. Selon le mécanisme d'analyse du navigateur, la balise html est analysée en premier. Tout le monde sait que le fichier CSS sera chargé dans le head, mais cela ne signifie pas qu'il sera exécuté immédiatement, mais seulement après le chargement du HTML. Par conséquent, les éléments importants tels que les logos doivent utiliser img.

S'il s'agit simplement d'afficher une image, comme une bannière, une image publicitaire, etc., il est recommandé d'utiliser la méthode de l'arrière-plan. Parce que les éléments sans importance sont automatiquement mis en file d'attente vers l'arrière pour éviter d'occuper la bande passante et de provoquer une congestion des données.

S'il y a beaucoup d'images, un nouveau problème surgit ici. Différents navigateurs prennent en charge différents nombres de chargements simultanés (Dernier test) IE est 10 et FF est 10. S'il y a beaucoup d'images, alors ce sera sérieux. des retards ou des 404, car le chargement lent de l'image affectera la présentation des données principales sur la page, donc tout ce que les utilisateurs voient est vide. Êtes-vous gêné de le faire attendre ? Par conséquent, si vous n’utilisez pas lazyload, il est préférable d’utiliser l’arrière-plan.

L'avantage de la balise img est qu'elle se ferme automatiquement et peut éviter l'apparition de balises vides (les balises vides font également partie des contenus vérifiés par le w3c). Lorsque vous utilisez la méthode d'arrière-plan, des balises vides apparaîtront. Les icônes dans bootstrap sont toutes ajoutées avec des balises i, et les balises i ont un contenu vide, ce qui entraîne des balises vides (ce n'est pas mauvais, les avantages et les inconvénients seront discutés plus tard. ).

2. D'un point de vue SEO

Comme je l'ai dit tout à l'heure, la balise img se ferme automatiquement et ne peut pas ajouter de contenu textuel. , img Il existe un attribut alt, et cet attribut est requis dans la norme w3c. Cela présente encore de nombreux avantages.

Premièrement, si l'image est relativement grande ou si la vitesse Internet de l'utilisateur est lente, le chargement échoue. Au moins, il y a une invite textuelle indiquant à l'utilisateur de quel contenu il s'agit. Si l'utilisateur insiste pour voir cette image, faites-la glisser plusieurs fois pour la charger. De plus, l'attribut alt est utile pour faciliter la lecture, en particulier pour les amis aveugles qui utilisent des lecteurs pour parcourir les pages. S'il n'y a pas d'invite de texte, ce serait trop méchant.

Deuxièmement, l'attribut alt est bénéfique pour le référencement. Il reste encore du chemin à parcourir avant que les moteurs de recherche puissent obtenir une bonne reconnaissance d'image.

Bien sûr, il y a aussi des inconvénients :

Tout d'abord, l'image chargée par Img est obtenue via src Si le code HTML n'est pas autorisé à être modifié, comment changer l'image uniquement ? le fichier du même nom peut être remplacé, mais il est possible de rencontrer un statut 304 et le serveur doit effectuer les paramètres correspondants. A cette époque, les avantages du fond ressortent, et c'est le marron pour changer de peau.

Deuxièmement, si la taille de l'espace de la zone d'affichage de l'image est réservée, alors l'image doit être cohérente avec l'espace réservé, sinon l'image sera soit étirée, soit compressée, ce qui n'est pas une opération à proportion égale. Bien entendu, pour éviter ce problème, les concepteurs frontaux et visuels doivent respecter certaines normes.

3. Perspective sémantique

L'arrière-plan n'a rien à voir avec la sémantique img est une balise HTML avec une sémantique claire.

Suggestion : Il est préférable d'utiliser img pour les images importantes qui doivent être chargées en premier. Il est préférable d'utiliser l'arrière-plan pour les images sans importance.

Le moyen le plus pratique de faire du référencement est l'arrière-plan. L'image est placée en arrière-plan et le contenu est écrit au premier plan, donc les deux sont corrects. Si vous ne voulez pas que le contenu soit affiché, ajoutez text-indent, -99999, vous savez. (Cette méthode de jeu était utilisée à l’époque où les algorithmes des moteurs de recherche étaient uniques et où les mots-clés avec une proportion élevée étaient mieux classés).

J'ai mentionné la méthode d'arrière-plan de bootstrap tout à l'heure. La méthode de Bootstrap consiste à utiliser l'arrière-plan pour définir les icônes. L'utilisation des icônes est trop flexible, elle doit donc être modularisée et la sémantique doit d'abord être mise de côté. dans les deux sens. PS : Après le bootstrap v3, la police d'icône

a été adoptée. Deuxièmement, l'importance de l'icône n'est vraiment pas élevée. Son chargement à la fin réduit également l'utilisation de la bande passante et améliore la vitesse PV.

La sémantique de la balise img est très claire et ne peut pas être utilisée sans discernement, il est donc bon pour le bootstrap d'utiliser la balise i sans sémantique pour définir l'icône. PS : lorsque vous utilisez des balises sans sémantique dans vos propres projets, vous devez faire attention à leur compatibilité ascendante et faire attention aux définitions en 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!