5 façons d'optimiser les images sur le site Web de votre groupe

De nos jours, les sites Web peuvent apparaître sur des centaines de tailles d'écran différentes, même dans différentes orientations sur le même appareil (paysage ou portrait). Les écrans sur lesquels les internautes voient votre site peuvent ne mesurer que quelques centaines de pixels de large sur mobile, jusqu'à des milliers de pixels de large sur les nouveaux écrans larges haute définition.

Parce que les nouvelles technologies offraient une gamme de tailles d'écran avec lesquelles les gens pouvaient voir votre site, cela nécessitait également une nouvelle façon de penser à la conception du site qui garantissait que les sites s'affichaient bien sur n'importe quel écran - grand ou petit, haut ou large.

C'est là qu'entre en jeu le concept de conception de site Web « réactif » !

Comment fonctionne la conception réactive

Un site Web réactif est conçu de manière à ce que le positionnement et la taille soient "relatifs" à l'espace dans lequel ils sont visualisés. Lorsque votre site est visualisé sur différents écrans, il s'adapte en s'étirant ou en se rétrécissant ; se déplacer pour s'adapter à l'espace disponible.

Toute photo que vous téléchargez sur votre site Web Bandzoogle s'étirera et redimensionnera en fonction de la taille de "l'espace" dans lequel se trouve l'image.

Avec les images d'en-tête, cela est particulièrement important car les images réactives s'adapteront le mieux possible au cadre. Moins de travail pour recadrer un tas d'images signifie plus de temps, eh bien, jouer de la musique, n'est-ce pas ?

Examinons cinq façons d'optimiser les images sur le site Web de votre groupe pour que votre conception soit parfaite.

1. Choisissez la bonne image

La conception réactive met à l'échelle les éléments de page tels que vos images d'en-tête "proportionnellement" à la taille d'origine du fichier image que vous utilisez, et le fera "par rapport" à l'espace dans lequel l'image est définie sur la page.

Cela signifie que les proportions de l'image sont conservées sur tous les appareils et que les images essaieront toujours de "remplir" l'espace dans lequel elles se trouvent du mieux qu'elles le peuvent. Cela peut entraîner des images d'en-tête dont certaines parties de l'image apparaissent "coupées" - cela est inévitable dans la conception réactive, mais le choix d'une image qui recadre bien pour s'adapter aidera.

Artiste : Tragédie Ann

Ordinateur de bureau et écran large

Sur un ordinateur portable, les images d'en-tête seront mises à l'échelle par rapport à la largeur de l'écran. Sur un appareil mobile, l'image serait mise à l'échelle en fonction de la hauteur de l'écran.

En d'autres termes, votre image sera toujours mise à l'échelle par rapport au côté le plus long de l'espace.

Maintenant, imaginez cela sur un écran de 1 000 pixels de large - les écrans d'ordinateurs de bureau / portables sont plus larges que hauts, et disons que ce même écran mesure également 570 pixels de haut (environ le rapport 16: 9 pour de nombreux écrans).

Dans ce scénario, notre image mesure 1 000 pixels de large sur cet écran, mais a été redimensionnée à 900 pixels de haut, ce qui signifie que, dans un espace de seulement 570 pixels de haut, elle finit par couper plus de 300 pixels en haut et en bas de l'image. Des images sans tête, beurk !

Orientation mobile et portrait

Faites le même calcul avec l'exemple d'écran mobile qui mesure 600 pixels de haut - disons que ce même écran n'a qu'environ 320 pixels de large. Lorsque l'image s'adapte à cet affichage, plus de la moitié de l'image serait coupée de chaque côté (rappelez-vous que l'image est réduite à 667 pixels de large sur un écran portrait de 600 pixels de haut).

C'est un bon moyen d'embêter le batteur au bord de votre photo de groupe, ce qui peut être amusant ! Mais reste...

Optimisez, puis téléchargez vos fichiers

Une bonne métaphore que vous pouvez utiliser est d'imaginer que vous êtes dans une galerie d'art en train d'encadrer des photos - si vous mettez le paysage de Monet dans un cadre de portrait "Whistler's Mother", ce cadre coupera beaucoup de très beaux nénuphars sur le côté de ta peinture.

C'est là que cela peut devenir délicat - les constructeurs de sites ne peuvent pas anticiper les images que vous souhaitez utiliser (ou ce qui s'y affiche), mais être sélectif avec les images à ajouter est une bonne première étape.

Quelques conseils simples pour sélectionner la bonne image pour votre en-tête :

• Évitez d'utiliser des images qui ont été « rognées de près » - plus vous avez d'espace ou de rembourrage autour de la « mise au point » de votre image, moins il est probable que la mise au point soit coupée sur différents écrans.
  
• Utilisez de grandes images - 2000 x 1800 à 72 dpi fonctionnent généralement bien pour la plupart des thèmes Bandzoogle et aident à vous assurer que vos images ont fière allure sur chaque écran.
  
• Essayez d'utiliser des images dont l'orientation est proche du "carré" - Il n'est pas nécessaire que ce soit une image carrée parfaite, mais aussi près que possible de la même hauteur et de la même largeur dans votre image, cela fonctionnera généralement très bien sur n'importe quel écran. Cet espace supplémentaire vous donne une marge de manœuvre, quelle que soit l'orientation de votre site.
  
• Essayez d'éviter d'utiliser des images avec du texte ou des logos dans l'image elle-même - vous ne voulez certainement pas que du texte important ou que votre image de marque soit coupée pour vos visiteurs !
  
