Comment spécifier les dimensions de l'image en HTML. Redimensionner une photo en centimètres pour une impression sur papier, en tenant compte du DPI en ligne. Comment insérer une image en HTML

Pour modifier la taille d'une image à l'aide de la balise HTML Les attributs width (largeur) et height (hauteur) sont fournis. Les pixels sont utilisés comme valeur et les arguments doivent correspondre aux dimensions physiques de l'image. Par exemple, sur la Fig. La figure 10.6 montre une image aux dimensions de 100x111 pixels.

Riz. 10.6. Image en taille originale

En conséquence, le code HTML pour placer cette image est donné dans l'exemple 10.4.

Exemple 10.4. Dimensions du dessin

Si les dimensions de l'image sont spécifiées explicitement, le navigateur les utilise pour afficher la zone vide correspondant à l'image lors du processus de chargement du document (Fig. 10.7). Sinon, le navigateur attend que l'image soit complètement chargée, après quoi il modifie la largeur et la hauteur de l'image (Fig. 10.8). Dans ce cas, le texte peut être reformaté, car la taille originale de l'image n'est pas connue et elle est automatiquement définie comme petite.

Riz. 10.7. Les dimensions de l'image ne sont pas indiquées et elle n'est pas encore chargée

Riz. 10.8. Image téléchargée, texte reformaté

La largeur et la hauteur de l'image peuvent être modifiées plus ou moins grandes. Cependant, cela n'affecte en rien la vitesse de chargement de l'image, puisque la taille du fichier reste inchangée. Par conséquent, effectuez un zoom arrière avec prudence car... Cela peut semer la confusion parmi les lecteurs quant à la raison pour laquelle une si petite image prend si longtemps à se charger. Mais augmenter la taille entraîne l'effet inverse : la taille de l'image est grande, mais le fichier se charge plus rapidement par rapport à une image de même taille.

En figue. 10.9 montre la même image que celle présentée sur la Fig. 10,6, mais avec deux fois plus de largeur et de hauteur.

Riz. 10.9. Vue de l'image agrandie dans le navigateur

Le code d'un tel dessin restera pratiquement inchangé et est présenté dans l'exemple 10.5.

Exemple 10.5. Changer la taille d'une image

Ce redimensionnement est appelé rééchantillonnage et l'algorithme du navigateur a des capacités inférieures à celles des éditeurs graphiques. Par conséquent, il n'est nécessaire d'agrandir les images de cette manière que dans des cas particuliers, sinon la qualité de l'image se détériore trop. Il est préférable d'utiliser une sorte de programme graphique. L'exception concerne les dessins contenant des zones rectangulaires. En figue. La figure 10.10 montre un fichier de modèles qui occupe 54 octets et a une taille originale de 8 x 8 pixels, agrandie à 150 pixels.

Riz. 10.10. Image agrandie

Les navigateurs utilisent deux algorithmes pour le rééchantillonnage : bicubique (fournit des bords lisses et une gamme de tons de couleurs lisse) et les points les plus proches (préserve l'ensemble de couleurs d'origine et les bords nets). Dernières versions les navigateurs utilisent un algorithme bicubique, et les navigateurs plus anciens, au contraire, utilisent un algorithme basé sur les points les plus proches.

Les images font partie de presque tous les sites Web, le redimensionnement est donc indispensable. Vous pouvez modifier la taille de l'image de 2 manières : éditeur graphique ou par programmation dans Code HTML sur CSS.

Si dans code CSS en html vous ne définissez pas la taille de l'image, alors sa hauteur et sa largeur sur le site seront les mêmes en pixels que fichier source. Autrement dit, vous pouvez modifier la taille de l'image sans CSS ni HTML, en utilisant uniquement un éditeur graphique, et elle changera automatiquement sur le site si vous ne spécifiez pas sa taille. Mais il existe des cas où il est nécessaire de modifier par programme la taille d'une image en CSS en HTML.

1. Changer l'image dans un éditeur graphique

Vous pouvez redimensionner l'image dans n'importe quel éditeur graphique (photoshop, gimp, xnview) et elle changera automatiquement sur le site conformément aux dimensions d'origine.

Avantages de la méthode :

L'image se charge plus rapidement car il n'est pas nécessaire de télécharger des données supplémentaires (pixels), qui seront ensuite compressées par programme.

Les éditeurs graphiques ne compressent pas mal les images de moins de 200 pixels en largeur et en hauteur.

Dans la mesure du possible et du mieux, essayez de modifier la taille dans un éditeur graphique afin que les images se chargent plus rapidement qu'avec changement de programme. La différence de vitesse peut être plusieurs dizaines de fois.

