Comment redimensionner une image pour le Web

Cet article explique comment redimensionner une image pour le Web. Tout d'abord en pixels pour que l'image s'intègre correctement sur la page Web. Puis en kilo-octets pour réduire la taille du fichier sans trop dégrader l'image.

Pourquoi redimensionnons-nous les images pour le Web ?

Nous voulons que les images soient belles à l'écran et qu'elles soient téléchargées rapidement pour les visiteurs du site Web.

Les sites Web avec des images à chargement rapide seront mieux classés sur les moteurs de recherche.

Parce que les moteurs de recherche préfèrent envoyer les utilisateurs vers des sites Web qui offrent une bonne expérience.

Il y a deux étapes vers une image à chargement rapide :

• La première étape consiste à redimensionner l'image en pixels - et devrait venir en premier.
  C'est la largeur et la hauteur. Il doit être juste de la bonne taille pour sa place sur le site Web.
  Il y a quelques bizarreries dans le dimensionnement des images depuis l'introduction des sites Web réactifs.
  Une image doit être de la bonne taille pour un mobile, une tablette, un ordinateur de bureau et un téléviseur dont nous parlerons plus tard.
• La deuxième étape consiste à réduire la taille de l'image en kilo - octets , appelée compression.
  La compression réduit ou combine les couleurs d'une image afin de réduire la taille en kilo-octets. Il est possible de le faire sans trop perdre en qualité.

L'exécution de ces deux tâches - redimensionnement et compression - est connue sous le nom d'optimisation d'une image pour le Web.

Je vais vous montrer les meilleures pratiques pour redimensionner une image et comment le faire.

Les complications des images responsives

Commençons par examiner les images réactives - celles qui se redimensionnent pour bien paraître sur différentes tailles d'écran.

Nous concevons d'abord pour le mobile, je vais donc commencer par référencer la version mobile d'un site web.

Sur les sites Web mobiles, l'image s'étend généralement sur toute la largeur de l'écran. Les images s'empilent sur le texte et les utilisateurs sont très habitués à faire défiler rapidement de longues pages Web conviviales pour les mobiles.

Pour un appareil mobile, une très bonne largeur pour une image est de 640 pixels. La hauteur peut être tout ce que vous souhaitez.

Mais le dimensionnement des images ne s'arrête pas là. Une taille unique ne convient pas à tous.

Images sur différents appareils

Pensons à cette même image sur un moniteur extra-large ou un écran de télévision - oui, les sites Web sont désormais accessibles via votre téléviseur intelligent.

L'image peut se trouver dans une colonne à gauche du texte.

Il peut s'étendre sur la largeur de l'écran comme sur la version mobile. Nous appelons ces images de héros.

Imaginez à quel point cette image doit être grande maintenant ?

Pour un téléviseur, une image parfaite au pixel près aurait 1920 pixels de large, voire plus.

Si vous avez déjà réduit l'image de 640 pixels pour un mobile, cela aura l'air terrible si vous essayez de l'agrandir à 1920 pixels. Vous l'étireriez à plus de 400%.

La mise à l'échelle des images n'a pas l'air bien - les pixels s'étirent et l'image semble floue.

Se contenter de maintenir les images à 1920 pixels ne résout pas non plus le problème. Ceux-ci se téléchargent si lentement, en particulier sur les connexions Internet lentes.

Pour ajouter aux complications : une image doit avoir la taille exacte en pixels pour être utilisée sur la page. Les moteurs de recherche aiment avoir une bonne idée de la largeur et de la hauteur – appelées dimensions.

Vous pouvez donc voir qu'il n'y a pas de taille standard et que tout devient assez compliqué. Tout ce que nous pouvons faire est de notre mieux.

Plugins WordPress pour images adaptatives

Il existe quelques plugins WordPress qui aident à fournir la taille d'image correcte à l'appareil, appelés images adaptatives.

Fondamentalement, une petite image se télécharge en premier, que ce soit en taille ou en résolution.

Si la résolution de l'écran est grande, le plugin fournit la version la plus grande. Cela accélère le temps d'attente pour le visiteur.

C'est la solution si vous souhaitez utiliser des images de grands héros mais que vous vous souciez du temps de téléchargement.

Voici deux plugins d'image adaptative que j'aime :

• Images adaptatives pour WordPress par Nevma
  Envoie simplement des versions plus petites des images aux appareils mobiles, donc un plugin très basique qui fait le travail une fois que les paramètres ont été enregistrés après l'activation.
