Flou sur images Safari mobile iPhone 4, iPhone 4S et iPad

Une image floue sur un écran Retina ?
Oui c’est possible si l’image est plus petite que votre écran… Mais que dire si l’image fait 3600 pixels de haut.

Des éléments de réponse sur l’étrange comportement pourraient provenir du moteur de rendu des pages, WebKit.

Après quelques tests sur Safari mobile, il s’avère qu’une limite est bien définie.
Voici le contexte de test sur iPhone 4, iPhone 4S, iPad 2ème génération et Nouvel iPad : iOS 5.1.1 / WebKit 534.46 / Safari 7534.48.3

D’un côté, une image de 640×3276 pixels et de l’autre une image de 640×3277 pixels, soit un de plus.
Vous pouvez alors remarquer que l’image de droite, la plus grande, est plus floue que celle de gauche.

A gauche 2 096 640 pixels nets, et à droite 2 097 280 pixels flous.
Le flou apparait donc lorsque la résolution de votre image dépasse les 2 096 640 pixels.

Vous pouvez en faire le test avec les images ci-dessous :
iPhone 640 x 3276 pixels (lien)
iPhone 640 x 3277 pixels (lien)
iPad 1536 x 1365 pixels (lien)
iPad 1536 x 1366 pixels (lien)

Le constat est identique avec Google Chrome, utilisant aussi WebKit. C’est IE9 sur Windows Phone qui s’en sortira haut la main avec un affichage identique sur les deux images.

Auteur: Benoit DELDICQUE

Actuellement en poste sur Strasbourg, je suis en charge de la conception et la réalisation d'applications iOS pour iPhone, iPad et iPod touch.

Articles similaires

1 commentaire