5 façons de prendre en charge les écrans de rétine à haute densité

Un point intéressant a été soulevé par Brendan Davis dans mon récent post «Responsive Web Design and Scroll Bars: la mise en œuvre de Chrome est-elle meilleure?»: Les points d'arrêt RWD sont-ils affectés par les écrans de densité de pixels élevés?

sont-ils affectés

La réponse courte est: non - mais nous devons approfondir un peu plus et regarder les problèmes qu'ils peuvent causer.

Qu'est-ce que la rétine?

"Retina" est le nom de marque d'Apple pour les écrans à double densité, mais d'autres fabricants créent des écrans similaires. La technologie est utilisée dans les iPhones récents, iPads, MacBook Pros et autres appareils haut de gamme.

Par exemple, le MacBook Pro 15 ″ a une résolution de 2 880 × 1 800 ou 220 pixels par pouce. À cette échelle, la plupart des gens ne sont pas en mesure de remarquer des pixels individuels à des distances de visualisation typiques - les applications et les sites Web seraient trop petits pour être utilisés.

Par conséquent, l'appareil revient à une résolution standard de 1 440 × 900 mais les pixels supplémentaires peuvent être utilisés pour rendre les polices et les graphiques plus lisses.

quel est le problème?

Les images bitmap de résolution standard peuvent sembler en blocs sur un écran de rétine. Une photographie de 400 x 300 est mise à l'échelle à 800 x 600 pixels, mais il n'y a pas de détails supplémentaires. Cela peut être perceptible par rapport aux polices lisses et à d'autres images à haute résolution.

Utilisation du monde réel

Si vous regardez autour du Web, vous seriez pardonné de penser que tout le monde a un écran de rétine. Actuellement, il n'est disponible que dans des appareils haut de gamme, mais ceux-ci sont convoités par les développeurs, ce qui conduit à un volume disproportionné de discussions en ligne. Dans le monde réel, le pourcentage de personnes utilisant des écrans similaires est à faible chiffre

Mettons-le en contexte: si vous ne développez pas les 1% des utilisateurs d'IE6 / 7, vous ne devriez probablement pas être trop préoccupé par les personnes utilisant la Rentina - d'autant plus qu'ils peuvent toujours voir votre site Web.

Cela dit, les écrans de type rétine migreront finalement vers tous les appareils. Il y a peu de raisons de s'inquiéter maintenant, mais il n'y a pas de mal dans une planification vers l'avant. Examinons les options par ordre de recommandation…

1. Utilisez des effets SVGS et CSS3

L'indice est dans le nom mais les graphiques vectoriels évolutifs sont…

évolutifs! Peu importe la taille d'un SVG - il sera toujours fluide car il est défini à l'aide de vecteurs (lignes et formes) plutôt que les pixels individuels.

SVG n'est pas pratique pour les photographies mais est idéal pour les logos, les diagrammes et les graphiques. L'inconvénient principal est le manque de support dans IE8 et ci-dessous, mais vous pouvez toujours fournir une repli PNG ou utiliser une cale telle que Raphaël ou SVGWeb. Voir aussi: Comment ajouter des graphiques vectoriels évolutifs à votre page Web.

Vous pouvez également être en mesure de remplacer entièrement certaines images. Par exemple, les titres, les gradients, les coins ou les ombres définis comme les graphiques peuvent être reproduits à l'aide de CSS3 seul. Ils rendront à une meilleure qualité, entraîneront moins de demandes HTTP et utiliseront moins de bande passante.

2. Utilisez des icônes WebFonts

Plus j'utilise des icônes Webfonts, plus je les aime. Comme les SVG, les polices sont des vecteurs afin qu'ils soient évolutifs afin que vous puissiez utiliser des ensembles de polices contenant des icônes. Ils sont idéaux pour les petites formes fréquemment utilisées telles que les enveloppes par e-mail, les téléphones, les contrôles des widgets et les logos de médias sociaux. Ils travaillent également dans chaque navigateur, y compris IE6.

Il existe de nombreux ensembles de polices d'icônes commerciales et gratuites disponibles:

• typicons
• FONT AWESSIQUE
• emblématique
• Fondation

ou vous pouvez utiliser un service de police hébergé tel que nous aimons les polices d'icônes.

Je recommande de créer votre propre petit ensemble d'icônes personnalisées à l'aide d'outils en ligne tels que Fontello ou IComoon.

3. Utilisez des images haute résolution lorsque vous êtes pratique

La rétine a quatre fois plus de pixels que les écrans standard. Si vous avez une image 400 x 300 (120 000 pixels), vous devez utiliser une alternative de 800 x 600 (480 000 pixels) pour le rendre bien sur un écran haute densité.

Cependant, la taille de fichier haute résolution peut ne pas nécessairement être quatre fois plus grande. Chaque image est différente, mais si elle contient des blocs de couleur ou des détails solides qui peuvent être omis, il peut être pratique d'utiliser une image de 800 x 600 et de le faire évoluer dans le navigateur.

Soyez pragmatique: si l'image standard est de 200 Ko et que la version haute résolution est de 250 Ko, il existe un avantage négligeable en utilisant des techniques de remplacement d'image. Utilisez la meilleure version partout.

4. Utilisez le remplacement de l'image CSS

Il y aura des moments où les versions haute résolution de votre image sont quatre fois plus grandes - ou plus. Dans ces circonstances, vous voudrez peut-être envisager des techniques de remplacement d'image, c'est-à-dire que l'image standard est remplacée par une alternative plus grande sur les écrans de rétine. Le code de requête multimédia suivant pourrait être utilisé:

#myimage {
	width: 400px;
	height: 300px;
	background: url(lo-res.jpg) 0 0 no-repeat;
}

@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) {
	#myimage {
		background-image: url(hi-res.jpg);
	}
}

Les inconvénients:

1. Vous devrez créer et maintenir deux ensembles d'images.
2. Certains navigateurs téléchargeront les deux images.

N'oubliez pas que bon nombre de ces utilisateurs utiliseront des smartphones ou des tablettes sur des réseaux mobiles plus lents. La détection de la vitesse de connexion serait plus bénéfique que de déterminer la densité des pixels.

5. Utilisez le remplacement de l'image JavaScript

La détection d'affichage de la rétine peut être implémentée en utilisant le code suivant:

var isRetina = (
	window.devicePixelRatio > 1 ||
	(window.matchMedia && window.matchMedia("(-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)").matches)
);

Une fois qu'un écran de rétine est déterminé, vous pouvez:

1. Boucle à travers toutes les images de la page et extraire l'URL.
2. Ajouter «@ 2x» au nom du fichier et tenter de charger l'URL d'image résultante en utilisant ajax.
3. Si trouvé, remplacez l'image actuelle par l'alternative haute résolution.

Heureusement, le travail acharné a été fait pour vous à Retinajs.com. Bien qu'il ajoute seulement du poids de 4 kb, les dispositifs d'affichage à haute densité téléchargeront les images deux fois - bien que la deuxième fois se produira en tant que processus d'arrière-plan après le chargement de la page.

Mon conseil: soyez pratique et restez simple. Ne passez pas de temps à tenter de résoudre des problèmes de rendu mineurs sur des appareils avec des utilisateurs proportionnellement peu d'utilisateurs. Bien sûr, rien de tout cela n'a d'importance lorsque votre patron reçoit son nouvel iPad et commence à se plaindre de la qualité de l'image…

Les commentaires sur cet article sont fermés. Vous avez une question sur l'affichage de la rétine? Pourquoi ne pas le demander sur nos forums?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!