Optimiser son site web pour l'écran Retina

Si vous avez des tutoriels à proposer c'est ici.

Modérateur: Mika56

Petit Nouveau
Avatar de l’utilisateur
Messages: 20
Enregistré le: Jeu Jan 03 2013 : 00:02

Optimiser son site web pour l'écran Retina

Messagepar axelandaroth » Sam Jan 05 2013 : 06:52

Imaginons que nous désirons créer une bannière qui devrait faire 150px sur 300px . Créez cette image 4 fois plus grande (Normalement, le mieux est d'agrandir 5 fois, mais l'écran Amoled de Sony risque de mal l'afficher, donc nous nous contenterons de 4) Vous obtenez donc une image de 600*1200.

Lorsque vous l’incluez dans votre site web, demandez à votre image de se redimensionner aux dimensions que vous souhaitez réellement afficher, dans notre exemple :
<img src=“image.jpeg“ width=“300“ height=“150“ />
C’est très important, autrement votre image fera réellement 600 pixels sur 1200 et cela risque de déformer votre site web en plus d’avoir un rendu pixellisé.

Ça fonctionne très simplement, en fait l’image est redimensionnée par le navigateur mais garde en réalité tous ses pixels, lesquels sont tous affichés si l’écran le permet. Ainsi donc, on peut faire en sorte que les images sur notre site web soient “denses“, ce qui répond parfaitement à la caractéristique de densité de l'écran Retina (et Amoled).

PS : Wordpress s'occupe déjà de le faire à votre place suite à la dernière mise à jour réalisée à ce jour (5/01/2013), j'imagine que d'autres CMS devraient s'adapter avec le temps, si ce n'est pas déjà fait.
"Mon prof d'informatique ne m'a jamais appris à faire des switch... il n'aime pas faire de break."

Modérateur Niloo
Avatar de l’utilisateur
Messages: 1928
Enregistré le: Lun Aoû 25 2008 : 20:19
Localisation: Caudan (56)
Id Niloo: 2123

Re: Optimiser son site web pour l'écran Retina

Messagepar Mika56 » Dim Jan 06 2013 : 16:36

Salut,

L’inconvénient de cette méthode, c'est que si j'ai pas d'écran Retina (j'ai pas d'écran Retina), je télécharge une image de 600*1200, donc plus lourde qu'une 150*300, sans aucun intéret. De plus, le redimensionnement du navigateur peut me faire une image d'une moins bonne qualité

Il existe des scripts jQuery qui vérifient si l'écran est compatible Retina (enfin, avec un haut degré de PPP), et dans ce cas, charge les images "HD", tout en laissant les "SD" aux écrans "normaux"

Mika.
Modérateur Niloo
Retrouvez l'info Niloo sur Facebook et Twitter
Image
The whole point of Pandora's Box is that once you've opened it, you can't close it again.
But when everything is over, when the worst has happened, there's still one thing left in Pandora's Box: hope.

Membre Très Actif
Avatar de l’utilisateur
Messages: 501
Enregistré le: Mer Fév 27 2008 : 20:02
Localisation: Bordeaux
Id Niloo: 1310

Re: Optimiser son site web pour l'écran Retina

Messagepar Lex_Luger95 » Ven Fév 22 2013 : 17:27

Cela posera aussi un problème avec les mobiles, puisque le chargement sera encore plus long.

Quelqu'un a-t-il des chiffres sur l'utilisation des écrans retina ?

Modérateur Niloo
Avatar de l’utilisateur
Messages: 1928
Enregistré le: Lun Aoû 25 2008 : 20:19
Localisation: Caudan (56)
Id Niloo: 2123

Re: Optimiser son site web pour l'écran Retina

Messagepar Mika56 » Ven Fév 22 2013 : 17:45

Difficile de trouver des chiffres fiables, mais il faut je pense regarder les statistiques des très hautes résolutions, non ?

Mika.
Modérateur Niloo
Retrouvez l'info Niloo sur Facebook et Twitter
Image
The whole point of Pandora's Box is that once you've opened it, you can't close it again.
But when everything is over, when the worst has happened, there's still one thing left in Pandora's Box: hope.

Retourner vers Tutoriels

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 0 invités