Bannière du site

Neptune 108 Manuel Utilisateurs

Info: Images HiDPI

Les appareils d’affichage haute densité, comme les écrans Retina d’Apple, ont deux fois plus de pixels physiques (ou plus) dans une zone donnée, par rapport aux appareils ordinaires. Les images apparaîtront plus nettes sur ces écrans si elles sont plus grandes, mais affichées dans la moitié de l’espace de mise en page CSS. Par exemple, une image de 1200px de large est normalement affichée en 1200 pixels CSS sur un moniteur normal et utilise 1200 pixels physiques. Mais pour un appareil haute densité, il est préférable de fournir une image de 2400px de large, puis de l’afficher en 1200 pixels CSS sur le moniteur. Lorsque vous faites cela, l’affichage utilise pleinement les 2400 pixels disponibles dans l’image, en utilisant 2400 de ses pixels physiques.

jAlbum inclut la possibilité, sous Paramètres » Images » Avancé, de créer des vignettes haute densité et/ou des images de diapositives, appelées images HiDPI. Cela ne produit pas réellement d’images avec une densité de pixels plus élevée - cela n’existe pas. Il produit simplement des images avec le double des limites de l’image - le skin, cependant, affiche ensuite ces images dans la moitié de l’espace.

Cela peut produire une image plus belle sur un moniteur haute densité. La pénalité est que les fichiers image sont généralement plusieurs fois la taille du fichier. Ils consomment plus de bande passante, prenant plus de temps à télécharger l'album et plus de temps à télécharger lorsque quelqu’un visite le site. L’utilisateur avec un moniteur régulier est obligé de télécharger des fichiers beaucoup plus volumineux, mais n’en tire aucun avantage.

Par défaut, le skin utilise Vignettes HiDPI, ce qui produit des vignettes plus belles sur les écrans haute densité. Même sur un moniteur ordinaire, ces vignettes ont meilleure apparence lorsqu’elles sont survolées, car les images sont agrandies lorsque le visiteur les survole. Pour les vignettes, cela produit des fichiers plus volumineux, mais ils sont encore relativement petits, de sorte que la pénalité de bande passante est mineure.

L’utilisation d’images HiDPI est une toute autre affaire. La pénalité de bande passante est substantielle, mais l’amélioration perçue de la qualité d’affichage n’est pas aussi spectaculaire qu’avec de petites images comme des vignettes. Au fur et à mesure que la bande passante disponible pour les visiteurs de votre site continue de croître, l’utilisation accrue de la bande passante deviendra sans importance. De plus, le skin effectue beaucoup de préchargement d’images, de sorte que lorsqu’un visiteur se déplace dans les diapositives, il n’y aura souvent aucun retard, même avec des images HiDPI. L’amélioration de la technologie finira par en faire un non-problème, et vous pourrez utiliser Images HiDPI dans tous vos albums..

Il convient de noter que si les images que vous ajoutez à votre projet ne sont pas assez grandes pour commencer, peut-être 3000x2000 pixels, il n’y a aucun avantage à utiliser des images HiDPI, et il n’y a aucune raison de choisir cette option. jAlbum ne peut pas interpoler et produire plus d’informations d’image que ce qui est présent dans les images d’origine.

Les versions récentes de jAlbum incluent la possibilité de produire des albums avec deux ensembles d’images, mais le script d’affichage d’image utilisé dans ce skin n’est pas conçu pour les utiliser. De plus, une image « variante 2X » dans jAlbum n’est pas traitée de la même manière qu’une image HiDPI - l’avantage de la plus grande densité est perdu.

Si vous souhaitez fournir des images HiDPI aux visiteurs avec des moniteurs haute densité, mais ne pas pénaliser les visiteurs avec des moniteurs réguliers, la seule solution est de produire deux copies de l’album. Créez votre projet et appelez-le, par exemple, mydogBR (pour "basse résolution"), en utilisant des limites d’image qui produisent de belles diapositives sur un moniteur normal (le skin est par défaut, par exemple). Acceptez les paramètres par défaut - Vignettes HiDPI mais pas Images HiDPI. Téléchargez votre album sur https://mysite.com/mydogBR/.

Maintenant, dupliquez l’ensemble du projet - cliquez sur la flèche vers le bas à droite du nom du projet dans le panneau de projet jAlbum, choisissez Dupliquer Projet... et appelez-le mydogHR (pour "haute résolution"). Dans ce projet en double, choisissez Images HiDPI, créez l’album et téléchargez-le sur https://mysite.com/mydogHR/.

Vous devez maintenant fournir un script de pilotage sur votre site, afin que les visiteurs soient dirigés vers l’album approprié. Créez un répertoire sur votre site appelé https://mysite.com/mydog/ et téléchargez un index.html qui contient les éléments suivants :

<!DOCTYPE html>
<meta charset='UTF-8'>
<title>Redirect</title>
<script>
if(screen.width >= 768 && screen.height >= 768 && window.devicePixelRatio >= 2) {
	window.location = "http://mysite.com/mydogHR/";
} else {
	window.location = "http://mysite.com/mydogBR/";
}
</script>

Tous les visiteurs peuvent désormais recevoir un seul lien vers votre album : https://mysite.com/mydog/. Le script de direction dirigera automatiquement les visiteurs vers l’album haute résolution s’ils sont sur quelque chose de la taille d’un iPad ou plus grand, et ont un écran haute densité. Ce sont les visiteurs qui peuvent bénéficier des images de diapositives plus grandes. Les autres visiteurs seront dirigés vers l’album basse résolution.