2. Changer l'image dans le code CSS sur le site

Avantages:

Il est plus rapide et plus pratique de définir la taille. Cette méthode La réduction d’image est généralement utilisée pour des raisons de commodité. Par exemple, lorsqu'une image peut avoir plusieurs tailles différentes, il est souvent plus pratique de modifier les valeurs de la même image par programme que de télécharger toutes les options de format pour une image, éditées dans un éditeur graphique.

Les petites images, de moins de 200 pixels de hauteur ou de largeur, sont compressées efficacement, contrairement aux éditeurs graphiques. Si vous souhaitez que la taille de l'image sur le site soit inférieure à 200 pixels, il est préférable que la taille d'origine soit 30 à 50 % plus grande (260 à 300 pixels) afin d'économiser bonne qualité en diminuant.

Dans le même temps, la différence dans la vitesse de chargement du site ne se fera pas sentir car les petites images prennent très peu de place et si vous augmentez leur taille de 30 %, vous ne remarquerez aucun changement. Mais vous remarquerez la différence de qualité.

Les images compressées par logiciel prennent plus de temps à charger car le redimensionnement n'a lieu qu'après le téléchargement de la version originale. Par conséquent, si la taille de l'image est supérieure à 200 pixels en largeur ou en hauteur, il est préférable de la compresser dans un éditeur graphique pour que le site fonctionne plus rapidement.

Comment changer la taille de l'image en HTML en utilisant CSS

Pour changer la taille d'une image en HTML à l'aide de CSS, des propriétés sont utilisées largeur(largeur) et hauteur(hauteur)à l'intérieur de l'attribut style. Vous ne pouvez écrire que width ou height , et la valeur non spécifiée restante changera automatiquement pour conserver les proportions de l'image. Par exemple, en spécifiant uniquement la largeur de l'image à l'aide de width, sa hauteur changera automatiquement, en conservant les proportions. Et vice versa, lorsque vous spécifiez uniquement la hauteur, sa largeur changera également automatiquement, en conservant les proportions de l'image.

Exemple de code sans spécifier les dimensions de l'image

Résultat dans le navigateur

Code des pages

Exemple de code pour redimensionner une image en .css

Résultat dans le navigateur

Code des pages

style="largeur:150px; " >

Les deux exemples présentés ci-dessus utilisent la même image avec une taille de 300x184px (largeur et hauteur). Dans l'exemple 1, l'image était affichée dans le navigateur inchangée avec la taille d'origine de 300x184px car la largeur et la hauteur n'étaient pas spécifiées dans le CSS. Et dans l'exemple 2, l'image était affichée dans le navigateur réduite de 2 fois car la largeur était spécifiée à 150 px, la hauteur était automatiquement modifiée à 92 px. Comme vous pouvez le constater, la propriété height n'a pas du tout besoin d'être spécifiée car elle change automatiquement proportionnellement à la largeur.

Si vous spécifiez les deux paramètres : largeur(largeur), hauteur(hauteur) et elles ne correspondront pas aux proportions, alors l'image aura exactement cette taille, mais sous une forme compressée ou étirée, selon les valeurs.

Pourquoi il n'est pas conseillé d'agrandir les images

Important : L'augmentation de la taille de l'image s'accompagne d'une perte de qualité. Lors de modifications de quelque manière que ce soit, il est important de définir des valeurs inférieures à celles de l'image d'origine, c'est-à-dire de les diminuer uniquement.

Si vous définissez une taille de pixel supérieure à l'image originale, la qualité se détériorera. Et la perte de qualité sera clairement visible, car l'ordinateur ne peut pas ajouter de nouveaux pixels, il ne peut qu'augmenter la taille de ceux existants. Plus l'image est agrandie par rapport à la valeur d'origine, plus sa qualité est mauvaise et plus les pixels carrés sont clairement visibles.

Avant de répondre à la question " comment insérer une image en HTML ?», il convient de noter qu'il ne vaut pas la peine de surcharger les pages Web avec une énorme quantité de matériel graphique, car cela améliorera non seulement la perception visuelle de la ressource par l'utilisateur, mais augmentera également le temps de chargement des pages.

Lors de la création de sites Web, les formats graphiques les plus couramment utilisés sont PNG, GIF et JPEG, et pour le travail de conception avec des images, l'éditeur graphique Adobe Photoshop, qui possède de riches capacités pour compresser et redimensionner des images sans perte de qualité, ce qui est extrêmement important pour le développement Web. .

