Avec tous ces sites en responsive, le problème d'optimiser certaines images pour les écrans à haute densité de pixels – appelés Retina par abus de langage – commence à se faire sentir.
Disons-le très net : j'ai très peu de demandes expresses de clients sur le sujet de l'optimisation Retina. Toutefois, comme j'aime optimiser en standard tout ce qui peut l'être aisément, j'ai pris l'habitude de demander à mon graphiste chéri des exports SVG des logos des sites internet. Ainsi, le fait d'avoir un format vectorisé solutionne de facto le rendu du logo sur ces écrans, sans pour autant sacrifier le côté performances du site ni le fonctionnement de ce dernier.
Prenons donc un exemple, le logo du site de l'agence CSM.
Voici le code du logo :
<a href="../fr/" accesskey="1">
<!--[if lte IE 8]>
<img src="../layout/images/logo-csm.png" alt="Retour à l'accueil de CSM" width="240" height="84" />
<![endif]-->
<!--[if gt IE 8]><!-->
<img src="../layout/images/svg/logo-csm.svg" alt="Retour à l'accueil de CSM" width="240" height="84" onerror="this.removeAttribute('onerror'); this.src='../layout/images/logo-csm.png';" />
<!--<![endif]-->
</a>
Dans l'idée, SVG étant supporté partout sauf pour IE8 et inférieurs, on proposera donc le logo en SVG pour tout le monde, et en roue de secours une version dans un format GIF/JPEG ou PNG pour les vieux IE.
Pour le cas où un quelconque navigateur autre que les vieux IE ne supporte pas les images en SVG, l'erreur sera détectée et la version en PNG prendra automatiquement le relai (une sécurité sûrement dispensable, mais on n'est jamais trop prudent sur une image aussi importante qu'un logo).
Ajout : un tweet me signale qu'Android 2.x pourrait bénéficier de cette sécurité, pas si dispensable que cela donc !
Côté htaccess
, il ne faudra pas oublier ces lignes :
# activera la compression pour SVG
AddOutputFilter INCLUDES;DEFLATE svg
AddOutputFilter INCLUDES;DEFLATE image/svg+xml
# fera fonctionner les fontes SVG sur iPad
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
Les premières activeront la compression, faisant passer le poids du fichier SVG de 24 ko à 7 ko. La suite garantira que le type MIME soit correctement défini pour faire fonctionner les polices SVG sur iPad.
Et voilà ! Sans révolutionner le monde, cette méthode sera un petit plus pour vos sites, en attendant qu'on ait une solution meilleure pour toutes les images sur les sites responsive.
Si vous avez envie de vous amuser, vous pouvez utiliser la ligne suivante dans votre head
.
<link rel="logo" type="image/svg" href="http://www.csm-sa.ch/layout/images/svg/logo-csm.svg" />
L'exemple vient du site relogo, ce n'est pas un standard, c'est juste rigolo. :)
Pour en lire plus sur le sujet, vous pouvez lire ou relire cet article de Stéphanie Walter : Un logo cliquable SVG avec alternatives.