Adapter les images de votre site internet pour les mobiles

Les mobiles ne peuvent plus être mis à l’écart, ce temps est révolu. Voici un petit guide qui vous aidera à personnaliser les images de votre site.

En 2006, Nokia a mis sur le marché son premier navigateur basée sur Webkit supportant complètement l’HTML et le CSS 2.1, en ce temps c’était vraiment un puissant navigateur. A cette époque, surfer sur un iPhone n’était pas vraiment amusant. La plupart des appareils portatifs avaient de petits écrans, une puissance de processeur très limitée et une connectique basique.

Twitter a récemment révélé que 40% des tweets sont maintenant postés à partir de mobiles (25% en 2010). Les sites à fort trafic comme Google, Facebook et Twitter offre des versions mobiles de plus en sophistiquées pour leurs services. A son niveau le plus basique, un site pour mobile optimisé est un site donc la mise en page, le contenu et les interactions ont été adaptés pour convenir au contexte mobile. L’étape la plus banale est d’optimiser la mise en page pour de petits écrans, soit en utilisant des templates spécifiques aux mobiles ou en utilisant les ‘CSS media queries’ en fonction des différents types d’écrans. Ce sont des requêtes CSS ciblant les navigateurs en fonction de leur taille.

Une autre manière d’adapter un site pour les mobiles est de cacher les éléments destinés aux ordinateurs en utilisant la propriété CSS display:none ou encore de redimensionner les images à la taille de l’écran de l’appareil portatif. Malheureusement, cette dernière donne juste l’impression d’une expérience optimisée pour mobile. A moins que vous ne prenez soins de changer les images et autres supports graphiques de votre site, vous allez générer un site physiquement très petit mais dont le poids sera incroyablement grand pour vos utilisateurs.

Voici quelques astuces pour l’optimisation des images : (c’est un prémisse, les techniques suivantes sont bien plus intéressantes d’un point de vue technique)

Rassembler les images par taille d’écran

Créer des images distinctes pour chaque taille d’écran n’est pas recommandé de par le nombre très important de mobiles sur le marché. Même après avoir fortement réduit votre cible, vous vous retrouverez avec des tailles d’écran allant de 240px à 800px. A l’inverse, utilisez des images versatiles dans le sens où elles pourront s’adapter à plusieurs tailles d’écrans. Je donne souvent l’exemple d’une image pour les écrans sous les 360px, une image pour les écrans allant de 361px à 640px et une dernière pour les écrans de plus de 640px.

Ne redimensionnez pas simplement vos images

Redimensionner automatiquement une image peut se résumer à une image moins claire, déformée ou pixelisée. Considérez le remplacement de cette image par une version alternative plus adaptée qui a été retravaillée.

Vous habitez peut-être dans une grande ville et jouissez d’une connexion 3G. Sachez que vous faites partie de la minorité. Des estimations récentes montres qu’à la fin 2011, la 3G sera présente sur 27% du territoire mondial.

Les connexions lentes ne sont pas le seul problème. Nos fameux abonnements mobiles ont des limites de trafic mensuel en général autour de 500 Mo. Ça peut paraître beaucoup mais ces 500 Mo peuvent partir en un clin d’œil.

Optimiser les images : la méthode simple

L’un de mes outils favoris est tinySrc. Techniquement, il suffit de donner en paramètre l’url absolue de votre image et tinySrc va automatiquement redimensionner votre image à la taille de l’écran de vos visiteur, peu importe sa taille.

<img src="http://i.tinysrc.mobi/http://mysite.com/myimage.png" alt="Mon image" />

Pour être sûr que l’image s’affiche au bon format, tinySrc utilise les dernières données disponibles de DeviceAtlas (deviceatlas.com), une base de données contenant des centaines de propriétés utiles comme la taille de l’écran, le système d’exploitation, le nombre de couleurs etc. Vous pouvez toutefois spécifier vous-même la taille désirée de votre image en procédant comme cela :

<img src="http://i.tinysrc.mobi/http://mysite.com/myimage.png" alt="Mon image" width="320" height="200" />

Vous pouvez aussi utiliser un pourcentage.

