La taille et la qualit\u00e9 d\u2019une image d\u00e9di\u00e9e \u00e0 l\u2019utilisation sur une page web sont d\u00e9termin\u00e9es par divers \u00e9l\u00e9ments.<\/p>\n\n\n\n
La taille physique <\/strong><\/p>\n\n\n\n La taille physique d\u2019une image<\/em> est bas\u00e9e sur deux choses\u00a0: la taille de l\u2019image \u00e0 l\u2019\u00e9cran et la taille du fichier. G\u00e9n\u00e9ralement, la taille du fichier est trait\u00e9e comme un probl\u00e8me diff\u00e9rent.<\/p>\n\n\n\n La taille du fichier<\/strong><\/p>\n\n\n\n C\u2019est la taille du fichier<\/em> sur votre disque dur ou serveur.<\/p>\n\n\n\n R\u00e9solution <\/strong><\/p>\n\n\n\n La r\u00e9solution <\/em>se r\u00e9f\u00e8re aux nombre de pixels contenus dans une image. La r\u00e9solution est parfois identifi\u00e9e par la largeur et la hauteur de l\u2019image ainsi que par le nombre total de pixels dans l\u2019image.<\/p>\n\n\n\n Le type de fichier<\/strong><\/p>\n\n\n\n Il existe plusieurs types d\u2019images<\/em> que l\u2019on peut couramment trouver sur internet\u00a0: La taille physique<\/em> <\/strong> d\u2019une image est l\u2019information que nous avons besoin de conna\u00eetre afin de d\u00e9terminer la quantit\u00e9 \u00ab\u00a0d\u2019espace\u00a0\u00bb que l\u2019image occupera sur une page web. Si votre th\u00e8me WordPress dispose d\u2019une zone de contenu \u00e0 largeur fixe de 600 pixels et que l\u2019image que vous souhaitez utiliser est de 800, l\u2019image repoussera la barre lat\u00e9rale et la mise en page de votre page web, g\u00e2chant ainsi votre conception. Les images dans cette largeur de 600 pixels doivent \u00eatre limit\u00e9es \u00e0 cette largeur maximale afin de prot\u00e9ger la mise en page de votre page. C\u2019est \u00e0 vous de d\u00e9terminer la taille qu\u2019elles doivent avoir \u00e0 partir de l\u00e0, en faisant correspondre l\u2019image \u00e0 votre disposition et \u00e0 vos styles g\u00e9n\u00e9raux.<\/p>\n\n\n\n La taille du fichier<\/em> d\u00e9termine le temps n\u00e9cessaire au chargement de votre page, la taille du fichier, souvent augment\u00e9e en raison de la qualit\u00e9 d\u2019une image en haute r\u00e9solution<\/em>, rendra le chargement plus long. Les gens n\u2019ont souvent pas la patience d\u2019attendre un long temps de chargement des pages de site web, donc le fait de garder une taille de fichier faible acc\u00e9l\u00e8re le temps d\u2019acc\u00e8s \u00e0 votre page. En r\u00e8gle g\u00e9n\u00e9rale, les grandes images de haute qualit\u00e9 doivent \u00eatre conserv\u00e9es entre 100K et 60K. Les images plus petites devraient \u00eatre plus proches de 30K et moins.<\/p>\n\n\n\n La r\u00e9solution de l\u2019image <\/em>dicte sa clart\u00e9. Cependant, plus la r\u00e9solution est \u00e9lev\u00e9e, plus la taille du fichier est grande, vous devez donc faire un compromis entre la qualit\u00e9 et la taille du fichier.<\/p>\n\n\n\n Heureusement, les diff\u00e9rents types de fichiers les plus utilis\u00e9s sur internet disposent de fonctions de compression<\/em>. Lorsque vous enregistrez le fichier sous l\u2019un de ces types, il condense<\/em> ou compresse<\/em> les informations contenues dans le fichier image. Les navigateurs internet peuvent d\u00e9compresser<\/em> ces informations pour afficher l\u2019image \u00e0 l\u2019\u00e9cran. Certains logiciels graphiques vous permettent de r\u00e9gler le taux de compression pour contr\u00f4ler la qualit\u00e9 de l\u2019image (et donc la taille du fichier) au moment o\u00f9 vous l\u2019enregistrez. En fonction de l\u2019utilisation que vous faites des images de votre site, vous devrez peut-\u00eatre faire des essais pour obtenir le bon ratio qui maintiendra une bonne qualit\u00e9 de r\u00e9solution tout en conservant une petite taille de fichier.<\/p>\n\n\n\n Les sites web utilisent quatre types de fichiers<\/em> courants. La fin d\u2019un nom de fichier (appel\u00e9e extension<\/em>) indique de quel type il s\u2019agit. L\u2019un des types, Si vous n\u2019\u00eates pas s\u00fbr\u00b7e du type de fichier qui convient le mieux \u00e0 une image particuli\u00e8re, essayez d\u2019enregistrer l\u2019image dans plusieurs types et de comparer les tailles des fichiers. Utiliser le bon type peut faire une grande diff\u00e9rence\u00a0! Vous trouverez plus d\u2019informations dans l\u2019article de Sitepoint\u00a0: GIF-JPG-PNG – Quelle est la diff\u00e9rence\u00a0? (en anglais)<\/a>.<\/p>\n\n\n\n Tous les logiciels graphiques ne permettent pas de redimensionner les images, mais la plupart le font. Consultez la table des mati\u00e8res ou l\u2019index de votre logiciel graphique pour trouver le redimensionnement<\/em>, la taille<\/em>, la transformation<\/em>, la r\u00e9duction<\/em>, l\u2019agrandissement<\/em> ou tous les synonymes pour la m\u00eame chose. S\u2019il ne dispose pas de cette fonction, vous devrez peut-\u00eatre trouver un autre logiciel.<\/p>\n\n\n\n Le processus de redimensionnement des images est assez simple. Il existe g\u00e9n\u00e9ralement deux m\u00e9thodes :<\/p>\n\n\n\n Apr\u00e8s avoir redimensionn\u00e9 l\u2019image, celle-ci peut \u00eatre plus petite, mais elle peut aussi \u00eatre l\u00e9g\u00e8rement floue. Vous pouvez affiner la mise au point de l\u2019image r\u00e9duite en utilisant la fonction de r\u00e9glage fin <\/em>de votre logiciel.<\/p>\n\n\n\n Lorsque vous avez r\u00e9gl\u00e9 votre image r\u00e9duite ou une nouvelle vignette, exportez l\u2019image en jpeg,gif,png<\/code> et ico<\/code> pour les favicons<\/a> (l\u2019ic\u00f4ne \u00e0 cot\u00e9 de l’adresse du site ou dans l\u2019onglet de votre navigateur).<\/p>\n\n\n\nico<\/code>, consiste \u00e0 cr\u00e9er un fichier favicon<\/a><\/em> — mais cela n’est g\u00e9n\u00e9ralement fait que lors de la cr\u00e9ation d\u2019un site web. Les trois autres types sont utilis\u00e9s pour les images classiques :<\/p>\n\n\n\njpg<\/code> (JPEG) est utilis\u00e9 pour les photos. L\u2019enregistrement d\u2019une photo en jpg supprime des d\u00e9tails de la photo. Les bons \u00e9diteurs d\u2019images vous permettent de contr\u00f4ler la quantit\u00e9 de d\u00e9tails supprim\u00e9s (la \u00ab compression \u00bb). Diff\u00e9rentes photos n\u00e9cessitent une compression diff\u00e9rente; en faisant cela avec soin et en regardant le r\u00e9sultat, vous pouvez obtenir une photo utilisable avec une petite taille de fichier.<\/li>gif<\/code> peut \u00eatre n\u00e9faste pour les images. Il est pr\u00e9f\u00e9rable de l\u2019utiliser pour les dessins au trait, comme les logos, avec des zones solides de la m\u00eame couleur. Ou, bien entendu, pour les images anim\u00e9es.<\/li>png<\/code> est utilis\u00e9 pour les photos et le dessin au trait. Il compresse les photos sans perdre les d\u00e9tails, mais produit g\u00e9n\u00e9ralement des fichiers photo plus volumineux que les JPEG. Cependant, certains navigateurs plus anciens ne prennent pas compl\u00e8tement en charge le format png<\/code>.<\/li><\/ul>\n\n\n\nRedimensionner les images<\/h2>\n\n\n\n
jpg<\/code>, gif<\/code> ou png<\/code>.<\/p>\n\n\n\nRessources<\/h2>\n\n\n\n