Guesty Sites Internet optimise automatiquement vos images pour garantir un chargement rapide de votre site sur tous les appareils. Lorsque vous téléchargez une image, le système crée jusqu'à cinq copies plus petites et affiche la taille la plus adaptée aux visiteurs utilisant un ordinateur, une tablette ou un mobile.
Taille de l'image et exigences relatives aux fichiers
Pour garantir le bon chargement et l'affichage correct de vos images, veuillez respecter les exigences suivantes :
- Limite de fichiers : Vous pouvez télécharger jusqu'à 15 000 fichiers par site, y compris des images, des clips audio, des icônes et des documents.
- Taille des fichiers : Chaque fichier ne doit pas dépasser 50 Mo.
- Résolution de l'image : La surface totale d'une image ne peut pas dépasser 3 145 728 pixels (multipliez la largeur par la hauteur pour vérifier).
- Taille des fichiers image : Bien que la limite générale soit de 50 Mo, pour des performances optimales, veillez à ce que la taille des images ne dépasse pas 15 Mo.
- Formats pris en charge : png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon et webp.
Assistance WebP
Les images WebP sont prises en charge par Chrome, Android et les dernières versions de Safari/Mac. Pour iPhone, utilisez la version 14 ou ultérieure.
Tailles d'image optimisées par appareil
Le système ne crée que des copies plus petites que l'original. Par exemple, si vous téléchargez une image de 2 000 px de large, cinq copies optimisées sont créées. Si vous téléchargez une image de 100 px, aucune nouvelle version n'est créée.
Type d'image | Largeur de l'image |
|---|---|
| Arrière-plan | 2880px |
| Ordinateur de bureau | 1920px |
| Comprimé | 1280px |
| Mobile | 640px |
| Miniature du blog | 300px |
| Vignette | 160px |
Désactivation de l'optimisation
Vous pouvez désactiver l'optimisation des images d'arrière-plan, du widget Image et du widget Galerie photo. Toutefois, cela risque de ralentir considérablement le chargement et les performances de votre page.
Règles d'image par widget
Suivez les recommandations suivantes pour garantir que vos images ont un aspect professionnel et s'intègrent au design de votre site.
Curseur
Les diapositives s'étendent souvent sur toute la largeur de l'écran, les images larges sont donc plus adaptées.
- Formats d'image : 16:9 ou 3:4.
- Résolutions : 1600x900 ou 1280x720 px.
- Conseil de conception : Utilisez des images avec une marge importante afin que le sujet principal ne soit pas coupé lorsque la taille de l’écran change.
Galerie photo
La galerie est flexible et prend en charge différentes mises en page, comme le carrelage ou la mosaïque.
- Rapports d'aspect : Utilisez un rapport de 1:1 pour les galeries carrées ou de 2:5 pour les galeries hautes.
- Résolutions : Pour maintenir une vitesse de chargement des pages optimale, veillez à ce que vos images ne dépassent pas 1500 px.
- Conseil de design : Conservez des proportions cohérentes dans toute la galerie pour un aspect épuré.
Icônes
Les icônes servent de repères visuels et peuvent être téléchargées au format PNG transparent, JPEG ou SVG.
- Rapport d'aspect : Généralement 1:1.
- Résolutions : 200x200 ou 80x80 px.
Complexité SVG
Les fichiers SVG sont composés de code. L'utilisation de nombreux fichiers SVG complexes peut ajouter des milliers de lignes de code à votre page et ralentir son chargement. Si vous utilisez plusieurs icônes, pensez à en convertir certaines au format PNG ou JPEG.
Favicons
Les favicons s'affichent dans l'onglet du navigateur et non sur la page elle-même. Utilisez le format ICO pour un rendu optimal.
- Rapport d'aspect : 1:1.
- Résolutions : 24x24, 36x36 ou 48x48 px.
Logos
Utilisez le format SVG pour vos logos. Contrairement à d'autres formats d'image, les fichiers SVG ne sont pas redimensionnés ; votre logo restera donc net même en petit format.
Meilleures pratiques pour l'optimisation d'images
Comprendre la différence entre le format d'image et la résolution
Le format d'image est le rapport entre la largeur et la hauteur. Un format 16:9 décrit la forme, que l'image mesure 16 x 9 px ou 1600 x 900 px. [Image : Comparaison côte à côte d'un format carré 1:1 et d'un format écran large 16:9.]
Adaptation aux appareils mobiles
Une image au format 16:9 est superbe sur un ordinateur de bureau large, mais peut paraître très petite sur un écran mobile vertical. Pour y remédier :
- Redimensionnez l'image spécifiquement pour les appareils mobiles.
- Utilisez la fonction « Masquer sur l’appareil » pour afficher une version différente, recadrée verticalement, pour les utilisateurs mobiles.
Équilibre entre qualité et vitesse
Les images haute résolution sont certes esthétiques, mais elles ralentissent considérablement votre site. Les utilisateurs remarquent rarement la différence entre une image en très haute résolution et une image correctement redimensionnée. Téléversez vos images à la taille à laquelle elles sont destinées. Par exemple, si une image s'affiche en 300 x 300 px sur votre site, ne téléversez pas un fichier de 4 000 x 4 000 px.
