Optimiser les images de bannière Hero pour tous les appareils

Comment fonctionne la bannière du héros ?

GemPages redimensionne automatiquement les images des bannières Hero pour améliorer la vitesse de chargement des pages pour différents appareils :

• Affichage tablette : L'image est redimensionnée à une largeur maximale de 1024 px.
• Vue mobile: L'image est redimensionnée à une largeur maximale de 768 px.

Ce redimensionnement peut réduire la qualité de l'image si elle est utilisée sur ordinateur et mobile. Pour optimiser l'apparence de votre bannière Hero, deux options s'offrent à vous :

• Utilisez le bouton même rapport d'image pour tous les appareils.
• Utilisez le images séparées pour chaque appareil.

Comment optimiser les images de bannière Hero pour tous les appareils ?

Option 1 : utiliser un rapport d'image unique pour tous les appareils

Si vous souhaitez utiliser la même image sur ordinateur, tablette et mobile, cliquez sur le bouton Élément héros pour ouvrir ses paramètres et suivre ces étapes :

Étape 1 : Téléchargez votre image sur la bannière Hero. 

• Extrait du Paramètres onglet dans la barre latérale gauche, faites défiler vers le bas jusqu'à l' Présentation .
• Cliquez sur le bouton Ajouter ...bouton " à côté du Image(s) option pour étendre la configuration de l'arrière-plan de l'image.
• Frappé Télécharger une nouvelle image, et assurez-vous que l'image mesure au moins 1920 px large.

Étape 2 : Définissez le rapport taille/bannière pour chaque vue de l'appareil.

• Découvrez Cadre métallique robuste option sous la Taille .
• Choisissez le Comme source de bannière de la liste déroulante.

La bannière sera automatiquement redimensionnée pour s'adapter à la taille de l'écran tout en conservant les proportions d'origine de l'image.

Option 2 : utiliser des images distinctes pour chaque appareil

Pour ordinateur de bureau et tablette :

Téléchargez votre image sur la bannière Hero. Veillez à utiliser une image d'au moins 1920 px de large. Cela garantit des visuels de haute qualité sur les grands écrans.

Pour mobile:

Étape 1 : Choisissez la fenêtre d’affichage de l’appareil que vous souhaitez optimiser.

Étape 2 : Téléchargez une image optimisée pour les appareils mobiles. 

L'image doit correspondre au rapport largeur/hauteur de la bannière et avoir une largeur minimale de 768 px.

Exemple : Si la largeur de votre bannière est de 375 px et la hauteur de la bannière de 500 px, l'image téléchargée doit conserver le même rapport de 375 : 500 mais avoir une largeur de 768 px.

• Largeur minimale = 768 px
• Hauteur calculée = (768/375)×500=1024px
• La taille optimale pour cet exemple serait 768 × 1024 px.