Share
Rendre votre site Web prêt pour l'affichage Retina ne doit pas être un problème. Que vous construisiez un nouveau site Web ou que vous amélioriez un site existant, ce guide est conçu pour vous aider à faire votre travail correctement..
À propos, si vous cherchez une solution rapide, consultez les thèmes prêts pour Retina sur le marché Envato, tels que Rebound - Responsive Multipurpose Retina Theme..
Rebound - Thème rétine polyvalent réactif Le moyen le plus simple et le plus rapide d’ajouter la prise en charge de Retina consiste à créer une image optimisée pour les périphériques Retina et à la diffuser également aux périphériques non-Retina..
À l'heure actuelle, tous les navigateurs modernes utilisent le rééchantillonnage bicubique et effectuent un excellent travail en sous-échantillonnant les images. Voici une comparaison du sous-échantillonnage de Photoshop par rapport à Google Chrome, à l'aide d'une image de notre site Web Growth Engineering 101..
Il existe deux manières de laisser le navigateur sous-échantillonner les images: img balises ou images de fond CSS.
Vous pouvez avoir img les étiquettes servent l’image optimisée pour Retina et définissent les attributs de largeur et de hauteur à la moitié de la résolution de l’image réelle (par exemple,. 400x300 si les dimensions de l'image sont 800x600).
Si vous utilisez des images comme arrière-plans CSS, vous pouvez utiliser le fichier CSS3. taille de fond propriété permettant de sous-échantillonner l'image pour les périphériques non-Retina.
.photo background-image: url (Retina-image-800x600-2x.png); taille de l'arrière-plan: 400px 300px; répétition de fond: non répétée; bloc de visualisation; largeur: 400px; hauteur: 300px;
Dans les deux cas, veillez à utiliser des nombres pairs dans les deux dimensions pour empêcher le déplacement de pixels lorsque l'image est sous-échantillonnée par le navigateur..
Habituellement, le sous-échantillonnage du navigateur devrait fonctionner assez bien. Cela dit, dans certaines situations, le sous-échantillonnage du navigateur peut rendre les images floues..
Ici nous avons un tas de 32px icônes sociales.
Et voici comment ils vont apparaître, quand on les sous-échantillonne 16px de Photoshop ainsi que le filtre bicubique de Google Chrome. Il semble que nous obtenons de meilleurs résultats de Photoshop dans ce cas.
Pour obtenir les meilleurs résultats pour nos utilisateurs, nous pouvons créer deux versions de la même image: une pour les appareils Retina et une autre qui a été sous-échantillonnée par Photoshop pour les appareils non-Retina..
Maintenant, vous pouvez utiliser les requêtes de média CSS pour traiter des images Retina ou non, en fonction de la densité de pixels du périphérique..
/ * CSS pour les appareils avec des écrans normaux * / .icons background-image: url (icon-sprite.png); répétition de fond: non répétée;
/ * CSS pour les périphériques haute résolution * / @Media uniquement écran et (-Webkit-min-device-pixel-ratio: 1,5), uniquement l'écran et (-moz-min-device-ratio-pixel: 1,5), seul écran et (-o-min-device-pixel-ratio: 3/2), uniquement l'écran et (min-device-pixel-ratio: 1,5) .icons background-image: url (icon-sprite-2x.png) ; taille de l'arrière-plan: 200px 100px; répétition de fond: non répétée;
Si vous utilisez une couleur de fond pour les petites icônes, par contre, le sous-échantillonnage par le navigateur fonctionne plutôt bien. Voici le même exemple de sous-échantillonnage avec un fond blanc.
Si vous n'êtes toujours pas satisfait des résultats du sous-échantillonnage de Photoshop, vous pouvez faire un effort supplémentaire et optimiser à la main la version non-rétine pour obtenir des résultats super nets.
Vous trouverez ci-dessous quelques exemples d’images du site Web des produits Blossom que je optimisé à la main pour ceux qui utilisent encore des appareils autres que Retina.
Voici un exemple de problème de sous-échantillonnage lié aux repères, dans lequel je redessine les lignes de l'image sous-échantillonnée..
Voir la version Retina de cette image sur Dribbble.
Ensuite, nous arrivons à un exemple de problèmes de sous-échantillonnage avec du texte. Dans ce cas, j'ai manuellement réécrit le texte «Pipeline de fonctionnalités» pour rendre le résultat aussi net que possible..
Lorsque les détails, les polices de caractères nettes et les lignes de démarcation propres sont importantes, vous voudrez peut-être aller plus loin.
Le principal inconvénient des images pixellisées est leur taille de fichier considérable et le fait qu’elles ne sont pas correctement dimensionnées sans affecter la qualité de l’image. CSS, les graphiques vectoriels évolutifs (SVG) et les polices d'icônes constituent d'excellentes alternatives aux images rasterisées..
Si vous avez une chance de construire les éléments graphiques de votre site web en CSS, allez-y. Il peut être utilisé pour ajouter des dégradés, des bordures, des coins arrondis, des ombres, des flèches, des éléments de rotation et bien plus encore..
Voici quelques exemples d'éléments d'interaction dans Blossom qui sont implémentés dans CSS. Le dégradé subtil est alimenté par des dégradés CSS et la police personnalisée utilisée sur ce bouton est Kievit, diffusée via Typekit. Pas d'images.
Dans la capture d'écran suivante, les deux seules images utilisées sont l'avatar de l'utilisateur et le tampon bleu. Tout le reste - le point d'interrogation entouré, la flèche gris foncé à côté, le popover, son ombre et la flèche au-dessus - est purement HTML et CSS.
Ici, vous pouvez voir comment les projets dans Blossom apparaissent. Il s'agit d'une capture d'écran du site Web d'un projet utilisé comme couverture sur une pile de feuilles de papier. Les feuilles de papier sont mises en œuvre avec divs qui sont tournés en utilisant CSS.
En outre, la flèche entourée dans le côté droit de la capture d'écran ci-dessous est pur CSS.
Voici quelques outils impressionnants qui vous permettront de gagner du temps lors de la création d'effets avec CSS.
Le principal avantage de SVG est que, contrairement aux graphiques rasterisés, ils s’adaptent assez bien à différentes tailles. Si vous travaillez avec des formes simples, elles sont généralement plus petites que les PNG. Souvent, ils sont utilisés pour des choses comme des graphiques.
Les polices d'icônes sont fréquemment utilisées en remplacement des images-objets. Semblables à SVG, ils peuvent être redimensionnés à l'infini sans perte de qualité et sont généralement de taille plus petite que les images-objets. En plus de cela, vous pouvez utiliser CSS pour changer leur taille, leur couleur et même ajouter des effets, tels que des ombres.
Les polices SVG et icônes sont bien supportées par les navigateurs modernes.
Les favicons sont vraiment importants pour les utilisateurs qui ont besoin d’un moyen simple de savoir quel site Web appartient à quel onglet de navigateur. Un favicon prêt pour la rétine sera non seulement plus facile à identifier, mais il se démarquera également parmi une foule de favicons pixelisés qui n’ont pas encore été optimisés..
Pour que votre Favicon Retina soit prêt, je recommande vivement X-Icon Editor. Vous pouvez soit télécharger une seule image et laisser l’éditeur le redimensionner pour différentes dimensions, soit télécharger des images distinctes optimisées pour chaque taille afin d’obtenir les meilleurs résultats..
Si vous souhaitez mettre à niveau un site Web avec des images existantes, un peu plus de travail est nécessaire, car vous devrez recréer toutes les images pour les rendre prêtes pour Retina, mais cela ne vous fera pas perdre trop de temps..
Commencez par identifier les images que vous pouvez éviter en utilisant des alternatives telles que CSS, SVG et les polices d’image, comme indiqué précédemment. Les boutons, icônes et autres widgets d'interface utilisateur courants peuvent généralement être remplacés par des solutions modernes ne nécessitant aucune image..
Au cas où vous auriez réellement besoin de recréer des images pixellisées, vous voudrez bien sûr revenir aux fichiers sources. Comme vous pouvez le supposer, redimensionner deux fois plus simplement vos images bitmap pixellisées ne fait pas le travail, car tous les détails et toutes les bordures deviennent pixélisés..
Pas besoin de désespérer - les compositions d’images contenant principalement des vecteurs (c’est-à-dire dans Adobe Photoshop ou Illustrator) sont assez faciles à mettre à l’échelle. Cela dit, n'oubliez pas de vérifier si vos effets Photoshop dans les options de fusion, tels que les traits, les ombres et les biseaux, apparaissent toujours comme vous le souhaitez..
En général, créer des compositions Photoshop directement à partir de vecteurs (formes) et de Photoshop Objets intelligents vous fera économiser beaucoup de temps à l'avenir.
Enfin et surtout, optimiser la taille de fichier de toutes les images d'une application ou d'un site Web pourrait permettre de gagner jusqu'à 90% du temps de chargement des images. En ce qui concerne les images Retina, la réduction de la taille du fichier devient encore plus importante car elles ont une densité de pixels plus élevée, ce qui augmente la taille de leur fichier respectif..
Dans Photoshop, vous pouvez optimiser la taille du fichier image via la fonction «Enregistrer pour le Web». En plus de cela, il existe un excellent outil gratuit, appelé ImageAlpha, qui permet de réduire encore plus la taille de vos images avec juste une légère perte de qualité..
Contrairement à Photoshop, ImageApha peut convertir des PNG sur canal alpha 24 bits en PNG sur 8 bits avec prise en charge de canaux alpha. Cerise sur le gâteau, ces images optimisées sont compatibles avec plusieurs navigateurs et fonctionnent même pour IE6.!
Vous pouvez jouer avec différents paramètres dans ImageAlpha pour obtenir le bon compromis entre qualité et taille de fichier. Dans le cas ci-dessous, nous pouvons réduire la taille du fichier de près de 80%.
Lorsque vous avez terminé de définir les niveaux de compression souhaités, la boîte de dialogue de sauvegarde d'ImageAlpha propose également l'option «Optimiser avec ImageOptim», un autre outil formidable et gratuit..
ImageOptim sélectionne automatiquement les meilleures options de compression pour votre image et supprime les méta-informations et les profils de couleurs inutiles. Dans le cas de notre fichier de tampons, ImageOptim a pu réduire la taille du fichier d'un autre 34%.
Après avoir mis à jour tous les actifs sur Blossom.io pour les écrans haute résolution et utilisé ImageAlpha et ImageOptim pour optimiser la taille du fichier, nous avons finalement économisé quelques kilo-octets par rapport aux actifs dont nous disposions auparavant..
Si vous souhaitez en savoir plus sur la manière de préparer vos applications et vos sites Web pour les écrans Retina, je vous recommande vivement de "Retoucher vos sites Web et vos applications", par Thomas Fuchs. C'est un guide simple, étape par étape, qui m'a fait gagner beaucoup de temps et de nerfs.
Merci d'avoir lu! Des questions?
Accentsconagua