Become a HubSpot power user — join us for HubSpot Training Day 2017.

COS-General

Qu'est-ce que le redimensionnement automatique des images ?

Dernière mise à jour: July 8, 2017

Disponible avec :

Marketing: Basique, Pro, Enterprise
Sales: N/A

Le redimensionnement automatique des images est une fonctionnalité activée par défaut sur tous les portails HubSpot. Cette fonctionnalité sert à optimiser les images, réduire la durée de chargement par les navigateurs et améliorer le score Google PageSpeed.

Le redimensionnement automatique des images permet d'optimiser une grande image originale en fonction de sa taille d'affichage sur un site web. Il permet de réduire drastiquement le temps de chargement de l'image par un navigateur. Par exemple, si un utilisateur charge une image de dimensions 5 000 x 5 000 px qui sera affichée en taille 500 x 500 px, le navigateur doit d'abord télécharger l'image originale, puis la redimensionner en fonction de la taille de la fenêtre. Avec le redimensionnement automatique de l'image, lorsque les attributs de hauteur et de largeur sont détectés dans le code HTML, l'image est automatiquement redimensionnée lors du premier chargement de la page et la version redimensionnée est enregistrée dans le cache de notre CDN. Après le premier chargement, l'utilisateur final ne devra plus télécharger de contenu superflu, sans impact sur la qualité de l'image affichée.

Voici un exemple :

Avant :


Image ajoutée par l'utilisateur

Après :


Image ajoutée par l'utilisateur

Est-il préférable de redimensionner mes images hors ligne ?

Oui. Redimensionner vos images à la taille d'affichage souhaitée permet d'obtenir une meilleure qualité qu'avec le redimensionnement automatique. Les applications comme Photoshop, ou même l'application Aperçu sur OS X, disposent d'algorithmes de redimensionnement avancés qui génèrent des images de haute qualité, même fortement miniaturisées. Vous pouvez également redimensionner vos images dans l'éditeur intégré du Gestionnaire de fichiers.

Y a-t-il un impact sur la compatibilité Retina ?

Les images affichées sur des appareils disposant d'écrans haute définition (plus de 200 pixels par pouce, en fonction de la distance d'utilisation standard) apparaîtraient en tout petit si la résolution d'origine était conservée. Safari et les autres navigateurs compatibles avec les écrans Retina grossissent les images de manière proportionnelle, ce qui peut affecter leur qualité. Pour résoudre ce problème, vous pouvez télécharger des images au double de la résolution utilisée par les écrans standard et redimensionner les images dans le navigateur. Cette solution est loin d'être optimale, car elle oblige la majorité des utilisateurs à télécharger des images de taille beaucoup plus importante que nécessaire (deux fois, voire quatre fois plus grandes). Le paramètre noresize peut être appliqué aux grandes images destinées aux écrans Retina, mais il existe des solutions plus performantes. Retina.js est une fonctionnalité Javascript légère, qui autorise le téléchargement d'images configurées pour les écrans Retina uniquement lorsqu'un écran Retina est effectivement utilisé. Vous pouvez obtenir le même résultat en modifiant le code CSS. Apple dispose d'un article à destination des développeurs détaillé à ce sujet.

Est-il possible de désactiver le redimensionnement automatique des images ?

Cette fonctionnalité peut être désactivée au cas par cas en ajoutant le paramètre de requête noresize à l'URL de l'image.