Les écrans de Retina sur les appareils iOS ont fait leur apparition depuis un certain temps déjà, mais de nombreux sites Web ne sont pas encore prêts pour Retina, alors même que les concepteurs et les développeurs ont acquis une nouvelle image de la réalité d'une solution entièrement réactive et mobile. monde amical.
Voici ce que vous devez savoir sur les options permettant d’optimiser votre travail sur les écrans de plus en plus répandus de Retina. La bonne nouvelle est que, aussi difficile que cela puisse paraître, ce n’est vraiment pas si compliqué.
$config[code] not foundPréparer votre site Web pour des images compatibles avec Retina
Doublez votre plaisir
Pour ainsi dire, vous pouvez écorcher ce chat de plusieurs façons. Dans le premier cas, vous devrez affiner votre CSS et inclure des versions de vos images au double de leur résolution normale. Le CSS déterminera quelle image afficher en fonction du périphérique sur lequel votre site est visualisé.
Les mises à jour CSS dont vous aurez besoin varieront en fonction des navigateurs que vous ciblez, mais la bonne nouvelle est que ce n’est pas très compliqué maintenant, et que cela devient plus facile. Nous allons laisser le codage réel à un autre jour.
Une chose à garder à l'esprit: vous pouvez développer une convention de dénomination pour vos images de rétine afin de pouvoir facilement associer les deux versions d'une image au cas où elles auraient besoin d'être modifiées ultérieurement.
SVG
Une autre approche est SVG, ou Scalable Vector Graphics. Comme leur nom l’indique, elles se limitent aux graphiques vectoriels et ne fonctionnent pas avec les images photographiques. Toutefois, les graphiques SVG éliminent le besoin de deux fichiers d’image pour chaque graphique de votre site. Là encore, il existe des variantes d’un navigateur à l’autre. Vous devrez donc effectuer des recherches supplémentaires en fonction de vos besoins.
Et comme indiqué ci-dessus, SVG ne fonctionnera probablement pas comme votre seule solution sur la plupart des sites, à moins que le site ne contienne aucune image de type photo.
Force brute
Bien sûr, vous pouvez aussi simplement vider les fichiers basse résolution et simplement servir les images prêtes pour Retina. Nous ne le recommanderions que pour des utilisations avec un public très étroitement défini. Si vous savez que la bande passante ne posera pas problème, c’est peut-être le bon chemin, mais ce n’est certainement pas une pratique exemplaire.
Autres solutions de codage
À l'opposé, les méthodes de codage reposent sur des modifications côté serveur (telles que les entrées de fichier.htaccess), ainsi que sur le codage PHP et Javascript.
Cela pourrait être votre meilleure approche, bien que les efforts nécessaires puissent en valoir la peine pour des projets plus petits.
Dans l’ensemble, votre approche dépendra de votre public, de la nature des éléments visuels de votre site et du niveau d’expertise technique de votre équipe de développement. Il existe une bonne solution pour à peu près toutes les situations. La seule mauvaise solution est d’ignorer complètement les écrans Retina.
NASDAQ Photo via Shutterstock
