Redimensionnement et optimisation d'images en ligne

Si vous possédez une collection de superbes photos, vous aimeriez sans doute les partager avec vos clients sur votre site web. Vous pouvez créer un joli diaporama, des galeries ou simplement insérer une image sur une page ou un article de blog. Quelle que soit l'option choisie, vous rencontrerez une difficulté que vous avez peut-être déjà rencontrée avec un éditeur de contenu non spécialisé : le redimensionnement des images.

Vous trouverez ci-dessous quelques recommandations pour le redimensionnement d'images qui vous seront utiles.

Adaptez la taille à votre contenu

Redimensionnez toujours vos images en fonction de la taille ou de la largeur du contenu. Par exemple, si votre zone de contenu est limitée à 650 pixels de large, il est inutile d'agrandir votre image au-delà de cette taille, car votre page n'affichera que 650 pixels. Si la taille de l'image est inférieure ou supérieure à celle de son conteneur, la qualité d'affichage sera dégradée.

Adapter la résolution des images pour le web

L'indication « par pouce » n'apparaîtra pas dans le rendu des images sur les sites web. Les termes PPI (pixels par pouce) et DPI (points par pouce) sont sans importance lorsque vous modifiez ou redimensionnez une image pour l'envoyer par e-mail, la publier sur un blog ou la partager sur les réseaux sociaux. Hormis pour l'impression, l'affichage à l'écran ne révélera aucune différence de qualité ou d'aspect de l'image.

C'est particulièrement important pour les PDF : évitez de publier sur le Web des PDF contenant des images d'une résolution supérieure à 72 dpi. Dans ce cas, l' ImageRecycle peut vous aider : optimisez un PDF contenant des images de 300 dpi et vous pourrez ainsi économiser jusqu'à 98 % de sa taille tout en conservant une qualité optimale pour la lecture en ligne.

La meilleure qualité d'exportation JPG avec ImageRecycle

Pour le web, Photoshop recommande d'enregistrer vos images JPEG avec un taux de compression maximal de 20 %. Vous pouvez également tester différents niveaux de compression JPEG afin de trouver celui qui vous convient le mieux. L'application d'une compression globale repose sur un compromis entre taille et qualité.

Avec l'algorithme d'optimisation d'images ImageRecycle , le processus est bien différent. ImageRecycle détecte le taux de compression actuel de l'image et l'optimise en conséquence. Comme la compression n'est pas appliquée à l'ensemble de l'image, le test ci-dessous vous surprendra agréablement.

À noter : moins l’image originale est compressée, meilleure sera l’optimisation et la taille sera réduite.

Dans l'exemple ci-dessous, j'ai exporté quatre images JPG avec Photoshop, à différents niveaux de qualité : 60 %, 80 %, 90 % et 100 %.
Je les ai ensuite optimisées avec ImageRecycle ; voici le résultat concernant leur taille. La qualité est légèrement supérieure pour les images à 90 % et 100 %. La leçon à retenir : exportez vos images JPG avec le moins de compression possible, ImageRecycle se chargera du reste !

Optimiser les images finales

Selon le site web que vous gérez, les mêmes images peuvent s'afficher sur différentes pages avec des tailles différentes. C'est typiquement le cas des sites e-commerce avec des diaporamas, des listes de produits, des fiches produits, etc.
Le redimensionnement est généralement effectué par une bibliothèque PHP en ligne comme GD. Assurez-vous de la qualité et du poids de vos images originales par rapport aux images finales. Ne vous fiez pas aux bibliothèques en ligne ni aux générateurs de cache, car vous risquez d'avoir des problèmes de qualité et de taille. Si votre image originale est déjà optimisée (qualité, couleurs, compression) pour économiser de la bande passante et accélérer le chargement de la page, certaines extensions de redimensionnement web peuvent vous faire perdre tous ces avantages !

La solution :

• Optimisez l'image affichée dans le navigateur de votre client final. Vous pouvez le faire manuellement pour chaque image et chaque taille, ou utiliser notre API ou l'extension CMS d' ImageRecycle pour sélectionner le dossier contenant vos images finales. Lancez ensuite l'optimisation automatique.
• Utilisez notre outil de redimensionnement pour les images originales. Vous économiserez ainsi de l'espace serveur, manipulerez vos images plus rapidement et, généralement, une largeur supérieure à 1 600 px est inutile pour l'affichage final

Et ensuite : HTML5 et…<picture> élément

Les techniques de conception adaptative, notamment les requêtes média, permettent aux concepteurs web d'adapter la mise en page d'un site à une large gamme d'appareils, des ordinateurs de bureau aux smartphones, tout en garantissant un rendu net et précis. Le problème ici ne réside pas dans l'affichage, mais dans les performances : il s'agit de l'image initialement prévue pour ordinateur qui est affichée et chargée sur smartphone et tablette.

Le<picture> L'élément HTML5 tente de résoudre ce problème. L'avantage d'une ressource image optimisée nativement réside dans le temps de chargement, particulièrement important pour les utilisateurs disposant de connexions Internet mobiles lentes.<picture> Cet élément permet un véritable redimensionnement dynamique en fournissant simplement une instruction HTML au navigateur.

Extrait de code :

Actuellement, cette fonctionnalité nécessite une version très récente de Chrome (39) et l'utilisation de JavaScript pour fonctionner correctement. Prochainement, grâce à l'association de cette technologie avec un optimiseur d'images, nous pouvons espérer des temps de chargement de site web optimaux.