Je ne me suis pas vraiment rendu compte en demandant l'option retina à l'achat de mon dernier ordinateur des différences que cela allait engendrer, mais je n'ai pas tardé à comprendre ! C'est un très bel écran, mais je n'était pas prêt à ça, tout comme bon nombre de logiciels. Un grand retour dans le monde de la pixellisation !
J'ai évidemment dû passer aux dernières version de la suite de logiciels Adobe pour éviter de perdre un œil, et je rencontre souvent des images bien trop pixellisées à mon goût, sur des sites que j'ai créés, et bien d'autres.
Il y a donc quelques éléments (pas si) nouveaux à prendre en compte, pour que je puisse avoir un affichage correct, et ainsi anticiper le renouvellement du parc informatique chez chacun.
1 - le plus frappant, les images
La première solution serait de servir des images 2 fois plus grandes qu'avant, et de les resizer avec le CSS, cela fonctionne très bien, mais les chasseurs de performances serveur pourraient n'être pas d'accord avec cette utilisation pas forcément nécessaire de ressources, d'autant plus pour les utilisateurs mobiles qui verront leur utilisation de forfait grimper en flèche. Même si l'avantage de cette technique est de garder une seule version des éléments sur serveur, et qu'elle ne pose pas tant de problème que ça en prenant en compte la vitesse de nos connexions actuelles, l'utilisation du wifi par les mobiles, et les abonnements internet illimités.
Une deuxième solution consiste à servir 2 tailles d'images différentes, logo.png et Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser. par exemple (les développeurs iOS seront vite familiers avec ces dénominations).
On peut ensuite avec le CSS cibler les images à appeler :
.logo {
background-image: url(logo.png);
background-size: 11px 13px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.logo {
background-image: url(Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.);
background-size: 11px 13px;
}
}
On ne peut malheureusement gérer toutes les images ainsi avec le CSS, mais comme chaque problème (ou presque) a sa solution sur le web, on peut jeter un œil à retina.js développé par Imulus, un script open source qui va prendre en charge la sélection des images appropriées. Encore une fois sur la base de la prescription pour les images haute définition d'Apple, le script se chargera pour chaque image comme :
<img src="/images/mon_image.jpg" />
de vérifier sur le serveur si la version HD existe pour obtenir ainsi "/images/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.".
2 - On peut aussi cibler les résolutions d'écran avec CSS pour écrire les variables dont on peut avoir besoin.
@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
/* Vous pouvez écrire ici vos règles CSS ciblées pour les écrans haute résolution */
}
3 - Utiliser un maximum CSS, @font-face, les fonts d'icones et SVG, au lieu des images basées sur les pixels.
Cela fera d'autant moins d'images à traiter, et les performances de chargement de pages pourront s'en ressentir.
4 - Un petit détail qui fera plaisir au barres de navigateurs, passez les favicon en 32x32 et non plus en 16x16.
J'avoue que je n'utilise pas encore ces techniques partout, mais il faut vraiment que je m'y mette !
BLOG COMMENTS POWERED BY DISQUS
