Applications Windows 8.1 : Optimiser les images pour différentes résolutions d'écran

Vous pouvez ajouter différentes versions de chaque image qui permettent l'identification de votre application (par exemple, logos et images d'écran de démarrage). Vous pouvez ensuite les tester pour vous assurer qu'elles apparaîtront correctement sur divers appareils présentant différentes résolutions d'écran. En ajoutant différentes versions de chaque image, vous pouvez réduire le degré auquel vos graphiques s'étireront ou se réduiront pour convenir à la taille d'écran de l'utilisateur.

Dans cette rubrique

• Nommer et organiser vos fichiers image

• Ajouter les fichiers image à votre projet

• Identifier les fichiers image dans le manifeste

• Afficher un aperçu de votre application dans différentes tailles et résolutions d'écran

Nommer et organiser vos fichiers image

Nommez les fichiers en fonction du type de ressource qu’ils représentent (par exemple, Square7070.png). Si vous envisagez d'enregistrer plusieurs fichiers dans le même dossier, incluez des qualificateurs d'échelle dans le nom des fichiers. Par exemple, vous pouvez nommer l’un de vos fichiers comme suit : Square7070Logo.scale-100.png.

Si vous envisagez d'organiser les fichiers au sein de dossiers en fonction du facteur d'échelle, incluez le qualificateur d'échelle dans le nom du dossier plutôt que dans le nom des fichiers. Par exemple, vous pouvez stocker les fichiers Square7070Logo.png et Square150150Logo.png dans un sous-dossier Assets\Scale-100.

Ajouter les fichiers image à votre projet

Ouvrez votre solution et ajoutez les fichiers image au dossier Ressources de votre projet d'application.

Si vous utilisez un projet d'application partagé pour générer une application dans plusieurs formats (par exemple, Windows et Windows Phone), vous pouvez ajouter votre fichier image au dossier Ressources du projet partagé dans votre solution, mais uniquement si cette image convient aux deux formats.

Identifier les fichiers image dans le manifeste

1. Dans l'Explorateur de solutions, ouvrez le concepteur de manifeste d'application (Package.appxmanifest), puis choisissez l'onglet Ressources visuelles.

2. Dans la liste des ressources visuelles, choisissez Tous les composants de l'image pour afficher les paramètres des images.

3. Si vous souhaitez qu'un nom court apparaisse sur votre logo principal, spécifiez-en un dans la zone de texte Nom court.

   Notes

   Pour les applications Windows Phone, les valeurs Nom court et Taille par défaut sont ignorées.

4. Dans la zone de texte de l'un des logos (par exemple, Logo carré 150x150), spécifiez le nom du logo principal.

   La valeur par défaut de Logo carré 150x150 est Ressources\Logo.png.

5. Dans la section Composants mis à l'échelle de la page, sélectionnez le bouton Parcourir () en regard de l'une des zones Échelle, accédez au dossier Ressources, spécifiez l'image adaptée à cette échelle, puis cliquez sur le bouton Ouvrir.

   Notes

   Pour afficher un gros plan de l'image dans la taille mise à l'échelle, sélectionnez l'image dans la zone. Une fenêtre d'aperçu s'ouvre et répertorie l'endroit où chaque fichier image est utilisé.

   L'image du fichier apparaît dans la zone et le fichier est copié. Le fichier copié est nommé conformément aux conventions d'affectation de noms des ressources pour les applications du Store : Nom.scale-nnn.ext, où nnn est le facteur d'échelle. Par exemple, le fichier peut être nommé Logo.scale-100.png.

Afficher un aperçu de votre application dans différentes tailles et résolutions d'écran

Vous pouvez afficher un aperçu des applications que vous avez créées pour le Store à l'aide d'un simulateur. Pour plus d'informations, consultez Exécuter des applications du Windows Store dans le simulateur.

Vous pouvez afficher un aperçu des applications que vous avez créées pour le Store Windows Phone à l'aide d'un émulateur. Sélectionnez un émulateur dans la liste déroulante située en regard du bouton Démarrer le débogage dans la barre d'outils Standard du débogueur. Sélectionnez un émulateur correspondant à la résolution dans laquelle vous souhaitez afficher un aperçu de votre application.

Voir aussi

Démarrage rapide : Utilisation de ressources de fichiers ou d’images (applications Windows Runtime en C#/VB/C++ et XAML)
Démarrage rapide : Utilisation de ressources de fichiers ou d’images (applications Windows Runtime en JavaScript et HTML)
Comment nommer des ressources à l’aide de qualificateurs (applications Windows Runtime en C#/VB/C++ et XAML)
Comment nommer des ressources à l’aide de qualificateurs (applications Windows Runtime en JavaScript et HTML)
Sélection de vos types d’images
Recommandations en matière de mise à l’échelle d’après la densité en pixels
Tailles d’images des vignettes et des toasts (applications Windows Runtime)
Recommandations en matière de vignettes et de badges
Recommandations en matière de miniatures
Le catalogue de modèles de vignettes (applications Windows Runtime)