Comment insérer une image en HTML ?

Pour insérer une image dans une page HTML, utilisez une seule balise simple :

,

où xxx est l'adresse de l'image. Si l'image est dans le même répertoire que la page, la balise ressemblera à :

Cependant, l'Internet stable et à haut débit n'a pas encore atteint tous les coins du globe, et il arrive que l'image sur le site Web ne se charge tout simplement pas. Pour de tels cas, il existe le concept de texte alternatif.

Elle s'affiche à la place de l'image lorsqu'elle est indisponible, en cours de chargement ou en mode de fonctionnement du navigateur « sans images ». Il est ajouté à l'aide de l'attribut de balise alt .

Exemple d'ajout de texte alternatif à un fichier graphique :

Attribution des tailles d'image en HTML

Afin de modifier les dimensions d'affichage d'un fichier graphique, utilisez les balises height et width, où height est la hauteur et width est la largeur, mesurée en pixels.

Lors de l'utilisation de ces attributs, le navigateur alloue d'abord de l'espace pour le contenu graphique, prépare la mise en page globale, affiche le texte, puis charge l'image elle-même.

L'image est placée dans un rectangle aux dimensions spécifiées, et si les paramètres sont plus petits ou plus grands que ceux d'origine, l'image est étirée ou compressée.

Si les attributs de hauteur et de largeur ne sont pas utilisés, le navigateur charge l'image immédiatement, retardant ainsi l'affichage du texte et des autres éléments de la page.

