Redimensionnement et optimisation d'images en ligne

Si vous disposez d’un ensemble de photos étonnantes, je suis sûr que vous aimeriez les partager avec vos clients sur votre site Web. Vous pouvez créer un joli diaporama, créer des galeries ou simplement insérer une image dans une seule page ou un blog. Quelle que soit l'option que vous sélectionnerez, il y aura une seule difficulté que vous rencontrerez avec un éditeur de contenu non spécialisé : le redimensionnement de l'image.

Ci-dessous, quelques recommandations pour le redimensionnement de l'image qui vous seront utiles.

Adaptez la taille à votre contenu

Redimensionnez toujours vos images en fonction de la taille du contenu ou de la largeur du contenu. Par exemple, si votre zone de contenu est limitée à 650 pixels de large, il n'est pas nécessaire de dimensionner votre image au-delà de 650 pixels, car votre page n'affichera que jusqu'à 650 pixels. Si la propriété de taille de l'image est plus petite ou plus grande que le conteneur, la qualité d'affichage sera détériorée.

Adapter la résolution des images pour le Web

Il n'y aura aucune impression de « par pouce » dans le plan d'un site Web. Le PPI, c'est-à-dire les pixels par pouce et le DPI, c'est-à-dire les points par pouce, n'ont aucune pertinence lorsque vous modifiez ou redimensionnez votre image à des fins telles que l'envoi d'un courrier électronique, un blog ou un partage sur les réseaux sociaux. À l'exception de l'impression, de l'affichage à l'écran, vous ne pourrez faire aucune différence dans les caractéristiques ou la qualité de l'image.

C'est particulièrement le cas pour le PDF , évitez de rendre disponible pour la lecture sur le Web des PDF contenant des images avec une résolution supérieure à 72 dpi. Dans ce cas, l' ImageRecycle peut vous aider, optimisez un PDF avec des images de 300 dpi à l'intérieur et vous pouvez enregistrer 98 % de la taille du PDF avec une qualité parfaite pour être lu sur le Web.

La meilleure qualité d'exportation JPG avec ImageRecycle

En utilisant Photoshop, la recommandation pour le Web est de sauvegarder vos images JPEG avec un maximum de 1000 pages. 20% de compression. Vous pouvez également effectuer des tests avec diverses vertus JPEG qui vous conviennent le mieux. L'application d'une compression globale est une question d'équilibre entre taille et qualité.

Désormais, avec l’algorithme d’optimisation d’image ImageRecycle , le processus est assez différent. ImageRecycle détecte le taux de compression actuel de l'image et, en conséquence, optimise l'image. La compression n'étant pas appliquée sur l'ensemble de l'image, vous serez véritablement surpris par le test ci-dessous.

Gardez à l’esprit : moins l’image originale est compressée, meilleure sera l’optimisation et la taille.

Dans l'exemple ci-dessous, j'ai exporté 4 images jpg à l'aide de Photoshop au niveau de qualité : 60 % |
80% | 90% | 100% Ensuite, j'ai optimisé les images en utilisant ImageRecycle , voici le résultat en termes de taille. Concernant la qualité les 90/100% sont un peu meilleurs que les 2 autres. La leçon ici est la suivante : exportez vos images jpg le moins compressées possible, ImageRecycle fera le reste !

Optimiser les images finales

Selon le site Web que vous utilisez, les mêmes images peuvent être affichées sur différentes pages avec des tailles différentes. C'est généralement quelque chose que vous trouverez sur un commerce électronique avec Slider, liste de produits, détails du produit,...
Le processus de 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 utilisateur ORIGINALES et FINALES. Ne faites pas confiance aux bibliothèques en ligne et au générateur de cache, sinon vous pourriez avoir des problèmes de qualité et de taille. Si votre image originale est déjà optimisée de votre côté (en faisant un réglage fin entre qualité, couleurs, compression) pour économiser de la bande passante et du chargement des pages, avec certaines bibliothèques de redimensionnement d'extensions web, vous pouvez perdre tout ça !

La solution:

• Appliquez l'optimisation sur l'image affichée sur le navigateur de votre client final. Vous pouvez le faire manuellement sur chaque image et pour chaque taille ou utiliser notre extension API ou CMS d' ImageRecycle pour sélectionner le dossier dans lequel vos images finales sont stockées. Ensuite, exécutez une optimisation automatique dessus.
• Utilisez notre redimensionneur pour les images originales. Vous pouvez économiser de l'espace de stockage sur le serveur, manipuler plus rapidement vos images et généralement vous n'avez pas besoin d'une image d'une largeur supérieure à 1600 px lors de l'affichage final.

Et maintenant: HTML5 et le élément

Les techniques de conception réactive qui incluent les requêtes multimédias permettent aux concepteurs de sites Web d'adapter la mise en page d'un site à une large gamme d'appareils, des ordinateurs de bureau aux smartphones, et de lui donner une apparence toujours nette. Le problème ici n'est pas l'affichage mais les performances, c'est l'image du bureau qui est affichée et chargée sur smartphone et tablette.

le L'élément HTML5 tente de résoudre ce problème. L'avantage d'une ressource d'image optimisée en mode natif est le temps de chargement - particulièrement important pour les utilisateurs sur des connexions Internet mobiles plus lentes. le L'élément permet un véritable redimensionnement dynamique en donnant simplement une instruction HTML au navigateur.

Extrait du code :

La limite pour le moment est que cela nécessite une version chrome très récente (39) et du JS pour fonctionner correctement. Dans un futur proche, avec cette technologie associée à un optimiseur d’image, on peut s’attendre au meilleur pour le temps de chargement des sites web.