• Image adaptative Shortpixel par ShortPixel
  Ce plugin est intelligent. Il commencera à recadrer et à compresser les images pour différents écrans dès qu'il sera activé. Bien que vous puissiez avoir un plus grand contrôle si nécessaire. La documentation ShortPixel est également complète. Vous pouvez même comparer une image avant et après compression avec leur test de compression d'image.
  

Donc, ce que je ferais, c'est d'utiliser ces plugins adaptatifs, mais ne vous fiez pas entièrement à eux et jetez des photos sur votre site WordPress directement à partir d'un appareil photo. Gardez votre médiathèque propre.

Redimensionnez d'abord l'image et compressez-la au minimum pour réduire la Ko. Une fois que vous l'avez téléchargé sur WordPress, le plugin d'image adaptative fera le reste.

Commençons par redimensionner une image pour le Web.

Redimensionner une image pour le Web – en pixels

Avec tout ce que nous avons discuté à l'esprit, choisissez la largeur de votre image.

• Un photographe aurait besoin d'images d'excellente qualité. Pour les afficher en plein écran sur un moniteur extra large, ils auront besoin d'une assez grande image. Taillez les photos à au moins 1920 pixels.
• Pour les autres, je conseille d'opter pour 1200 pixels. C'est un bon équilibre. Les personnes sur de très grands moniteurs verront une pixellisation sur les images pleine largeur, mais c'est un compromis pour une image à chargement rapide.

Pour mon propre site Web et mon blog, j'utilise des images d'une largeur maximale de 1200 pixels, la plupart de celles qui se trouvent sur les pages sont de 800. Voici pourquoi :

• Les images pleine largeur ne sont jamais utilisées sur mon site Web. J'aime que tout soit vraiment rapide.
• Mon entreprise n'est pas particulièrement visuelle, les gens n'ont pas besoin de voir mes photos à une si haute résolution.
• J'utilise des images de taille exacte séparées pour Open Graph et cela ne nécessite rien de plus grand que 1200.
• Grâce à Google Analytics, je sais que les personnes qui visitent mon site utilisent un appareil de poche ou un ordinateur portable. Informations utiles.

Je le laisse à votre discrétion.

Logiciel de retouche d'image gratuit

Il existe de nombreux outils gratuits disponibles en ligne ainsi que des programmes de retouche d'images qui peuvent être téléchargés.

Pour les photos, respectez le format de fichier JPEG, et c'est ce que nous aborderons ici.

Pour les vecteurs, optez pour PNG ou SVG - et c'est pour un futur tutoriel.

Logiciel d'édition d'images GIMP

'GIMP' (le programme de manipulation d'images GNU) est un éditeur d'images entièrement gratuit.

Téléchargez la version stable actuelle de GIMP à partir du site Web.

GIMP fournit un tutoriel sur la modification de la taille (dimensions) d'une image (échelle).

Éditeurs d'images en ligne

Une recherche rapide de « image de redimensionnement en ligne » dans Google vous donnera toute une série d'options pour vous permettre de télécharger, redimensionner, compresser et télécharger votre Jpeg.

Le premier résultat que j'ai trouvé était resizeimage.net. Très simple à utiliser - il recadre, redimensionne et compresse une image.

Si vous souhaitez recadrer l'image, utilisez l'option numéro 2, mais j'ai contourné cela et suis allé directement à l'option numéro 4 où je peux la redimensionner en pixels.

Mettez 1200 dans le champ de largeur, Nan en hauteur et cochez la case Conserver le rapport hauteur/largeur.

Le format de l'image de sortie sera JPG.

Choisissez une option de compression.

La compression progressive affichera une version pixelisée du JPEG dès que le visiteur sera sur la page. Le reste des informations se téléchargera progressivement pour construire l'image finale. J'aime bien cette option car le visiteur sait attendre.

Réduisez la qualité de l'image d'environ 75 %, encore une fois en fonction du degré d'impitoyabilité que vous souhaitez être.

Redimensionner une image en Ko – compression

La compression est très différente du redimensionnement. Toutes les images doivent être compressées avant le téléchargement, même si vous utilisez un plugin d'image adaptatif.

La compression réduit la taille du fichier de l'image en réduisant les pixels, de sorte qu'elle se télécharge plus rapidement.

Pendant la phase de compression, essayez de ne pas trop compromettre la qualité de l'image.

Essayez d'atteindre un équilibre entre une bonne image et un téléchargement rapide.

Les images peuvent également être compressées à l'aide du logiciel GIMP.

Tutoriel GIMP sur la modification de la taille (FileSize) d'un fichier Jpeg.