Redimensionnement et optimisation d'image en ligne

Si vous avez un groupe de photos incroyables, je suis sûr que vous aimeriez le 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 choisirez, vous rencontrerez une seule difficulté avec l'é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 à une taille supérieure à 650 pixels, car votre page n'affichera que 650 pixels. Si la propriété de taille d'image est plus petite ou plus grande que le conteneur, la qualité d'affichage sera détériorée.

Adapter la résolution d'image 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'e-mails, les blogs ou le partage sur les réseaux sociaux. À l'exception de l'impression, de l'affichage à l'écran, vous ne pourrez faire aucune différence dans la fonctionnalité ou la qualité de l'image.

C'est notamment le cas pour le PDF , évitez de rendre disponible pour la lecture Web des PDF contenant des images d'une résolution supérieure à 72 dpi. Dans ce cas, l' optimiseur PDF ImageRecycle peut vous aider, optimiser un PDF avec des images 300 dpi à l'intérieur et vous pouvez économiser 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 max. 20% de compression. Vous pouvez également effectuer des tests avec diverses vertus JPEG qui fonctionnent le mieux pour vous. L'application d'une compression globale est une question d'équilibre entre taille et qualité.

Maintenant, avec l'algorithme d'optimisation d'image ImageRecycle , le processus est assez différent. ImageRecycle détecte le taux de compression d'image actuel et, à ce propos, optimise l'image. Étant donné que la compression n'est pas appliquée sur toute l'image, vous serez vraiment surpris par le test ci-dessous.

Gardez à l'esprit: moins l'image originale est compressée, une meilleure optimisation et taille seront.

Dans l'exemple ci-dessous, j'ai exporté 4 images jpg en utilisant Photoshop au niveau de qualité: 60% |
80% | 90% | 100% Ensuite, j'ai optimisé les images en utilisant ImageRecycle , voici le résultat de la taille. Concernant la qualité, les 90/100% sont un peu meilleurs que les 2 autres. La leçon ici est: exportez vos images jpg les 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 typiquement 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 vs FINALES. Ne faites pas confiance aux bibliothèques en ligne et au générateur de cache ou vous pouvez avoir des problèmes de qualité et de taille. Si votre image d'origine 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 librairies de redimensionnement d'extensions web, vous pouvez perdre tout ça !

La solution:

• Appliquez l'optimisation sur l'image affichée sur votre navigateur 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. Exécutez ensuite l'optimisation automatique dessus.
• Utilisez notre resizer pour des images originales. Vous pouvez économiser le stockage du 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 sur l'affichage final

Et maintenant: HTML5 et le élément

Les techniques de conception réactive qui incluent des requêtes multimédias permettent aux concepteurs Web d'adapter la mise en page d'un site à un large éventail d'appareils, des ordinateurs de bureau aux smartphones, et de lui donner un aspect toujours net. 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 de code:

La limite pour le moment est que cela nécessite une version chrome très récente (39) et quelques 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 du site.