Images multi-résolution

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 les nouveautés @ 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.

 

Les images semblent floues Blocs

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.

Mis à jour le 12 mars 2023

Cet article a-t-il été utile?

Articles Relatifs