Files

Amélioration qualité images avec rendu CSS optimisé

- Amélioration rendu CSS des images dans PlaceCard
- Ajout propriétés imageRendering pour meilleure qualité
- Ajout loading='lazy' et fetchPriority='high'
- Script Node.js pour télécharger images haute résolution
- Guide README pour télécharger images Google Maps en HD
- APK rebuild

2025-11-24 13:17:54 +01:00

3.2 KiB

Raw Permalink Blame History

Guide pour télécharger les images en haute résolution

Ce guide explique comment télécharger les images Google Maps en haute résolution pour améliorer la qualité d'affichage dans l'application.

Méthode 1 : Utiliser le script Node.js (Recommandé)

Étape 1 : Obtenir les URLs d'images depuis Google Maps

Pour chaque lieu, suivez ces étapes :

Ouvrez le lien Google Maps du lieu dans votre navigateur
Faites défiler jusqu'à voir les photos du lieu
Cliquez sur une photo pour l'agrandir
Faites un clic droit sur l'image agrandie > Inspecter l'élément
Trouvez l'URL de l'image dans le code HTML (généralement sur googleusercontent.com)
Copiez l'URL complète de l'image

Étape 2 : Modifier l'URL pour haute résolution

Les URLs Google Maps contiennent des paramètres de taille comme w=203-h=152. Pour obtenir une meilleure résolution :

Remplacez w=203 par w=1600 (ou w=2048 pour encore plus de qualité)
Remplacez h=152 par h=1200 (ou h=1536 pour encore plus de qualité)

Exemple :

URL originale:  https://lh3.googleusercontent.com/...w=203-h=152-k-no
URL haute rés:  https://lh3.googleusercontent.com/...w=1600-h=1200-k-no

Étape 3 : Configurer le script

Éditez le fichier scripts/download-high-res-images.js et ajoutez vos URLs dans le tableau IMAGES_TO_DOWNLOAD :

const IMAGES_TO_DOWNLOAD = [
  {
    name: "Snack du Requin Dormeur",
    url: "https://lh3.googleusercontent.com/...w=1600-h=1200-k-no",
    outputFile: "restaurant-requin-dormeur.jpg"
  },
  {
    name: "Snack Kori Kori",
    url: "https://lh3.googleusercontent.com/...w=1600-h=1200-k-no",
    outputFile: "restaurant-kori-kori.jpg"
  },
  // ... ajoutez les autres images
];

Étape 4 : Exécuter le script

node scripts/download-high-res-images.js

Le script téléchargera toutes les images configurées dans le dossier public/images/.

Méthode 2 : Téléchargement manuel

Si vous préférez télécharger manuellement :

Suivez les étapes 1 et 2 ci-dessus pour obtenir les URLs en haute résolution
Ouvrez chaque URL dans votre navigateur
Faites un clic droit > Enregistrer l'image sous...
Enregistrez dans public/images/ avec le bon nom de fichier

Images à télécharger

Voici la liste des images qui proviennent de Google Maps et qui peuvent être améliorées :

restaurant-requin-dormeur.jpg - Snack du Requin Dormeur
restaurant-kori-kori.jpg - Snack Kori Kori
plage-cocotier-pk9.jpg - Plage PK 9
phare-topaka.jpg - Ancien Phare de Topaka
epicerie-tumoana.jpg - Tumoana Markets
snack-chez-elda.jpg - Snack Chez Elda

Résolution recommandée

Minimum : 1200x800 pixels
Recommandé : 1600x1200 pixels
Maximum : 2048x1536 pixels (pour éviter des fichiers trop lourds)

Notes importantes

Les URLs Google Maps peuvent expirer après un certain temps
Si une URL ne fonctionne plus, vous devrez la récupérer à nouveau depuis Google Maps
Les images haute résolution seront plus lourdes, mais la qualité d'affichage sera bien meilleure
Le composant PlaceCard a été optimisé pour un meilleur rendu des images

3.2 KiB Raw Permalink Blame History