Insérer des images et des images en arrière-plan (background-image)

Introduction

Lorsque vous souhaitez mettre des visuels sur votre page, il est important que vous sachiez au préalable dans quel but. En effet, la méthode que vous devrez adopter changera en fonction de ce que vous souhaitez faire.

L'image : pour illustrer

L'image est le moyen classique pour intégrer un visuel. Sur Oxygen, l'image est un élément à part entière, au même titre qu'un texte ou qu'un titre. Cela signifie que dans la structure, l'image est séparée des autres éléments en temps normal (voir le guide dédié au positionnement pour plus d'information)

Avantages

• Plus facile à intégrer pour des mises en pages simples : Vous intégrez votre image, vous définissez sa taille, et c'est tout.

• Avantage légèrement le SEO : Si vous cherchez à apparaître en haut des résultats de recherche, l'emploi d'images est intéressant, car cela plaît aux moteurs de recherches :
  • Les moteurs de recherche favorisent les pages lorsqu'ils repèrent des images
  • Il est possible d'ajouter un texte alternatif qui décrit l'image au moteur de recherche, ce qui ajoute encore un bonus.

Inconvénients :

• Difficile à éditer : Il est beaucoup plus difficile de modifier la forme d'une image, car elle se retrouvera très vite déformée. C'est un problème qui peut se révéler très handicapant si vous cherchez à faire une mise en page original.

L'image en arrière-plan : pour décorer

En développement, on qualifie l'image en arrière-plan de background image. Le concept est ici l'inverse : l'image n'est plus un élément à part entière, mais vient simplement remplir le fond d'une div. Ici, l'objectif n'est pas d'afficher une image telle quelle, mais de rendre la mise en page plus agréable à l'oeil.

Avantages

• Plus adapté aux mise en pages complexes : Les images en arrière-plan sont beaucoup plus faciles à travailler. Elle peuvent être étirées ou intégrer des effets sans altérer l'image.

Inconvénient

• Non adapté au SEO : les images d'arrière-plan ne sont pas repérées par les moteurs de recherche. Pour eux, c'est comme si elles n'existaient pas. Si le moteur de recherche estime qu'une page n'a pas d'image, cela peut handicaper le SEO (bien que ce soit pas déterminant).

Intégrer des images avec Oxygen Builder

Image classique

Pour commencer, cliquez sur le conteneur parent qui contiendra l'image. Deux méthodes s'offrent à vous :

• Méthode Classique

Cliquez ensuite sur le + bleu en haut à gauche et insérez une image. Elle est située dans la section basics, mais vous pouvez également la rechercher en utilisant l'onglet de recherche.

• Raccourci

Appuyez sur la touche i de votre clavier (sauf si vous avez changé les raccourcis sur Oxygen)

Une fois l'image ajoutée, insérez l'image dont vous avez besoin :

• Cliquez sur l'élément image (barre de droite)
• Cliquez sur l'onglet primary (à gauche)
• Cliquez sur le bouton browse

• La médiathèque va s'ouvrir. Choisissez l'image à insérer ou déposez l'image à insérer en glisser-déposer
• Ajoutez un texte alternatif (décrivez l'image en quelques mots de manière à ce qu'une personne non-voyante puisse la comprendre)
• Cliquez sur le bouton select image (en bas à gauche)

• Une fois l'image insérée, redimensionnez-la en utilisant l'onglet Size & Spacing, puis en utilisant le champ width (largeur) ou heigth (hauteur)
  • Attention à ne pas utiliser width et heigth en même temps dans le cas d'une image, ou elle sera déformée

Image d'arrière-plan

Pour commencer, sélectionnez le conteneur dans lequel vous souhaitez insérer une image.

• Ouvrez l'onglet background
• Dirigez-vous sur le champ background image et cliquez sur Browse

• Comme pour l'image classique, insérer votre image et entrez un texte alternatif
• L'image apparaîtra de manière à prendre tout le conteneur. Redimensionnez votre conteneur pour modifier la pace que prend l'image. Pour en savoir plus sur comment dimensionner un conteneur, consultez notre guide dédié.

Quelques réglages supplémentaires

Une fois l'image intégré, vous aurez certainement de modifier son rendu pour qu'elle apparaisse comme vous l'imaginez. Voici quelques options à votre disposition que vous pouvez utiliser dans l'onglet background. N'hésitez pas à tester plusieurs options pour voir celle qui a votre préférence.

Background Size

Oblige la taille de l'image à se conformer à une règle.

• Auto : L'image a sa taille habituelle. Si elle est plus grande que le conteneur, elle sera rognée.

• Cover : Force l'image à rentrer dans le cadre en largeur ou en hauteur. En fonction de la largeur du conteneur, l'image sera rognée, mais uniquement d'un seul côté.
  • C'est de loin le réglage le plus utilisé

• Contain : Force l'image à rentrer en entier dans le cadre. Si l'image est plus large que haute ou inversement, une partie du conteneur sera plus remplie
  • NB : par défaut, l'option contain est configurée en repeat (voir ci-dessous)

• Manuel : Option avancée. A n'utiliser que si vous savez ce que vous faite.

Background Repeat

• Repeat : Si l'image ne remplit pas tout le conteneur elle est dupliquée

• No-repeat : Si l'image ne remplit pas tout le conteneur, elle n'est pas dupliquée

Left et Top

Ces deux champs permettent de définir comment l'image va se comporter si elle rognée car elle devient trop grande. Le réglage le plus facile est d'utiliser un pourcentage. Prenons un exemple avec le champ left :

• 0% : Lorsque le navigateur se réduit, l'image sera rognée en largeur uniquement par la gauche
• 100 % : Lorsque le navigateur se réduit, l'image sera rognée en largeur uniquement par la droite
• 80% : Lorsque la fenêtre se réduit, l'image sera rognée en largeur quatre fois plus rapidement à droite qu'à gauche (20% fois 4 = 80)

La même logique s'applique au champ Top. Si vous ne savez pas pour quel réglage opter, le réglage recommandé est 50% aux deux champs. Il garantit que l'image sera rognée de manière homogène.

Il existe beaucoup d'autres options de personnalisation, mais celles-ci devraient être suffisante dans une utilisation normale. Si vous souhaitez en apprendre plus, vous pouvez consulter les sites de W3S et Mozilla Developper, deux sites bourrés de documentation et de tutoriels.