syoul
681d5da4d1
- 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
92 lines
3.2 KiB
Markdown
92 lines
3.2 KiB
Markdown
# 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 :
|
|
|
|
1. **Ouvrez le lien Google Maps** du lieu dans votre navigateur
|
|
2. **Faites défiler** jusqu'à voir les photos du lieu
|
|
3. **Cliquez sur une photo** pour l'agrandir
|
|
4. **Faites un clic droit** sur l'image agrandie > **Inspecter l'élément**
|
|
5. **Trouvez l'URL de l'image** dans le code HTML (généralement sur `googleusercontent.com`)
|
|
6. **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` :
|
|
|
|
```javascript
|
|
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
|
|
|
|
```bash
|
|
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 :
|
|
|
|
1. Suivez les étapes 1 et 2 ci-dessus pour obtenir les URLs en haute résolution
|
|
2. Ouvrez chaque URL dans votre navigateur
|
|
3. Faites un clic droit > **Enregistrer l'image sous...**
|
|
4. 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
|
|
|