• Ajoutez plutôt votre logo sous l'option 'titre/logo' de votre éditeur de thème Bandzoogle. Ajoutez ensuite le texte de votre choix dans l'en-tête de la "fonction d'en-tête d'appel à l'action". De cette façon, vos messages importants ne seront pas coupés par le bord de l'écran.

Artiste : Martin et James

2. Recadrez en fonction de votre thème

Si vous avez déjà téléchargé des images, Bandzoogle est livré avec d'excellents outils pour les rendre encore mieux affichées !

Certaines de nos conceptions de modèles s'affichent en « plein écran » lorsqu'elles se chargent, ont des hauteurs d'en-tête réglables, peuvent afficher des images d'en-tête dans un espace limité, sous différentes formes (comme le modèle Spotlight), ou même définir votre image d'en-tête comme arrière-plan pour vos pages (Slice, par exemple).

Il est facile d'essayer différents thèmes avec différentes options d'en-tête - vous pouvez modifier la conception du thème via « modifier le thème » > « afficher les thèmes », sélectionner le thème de votre choix, personnaliser ce thème dans l'éditeur de conception, cliquer sur « enregistrer » et publier votre changements.

À condition que le thème ne définisse pas votre en-tête comme une image d'arrière-plan pleine page, vous pouvez également ajuster le zoom relatif et le positionnement des images que vous ajoutez.

Dans "Modifier le contenu", cliquez sur l'image d'en-tête dans l'onglet Modifier le contenu, puis dans l'éditeur d'en-tête, cliquez sur le lien "Rogner" sous la vignette de l'image d'en-tête.

Vous pouvez ensuite ajuster le zoom avec le curseur de zoom et cliquer/faire glisser l'image dans un emplacement relatif.

3. Fixez un point focal

Lorsque vous recadrez votre image d'en-tête dans l'éditeur d'en-tête, vous remarquerez peut-être également un petit point bleu sur l'image - cela sert à définir votre "point focal". Cela garantit que, quel que soit l'endroit où ce point est positionné sur l'image, il sera toujours « mis au point », quelle que soit la taille ou l'orientation de votre image.

Cela peut être très pratique pour les images où la "mise au point" de votre image téléchargée n'est pas totalement centrée - cliquez/faites glisser le point focal sur la mise au point de l'image pour vous assurer que, peu importe ce qui est coupé sur différents écrans, la mise au point est à l'avant et au centre .

Une fois que vous avez défini votre recadrage, votre zoom et vos points focaux, cliquez simplement sur "enregistrer" pour appliquer le recadrage, puis cliquez à nouveau sur "enregistrer" dans l'éditeur d'en-tête pour appliquer vos modifications.

Artiste : Anna Bassy

4. Personnalisez la hauteur de l'en-tête mobile

La frontière entre ce qu'est un écran mobile et un écran non mobile est constamment floue - prenez une tablette par exemple. Pas assez grand pour être un "bureau", mais pas assez petit pour un écran mobile.

Lorsque vous affichez des sites sur un grand nombre de tablettes en « paysage », le site peut apparaître comme sur un écran d'ordinateur de bureau ou d'ordinateur portable. Tournez cette tablette sur le côté comme un « portrait », et tout peut changer - la réduction de la largeur de l'écran peut présenter plus d'éléments « mobiles » plus proches de ce que vous pouvez voir sur un téléphone.

La plupart des thèmes Bandzoogle sont configurés par défaut pour afficher un en-tête "pleine hauteur" dans les écrans orientés portrait - cela peut être problématique si votre image d'en-tête contient le focus vers les côtés gauche et droit.

Pour cela, à condition que votre thème ne définisse pas votre en-tête comme image d'arrière-plan de vos pages, vous pouvez activer l'option 'hauteur d'en-tête mobile personnalisée' dans les paramètres 'en-tête' via votre onglet 'modifier le thème'.

Une fois activé, cliquez sur l'icône "Aperçu mobile" dans l'éditeur de thème et ajustez le curseur "Hauteur de l'en-tête (mobile)" - cela peut aider à ajuster l'espace dans lequel se trouve votre image pour mieux correspondre aux proportions de votre image et afficher plus de image. Cliquez simplement sur "enregistrer" après avoir défini cela !

5. Ajouter des filtres

Enfin, vous pouvez ajouter des vibrations vraiment incroyables à vos images d'en-tête en définissant un filtre. Faites ressortir le blues, donnez à votre image un aspect plus « film des années 70 » ou optez pour le noir et blanc vintage. Il y a beaucoup d'options ici!

Cliquez simplement sur l'onglet "modifier le thème" dans votre panneau de configuration Bandzoogle, et sous les options "en-tête", vous pouvez sélectionner un filtre préfabriqué ou créer votre propre style de filtre personnalisé.

Artiste : Carleen Williams

Bien que cela puisse parfois être un peu difficile à comprendre, le consensus général avec les concepteurs de sites Web est que la réactivité est la meilleure solution en termes de site Web.

Cela garantit que votre site aura fière allure et sera lisible sur tous les écrans disponibles maintenant, ainsi que dans le futur, et des sites comme Google vous classeront mieux si votre site utilise de bonnes pratiques réactives.

À long terme, c'est aussi un gain de temps considérable pour ceux d'entre vous qui gèrent leurs propres sites - connaître la meilleure façon d'optimiser vos images et votre contenu est la première étape, et Bandzoogle s'occupe du reste !

Créez un site Web de musique avec des images réactives en quelques clics. Créez votre site web avec Bandzoogle dès aujourd'hui !