Images, transparences et arrière-plans animés

Les sites Web utilisent différents types d'images, dans des formats trame et vecteur. Ceci offre davantage d'options aux développeurs, mais soulève la question suivante : quel format choisir pour une utilisation spécifique ?

Nous allons passer en revue les images courantes, pour lesquelles nous présenterons des recommandations et des considérations.

Animations

Un graphique animé est une image présentant plusieurs trames et qui illustre le mouvement d'une forme.

Plusieurs formats prennent en charge les animations (GIF, PNG et WebP), mais en raison de la prise en charge totale du navigateur, la plupart des sites utilisent le format GIF (limité à 256 couleurs avec une transparence de 1 bit).

Transparence

Les images transparentes sont utiles lorsque vous n'êtes pas certain de la couleur de l'arrière-plan sur lequel votre image s'affichera. Avec la transparence binaire, une couleur issue de la palette de couleurs indexées fait office de couleur transparente. Avec la transparence alpha, plus avancée, les informations de transparence sont stockées dans un canal distinct, appelé canal alpha.

Les conditions simples de transparence sont prises en charge par le format GIF et sa transparence binaire. Les formats PNG, WebP, JPEG 2000 et JPEG XR présentent des fonctionnalités améliorées grâce à l'utilisation des couches alpha.

Dégradés d'arrière-plan

Tout comme vous pouvez déclarer l'arrière-plan d'un élément en tant que couleur unie dans CSS, vous pouvez également déclarer cet arrière-plan en tant que dégradé. Les dégradés représentent généralement une couleur qui se fond dans une autre. Dans CSS, vous pouvez contrôler chaque aspect du processus, depuis le sens des couleurs (autant que vous le souhaitez) jusqu'à l'emplacement où ces couleurs vont se modifier.

L'utilisation de dégradés déclarés dans CSS, plutôt que l'utilisation d'un fichier d'image actuel, est préférable du point de vue du contrôle comme des performances.

Logos

Les logos sont soit purement graphiques (symboles/icônes), soit composés du nom de l'entreprise (logotype ou marque de mot).

Les formats vecteurs (comme SVG) offrent la meilleure qualité de logos (bords lisses, redimensionnement sans perte de qualité, fichiers de petite taille), mais vous pouvez également utiliser un format trame (généralement PNG) doté d'une haute résolution.

Clip Art

Les collections d'images Clip Art peuvent être importées dans un document ou un autre programme. Il peut s'agir de graphiques au format trame ou vecteur.

Le format GIF est parfait pour les images présentant une couleur unie (comme dans les dessins animés ou les Clip Art). Les images GIF peuvent également être placées sur une page Web avec un arrière-plan clair, de façon à ce que vous puissiez les superposer.

Images mezzanines

Les images mezzanines présentent généralement une résolution minimum de 300 ppp (points par pouce) et sont le plus souvent associées aux photos.

Le format Hi-Res JPEG est recommandé pour les images mezzanines Web (originales) car il équilibre taille et qualité via une compression avec perte. Vous pouvez envisager le format PNG si vous souhaitez obtenir une qualité optimale avec une compression sans perte. Pour optimiser l'utilisation d'images sur plusieurs supports (Web et impression, par exemple), le format TIFF (Tagged Image File Format) est recommandé dans le cadre d'images originales. N'oubliez pas que vous devrez convertir les images au format TIFF vers des formats Web compatibles.

Images adaptatives

Une image adaptative est une image qui s'adapte en fonction des différentes conditions environnementales : les adaptations peuvent inclure, mais sans s'y limiter, la modification des dimensions, le rognage, voire la source d'une image. L'utilisation d'images adaptatives peut améliorer les performances Web en envoyant des fichiers plus petits aux utilisateurs mobiles disposant de connexions plus lentes.

Le format JPEG convient parfaitement dans le cadre d'une conception en vue d'une compatibilité multi-navigateurs. Si vous affichez les images sur des navigateurs compatibles, les formats WebP (Chrome et Opera), JPEG 2000 (Safari) et JPEG XR (Internet Explorer et Edge) constituent d'excellentes options.

Sprites

Les sprites sont utilisés en conception Web pour améliorer les performances en combinant plusieurs petites images ou icônes en une image plus grande appelée feuille de sprite ou « tile set ».

Ils sont également utilisés pour les icônes, pour lesquelles les formats GIF/PNG sont recommandés. Le format JPEG est également utilisé.

Les feuilles de style en cascade (CSS) sont souvent utilisées pour aider à afficher les images. Toutefois, les sprites eux-mêmes sont généralement au format PNG ou JPEG.

Icônes

Les icônes peuvent être utilisées en guise de boutons ou d'indicateurs visuels sur un site Web. À l'instar des sprites (décrits ci-dessus), les icônes sont souvent regroupées. De nombreuses options pour ce type d'images existent en fonction de l'utilisation, mais c'est le format SVG qui offre des performances optimales. Des polices d'icônes peuvent également être utilisées si elles sont correctement gérées lors du chargement de la page. Par ailleurs, les formats habituels comme GIF et PNG peuvent également être utilisés. Si vous chargez un ensemble d'icônes (police ou sprite), pensez à évaluer le coût de chargement des icônes que vous n'utilisez pas.

Coins arrondis ou éléments de disposition

Malheureusement, l'utilisation d'images pour conférer un style, une hauteur ou une largeur à l'écran ou pour utiliser des effets comme les coins arrondis reste monnaie courante sur nombre de sites Web. N'utilisez pas d'images pour ce type d'utilisation, mais privilégiez CSS.

Les coins arrondis sont très bien pris en charge par l'ensemble des navigateurs et permettent de sélectionner des paramètres plus avancés, comme indiqué ci-dessous.

Résumé

Le choix du format approprié est indispensable pour optimiser l'impact de vos images. N'oubliez pas que chaque format présente des avantages et des inconvénients, que vous devrez prendre en compte lors de votre décision finale.

Découvrez plus en détail la gestion de plusieurs images en ligne avec Akamai Image Manager.