Ces paramètres peuvent être spécifiés à la fois en pixels (la taille de l'image est constante et ne dépend pas de la résolution de l'écran de l'utilisateur) et en pourcentages (la taille de l'image dépend de la résolution de l'écran).

Par exemple:

Il ne faut pas oublier qu'au moment où vous modifiez la taille originale de l'image, il est nécessaire de conserver ses proportions.

Pour ce faire, il suffit de préciser la valeur d'un seul des paramètres ( largeur ou hauteur), et le navigateur calculera automatiquement la valeur du second.

Emplacement de l'image en HTML

Comme pour de nombreuses balises HTML, Appliquez l'attribut align, qui aligne l'image :

- l'image est située au-dessus du texte ;

- l'image se trouve sous le texte ;

- l'image est située à gauche du texte ;

- l'image est située à droite du texte.

Lien photo

Cela se fait comme suit:

Comme vous pouvez le constater, un encart graphique peut être un lien et, lorsqu'on clique dessus, rediriger vers n'importe quelle adresse écrite sous forme complète ou abrégée.

Comment puis-je faire d’une image un arrière-plan en HTML ?

L'image peut non seulement être insérée sur la page en tant qu'objet visible, mais également transformée en arrière-plan. Pour définir une image comme arrière-plan, vous devez spécifier l'attribut background=”xxx” dans la balise, où xxx est l'adresse de l'image, spécifiée de la même manière que dans les exemples ci-dessus.

Par exemple, définissons l'image de texture suivante comme image d'arrière-plan :

Enregistrez l'image dans un dossier avec une page préparée et écrivez les lignes suivantes :

Arrière-plan avec texte.

L'image d'arrière-plan de la page est définie.

Vous ne savez pas comment augmenter la taille d'une image ? C'est une tâche très simple puisque tout ce dont vous avez besoin est déjà installé sur votre ordinateur. Lisez ce tutoriel et vous apprendrez à redimensionner une photo à l'aide de 5 outils simples.

Méthode 1 : Comment redimensionner une image dans Microsoft Paint

1. Recherchez et lancez MS Paint. Il est préinstallé sur toutes les versions du système d'exploitation Les fenêtres. Démarrer> Tous les programmes> Accessoires> Paint:

1. Faites glisser l'image dans la fenêtre Paint ou utilisez Menu > Ouvrir (Ctrl + O).
2. Dans le menu principal du programme, recherchez l'élément " Redimensionner" et sélectionnez-le :

1. Le panneau permettant de modifier la taille et les proportions de l’image s’ouvrira. Vous pouvez spécifier la valeur en pixels. N'oubliez pas de cocher le " Maintenir les proportions" Sinon l'image sera déformée :

1. Pour augmenter la taille de l'image, cliquez sur le bouton "OK" et enregistrez la photo.

Conseil :

• Si vous ne pouvez pas redimensionner votre photo sans l'étirer, vous pouvez utiliser l'outil Recadrage pour supprimer les bords indésirables. Comment procéder est décrit au paragraphe 3 ;
• Pour ouvrir une photo plus rapidement, faites un clic droit dessus et sélectionnez « Ouvrir avec de la peinture»;
• Il est préférable de sauvegarder l'image dans le même format que l'original.

Méthode 2. Comment redimensionner une image dans MS Photo Gallery

1. Si Microsoft Photo Gallery n’est pas installé sur votre ordinateur ( Démarrer > Galerie de photos), vous devez le télécharger et l'installer dans le cadre de Windows Essentials 2012 ;
2. Lancez MS Photo Gallery et recherchez votre fichier graphique ;
3. Faites un clic droit dessus et sélectionnez « Redimensionner... » :

1. Sélectionnez un préréglage prêt à l'emploi : " Petit 640 pixels", "Moyen 1024", "Grand 1280", etc.

1. Cliquez sur " Redimensionner et enregistrer" Après avoir augmenté la taille de l'image, l'image sera placée dans le même dossier et l'original y restera également.

Conseil :

• Si vous devez définir la taille exacte de l'image, sélectionnez " Coutume" et définissez la taille sur le côté le plus grand de la photo ;
• Pour redimensionner plusieurs photos à la fois, sélectionnez-les tout en maintenant la touche Ctrl enfoncée.

Méthode 3 : Comment redimensionner une image dans Photoscape

Vous pouvez augmenter la taille de l'image dans Photoshop. Ou utilisez Photoscape pour cela.

1. Téléchargez Photoscape et installez-le. Lancer le programme;
2. Allez dans l'onglet « Éditeur » et recherchez la photo que vous souhaitez modifier :

1. Au bas de l'image il y a un bouton " Redimensionner", Cliquez dessus.
2. Définissez une nouvelle taille de photo. Assurez-vous que l'option " Conserver les proportions" est activé et appuyez sur le bouton "OK":

1. Enregistrez l'image modifiée.

Conseil :

• Si vous devez redimensionner plusieurs images, utilisez le " Éditeur de lot" Ajoutez un dossier et redimensionnez toutes les photos qu'il contient ;
• Si vous ne connaissez pas la taille exacte, vous pouvez définir le « Pourcentage » de la taille originale.

Méthode 4. Comment redimensionner une image dans IrfanView

1. Installez IrfanView - un excellent outil pour visualiser et agrandir des images ;
2. Ajoutez une photo en la faisant glisser dans la fenêtre du programme ou en cliquant sur le premier bouton de la barre d'outils :

1. Allez dans l'onglet "Image", sélectionnez " Changer la taille/les proportions» ( Ctrl+R);
2. Définissez la nouvelle taille en pixels, centimètres, pouces ou en pourcentage de l'image d'origine :

1. Enregistrez l'image.

Conseil :

• Vous pouvez utiliser des tailles standards : 640 x 480 pixels, 800 x 600 pixels, 1024 x 768 pixels, etc.
• Pour conserver des photos de haute qualité, assurez-vous que votre DPI est réglé sur au moins 300.

Méthode 5. Comment redimensionner une image en ligne

1. Pour redimensionner une image en ligne, accédez à PicResize.
2. Cliquez sur le bouton Parcourir" pour sélectionner une photo. Cliquez sur " Continuer»:

1. Sélectionnez un pourcentage de l'image originale, par exemple 50 % plus petit. L'outil affichera la taille de l'image de sortie. Alternativement, vous pouvez saisir votre taille exacte en sélectionnant " Format personnalisé»:

La photo sera redimensionnée à la taille spécifiée en centimètres (millimètres, pouces), ainsi qu'à la taille DPI spécifiée, conformément aux normes d'impression papier. Les dimensions en cm, mm et pouces peuvent être spécifiées avec une précision au millième, par exemple, au lieu du format 15x10, vous pouvez définir 15,201x10,203 cm.

Tableau avec les tailles de photos standard en position verticale (portrait) :

Format de papier standard Format A4- 21x29,7 cm ou 2480x3508 pixels à 300 dpi. Les dimensions d'autres formats de feuilles peuvent être consultées sur la page Wikipédia, mais rappelez-vous simplement que les dimensions y sont répertoriées en millimètres et en pouces, c'est-à-dire Dans les paramètres de cette page, vous devez sélectionner la valeur appropriée.

Si vous devez redimensionner une photo sans prendre en compte le DPI (points par pouce), c'est-à-dire en respectant uniquement les proportions du format spécifié, alors pour ce faire, vous devez définir le paramètre « Taille en DPI » sur « 0 » dans les paramètres.

L'image originale n'est en aucun cas modifiée. Vous recevrez une autre image traitée.