La plupart des téléphones mobiles et de nombreux ordinateurs modernes ont maintenant des écrans haute résolution (Retina), ce qui signifie qu'ils ont une densité de pixels plus élevée. Si vous souhaitez rendre les images de votre site vraiment nettes sur les écrans standard et haute résolution, vous devrez fournir des versions supplémentaires de vos fichiers image avec des densités de pixels différentes.
Exigences de résolution
Plusieurs fichiers de résolution sont généralement requis en trois tailles:
@ 1x - Résolution standard 1: 1 pixels
@ 2x - Double résolution 2: 1 pixels
@ 3x - Triple résolution 3: 1 pixels
Si vous n'êtes pas issu de la conception, cela peut sembler un peu déroutant. Fondamentalement, un @ 2x l'image a deux fois la taille en pixels d'un @ 1x image et une @ 3x l'image fait trois fois la taille d'une @ 1x image, par exemple
@ 1x - 50x50px taille normale
@ 2x - 100x100px 2x la taille de @ 1x
@ 3x - 150x150px 3x la taille de @ 1x
Lors de la création d'images multi-résolution, il est courant d'appliquer un suffixe de texte dans le nom de fichier pour les résolutions les plus élevées, afin qu'elles puissent être facilement identifiées, par exemple
• mon-image.jpg
• mon-image@2x.jpg
• mon-image@3x.jpg
Application de plusieurs résolutions
Une fois que vous avez créé vos images dans les trois tailles de résolution requises (@1x, @2x et @3x), Blocs rend leur mise en œuvre très simple.
Configuration automatique
Aussi longtemps que tous les trois les variations de votre image ont le même nom et par @ 2x et @ 3x le suffixe est appliqué à leurs noms (le cas échéant), lorsque vous appliquez l'image de résolution standard à une image Bric, les versions à plus haute résolution seront également automatiquement appliquées.
Configuration manuelle
Si vos éléments d'image multi-résolution n'ont pas de noms correspondants, vous pouvez appliquer manuellement chaque résolution d'un élément à une image. Bric, à l'aide des contrôles de l'inspecteur. Sélectionnez simplement l'image sur la toile de conception en Clic gauche puis accédez aux options de l'inspecteur de la barre latérale. Sous la section intitulée Données, il y a un contrôle segmenté à 3 voies avec chaque option étiquetée @ 1x, @ 2x et @ 3x. Clic gauche l'une des 3 options définira les options d'image pour cette résolution cible. Maintenant si tu Click gauche la vignette d'image située directement sous le contrôle segmenté, il vous sera demandé de sélectionner le fichier image spécifique à afficher dans cette résolution.
Vous pouvez maintenant appliquer des images supplémentaires pour les deux @ 2x et @ 3x, ces images supplémentaires seront servies à un visiteur s'il dispose d'un appareil avec une densité de pixels plus élevée.
Si vous courez Blocs sur un écran haute résolution, vous remarquerez peut-être que les images peuvent apparaître floues. Cela est dû au fait que dans l'environnement de conception Blocs affiche la version sans rétine d'une image sur le canevas de conception. Lorsque vous entrez en mode aperçu ou exportez votre site, vous devriez remarquer que la variation haute résolution de l'image est maintenant affichée correctement.