Si vous êtes un utilisateur de WordPress, vous pouvez tester le plugin WordPress Mobile Pack. Il comprend la détection du navigateur, l’optimisation des images avec tinySrc et une série de robustes templates pour mobiles.

L’alternative au redimensionnement

Un grand nombre de sites comme Wired ne redimensionnement pas simplement leur images, ils les remplacent complètement. Alors que l’apparence des sites mobiles et pour ordinateur sont similaires, la taille, la composition et les couleurs de certaines parties varient pour améliorer le contraste sur les petits écrans.

Dans ce cas, nous utilisons des Media queries. La première est destinée aux écrans de moins de 380px de large, et la seconde … pour les écrans de plus de 380px de large :

@media screen and (max-width: 380px) {
    header.masthead {
        background: transparent url(/images/header-small.jpg) no-repeat;
    }
}

@media screen and (min-width: 381px) {
    header.masthead {
        background: transparent url(/images/header.jpg) no-repeat;
    }
}

Attention, ce genre de requêtes n’est supporté que par les derniers navigateurs. C’est à dire iOS, Android, Opera Mini et Opera Mobile ainsi que les nouveaux navigateurs Blackberry et des derniers Nokia tactiles.

DIY – Do it yourself

Si les services comme tinySrc ne vous conviennent pas, la prochaine étape est d’implémenter votre propre solution. La meilleure approche est de travailler sur une solution côté serveur qui utilise un filtrage par DOM (Document Ojbect Model) et un redimensionnement serveur. Ce n’est pas très difficile car toutes ces solutions existent déjà en ligne.

Ce qu’il vous faut :

Une base de données mobile comme DeviceAtlas ou WURFL (wurfl.sourceforge.net) pour détecter les tailles des écrans.

Un outil de filtrage de contenu de page HTML. En php, il y a par exemple le ‘Simple HTML Parser’ (simplehtmldom.sourceforge.net) mais chaque langage de programmation a son équivalent.

Un outil pour adapter et générer des images côté serveur. En php nous avons la librairie GD (www.libgd.org) ou ImageMagick (imagemagick.org).

Un endroit ou stocker ou mettre en cache les images générées pour les réutiliser comme votre propre serveur ou un autre type de service tel qu’Amazon Simple Service Storage (aws.amazon.com/s3).

Fonctionnement :

• Pour chaque page, détecter la taille de l’écran
• Sélectionner le premier élément HTML <img> de la page
• Déterminer si les dimensions de l’image conviennent à la taille de l’écran obtenue en 1
• Si l’image est trop grande, la compresser, la mettre en cache, la redimensionner ou rechercher une version déjà présente en cache
• Mettre à jour si nécessaire la source (src) de l’image et les attributs height et width
• Répéter ce processus pour toutes les balises <img> du document
• Enregistrer et afficher le nouveau contenu

Le futur : canvas et SVG (Scalable Vector Graphics – Graphique Vectoriel Adaptable)

Les nouvelles technologies promettent de nettes améliorations en matière d’optimisation graphique.  Les Graphiques Vectoriels Adaptables (SVG) sont de plus en plus compatible avec nos navigateurs et peuvent donc être directement inclus dans une page html par les balises <svg> ou <img>.

Le format SVG est indépendant de la résolution et peut être stylisé avec du CSS et même modifié en JavaScript. De telles techniques sont déjà possible sur les navigateurs de bureau grâce à l’élément canvas. Alors que le SVG est plus adapté aux éléments vectoriels, les canvas permettent de complexes juxtapositions de calques.

Ces technologies ne sont pas encore complétement compatible et du fait que ce soit des éléments côté client, cela nécessite de récent et puissant appareils mobiles. Cependant d’après la loi de Moore, il ne faudra pas beaucoup de temps avant qu’une nouvelle aire d’opportunités advienne pour créer une expérience utilisateur unique.

Astuce : Graphiques

Petite astuce si vous souhaitez mettre en place des graphiques sur vos sites mobile, regardez du côté de Google Charts (code.google.com/apis/chart).

C’est une API destinée à générer automatiquement un fichier bitmap à partir d’une simple requête en GET ou en POST. L’API peut générer une grande quantité de graphiques. Il est notamment possible d’ajouter des paramètres pour en modifier la taille selon la taille de l’écran du mobile visitant le site.