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
parent 65ccd2daaf
commit 681d5da4d1
5 changed files with 362 additions and 0 deletions
--- a/components/explorer/PlaceCard.tsx
+++ b/components/explorer/PlaceCard.tsx
@ -32,6 +32,11 @@ export default function PlaceCard({ place }: PlaceCardProps) {
            src={place.image}
            alt={place.name}
            className="w-full h-full object-cover"
+            style={{
+              imageRendering: 'auto',
+            } as React.CSSProperties}
+            loading="lazy"
+            fetchPriority="high"
            onError={() => setImageError(true)}
          />
        ) : (
--- a/dist/compagnon-lagon-beta.apk
+++ b/dist/compagnon-lagon-beta.apk
--- a/scripts/README-IMAGES-HD.md
+++ b/scripts/README-IMAGES-HD.md
@ -0,0 +1,91 @@
+# 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
+
--- a/scripts/download-high-res-images.js
+++ b/scripts/download-high-res-images.js
@ -0,0 +1,153 @@
+#!/usr/bin/env node
+
+/**
+ * Script pour télécharger les images Google Maps en haute résolution
+ * 
+ * Usage:
+ *   node scripts/download-high-res-images.js
+ * 
+ * Ce script télécharge les images depuis les URLs Google Maps en modifiant
+ * les paramètres de taille pour obtenir une meilleure résolution.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const https = require('https');
+const http = require('http');
+
+const IMAGES_DIR = path.join(__dirname, '..', 'public', 'images');
+
+// Configuration des images à télécharger
+// Format: { name, url, outputFile }
+// Les URLs doivent être les URLs directes des images Google Maps (googleusercontent.com)
+// Pour obtenir ces URLs:
+// 1. Ouvrez le lien Google Maps dans un navigateur
+// 2. Faites un clic droit sur l'image > Inspecter l'élément
+// 3. Copiez l'URL de l'image (généralement sur googleusercontent.com)
+// 4. Modifiez les paramètres w=XXX par w=1600 et h=YYY par h=1200 dans l'URL
+const IMAGES_TO_DOWNLOAD = [
+  // Exemple (à remplacer par les vraies URLs):
+  // {
+  //   name: "Snack du Requin Dormeur",
+  //   url: "https://lh3.googleusercontent.com/...w=1600-h=1200-k-no",
+  //   outputFile: "restaurant-requin-dormeur.jpg"
+  // },
+];
+
+/**
+ * Télécharge une image depuis une URL
+ */
+function downloadImage(url, outputPath) {
+  return new Promise((resolve, reject) => {
+    const protocol = url.startsWith('https') ? https : http;
+    
+    const file = fs.createWriteStream(outputPath);
+    
+    protocol.get(url, (response) => {
+      if (response.statusCode === 200) {
+        response.pipe(file);
+        file.on('finish', () => {
+          file.close();
+          resolve();
+        });
+      } else if (response.statusCode === 301 || response.statusCode === 302) {
+        // Suivre les redirections
+        file.close();
+        fs.unlinkSync(outputPath);
+        downloadImage(response.headers.location, outputPath)
+          .then(resolve)
+          .catch(reject);
+      } else {
+        file.close();
+        fs.unlinkSync(outputPath);
+        reject(new Error(`Erreur HTTP ${response.statusCode}`));
+      }
+    }).on('error', (err) => {
+      file.close();
+      if (fs.existsSync(outputPath)) {
+        fs.unlinkSync(outputPath);
+      }
+      reject(err);
+    });
+  });
+}
+
+/**
+ * Vérifie si un fichier est une image valide
+ */
+function isValidImage(filePath) {
+  try {
+    const stats = fs.statSync(filePath);
+    if (stats.size === 0) return false;
+    
+    // Vérifier l'extension
+    const ext = path.extname(filePath).toLowerCase();
+    return ['.jpg', '.jpeg', '.png', '.webp'].includes(ext);
+  } catch (err) {
+    return false;
+  }
+}
+
+/**
+ * Fonction principale
+ */
+async function main() {
+  console.log('========================================');
+  console.log('📥 Téléchargement images haute résolution');
+  console.log('========================================\n');
+
+  // Créer le dossier images s'il n'existe pas
+  if (!fs.existsSync(IMAGES_DIR)) {
+    fs.mkdirSync(IMAGES_DIR, { recursive: true });
+  }
+
+  if (IMAGES_TO_DOWNLOAD.length === 0) {
+    console.log('⚠️  Aucune URL d\'image configurée dans le script.\n');
+    console.log('Pour télécharger des images en haute résolution:');
+    console.log('1. Ouvrez le lien Google Maps dans un navigateur');
+    console.log('2. Faites un clic droit sur l\'image > Inspecter l\'élément');
+    console.log('3. Copiez l\'URL de l\'image (généralement sur googleusercontent.com)');
+    console.log('4. Modifiez les paramètres w=XXX par w=1600 et h=YYY par h=1200');
+    console.log('5. Ajoutez l\'URL dans le tableau IMAGES_TO_DOWNLOAD du script\n');
+    console.log('Exemple d\'URL Google Maps image:');
+    console.log('https://lh3.googleusercontent.com/gps-cs-s/...w=1600-h=1200-k-no\n');
+    return;
+  }
+
+  let successCount = 0;
+  let failCount = 0;
+
+  for (const image of IMAGES_TO_DOWNLOAD) {
+    const outputPath = path.join(IMAGES_DIR, image.outputFile);
+    
+    console.log(`📸 Téléchargement: ${image.name}`);
+    console.log(`   URL: ${image.url.substring(0, 80)}...`);
+    
+    try {
+      await downloadImage(image.url, outputPath);
+      
+      if (isValidImage(outputPath)) {
+        const stats = fs.statSync(outputPath);
+        const sizeMB = (stats.size / (1024 * 1024)).toFixed(2);
+        console.log(`   ✅ Téléchargé: ${image.outputFile} (${sizeMB} MB)\n`);
+        successCount++;
+      } else {
+        console.log(`   ❌ Fichier invalide: ${image.outputFile}\n`);
+        failCount++;
+      }
+    } catch (error) {
+      console.log(`   ❌ Erreur: ${error.message}\n`);
+      failCount++;
+    }
+  }
+
+  console.log('========================================');
+  console.log('✅ Téléchargement terminé');
+  console.log('========================================');
+  console.log(`✅ Succès: ${successCount}`);
+  console.log(`❌ Échecs: ${failCount}\n`);
+}
+
+// Exécuter le script
+main().catch(console.error);
+
--- a/scripts/download-high-res-images.sh
+++ b/scripts/download-high-res-images.sh
@ -0,0 +1,113 @@
+#!/bin/bash
+
+# Script pour télécharger les images Google Maps en haute résolution
+# Usage: ./scripts/download-high-res-images.sh
+
+set -e
+
+IMAGES_DIR="public/images"
+RESOLUTION="1600x1200"  # Haute résolution
+
+echo "=========================================="
+echo "📥 Téléchargement images haute résolution"
+echo "=========================================="
+echo ""
+
+# Fonction pour télécharger une image Google Maps en haute résolution
+download_google_maps_image() {
+    local image_url=$1
+    local output_file=$2
+    local place_name=$3
+    
+    echo "📸 Téléchargement: $place_name"
+    
+    # Extraire l'URL de l'image depuis l'URL Google Maps
+    # Les URLs Google Maps contiennent souvent des paramètres w= et h= pour la taille
+    # On va remplacer ces paramètres par des valeurs plus élevées
+    
+    # Si l'URL contient déjà des paramètres de taille, on les remplace
+    if [[ $image_url == *"w="* ]] && [[ $image_url == *"h="* ]]; then
+        # Remplacer w=XXX par w=1600 et h=YYY par h=1200
+        high_res_url=$(echo "$image_url" | sed 's/w=[0-9]*/w=1600/g' | sed 's/h=[0-9]*/h=1200/g')
+    else
+        # Si pas de paramètres de taille, on essaie d'ajouter des paramètres
+        # Note: Google Maps peut ne pas accepter tous les paramètres, donc on utilise l'URL telle quelle
+        high_res_url="$image_url"
+    fi
+    
+    # Télécharger l'image
+    if curl -L -f -s "$high_res_url" -o "$output_file" 2>/dev/null; then
+        # Vérifier que le fichier est valide
+        if file "$output_file" | grep -q "image"; then
+            local size=$(du -h "$output_file" | cut -f1)
+            echo "   ✅ Téléchargé: $output_file ($size)"
+            return 0
+        else
+            echo "   ❌ Fichier invalide: $output_file"
+            rm -f "$output_file"
+            return 1
+        fi
+    else
+        echo "   ⚠️  Échec du téléchargement (URL peut-être invalide ou expirée)"
+        return 1
+    fi
+}
+
+# Liste des images Google Maps à télécharger en haute résolution
+# Format: "URL_IMAGE|FICHIER_SORTIE|NOM_LIEU"
+
+declare -a IMAGES=(
+    # Ces URLs doivent être extraites depuis les liens Google Maps
+    # Pour obtenir l'URL de l'image, il faut:
+    # 1. Ouvrir le lien Google Maps dans un navigateur
+    # 2. Faire un clic droit sur l'image > Inspecter l'élément
+    # 3. Copier l'URL de l'image (généralement sur googleusercontent.com)
+    # 4. Modifier les paramètres w= et h= pour augmenter la résolution
+    
+    # Exemple (à remplacer par les vraies URLs):
+    # "https://lh3.googleusercontent.com/...w=1600-h=1200...|restaurant-requin-dormeur.jpg|Snack du Requin Dormeur"
+)
+
+if [ ${#IMAGES[@]} -eq 0 ]; then
+    echo "⚠️  Aucune URL d'image configurée dans le script."
+    echo ""
+    echo "Pour télécharger des images en haute résolution:"
+    echo "1. Ouvrez le lien Google Maps dans un navigateur"
+    echo "2. Faites un clic droit sur l'image > Inspecter l'élément"
+    echo "3. Copiez l'URL de l'image (généralement sur googleusercontent.com)"
+    echo "4. Modifiez les paramètres w=XXX par w=1600 et h=YYY par h=1200"
+    echo "5. Ajoutez l'URL dans le tableau IMAGES du script"
+    echo ""
+    echo "Exemple d'URL Google Maps image:"
+    echo "https://lh3.googleusercontent.com/gps-cs-s/...w=1600-h=1200-k-no"
+    exit 0
+fi
+
+# Créer le dossier images s'il n'existe pas
+mkdir -p "$IMAGES_DIR"
+
+# Télécharger chaque image
+success_count=0
+fail_count=0
+
+for image_data in "${IMAGES[@]}"; do
+    IFS='|' read -r url output_file place_name <<< "$image_data"
+    
+    output_path="$IMAGES_DIR/$output_file"
+    
+    if download_google_maps_image "$url" "$output_path" "$place_name"; then
+        ((success_count++))
+    else
+        ((fail_count++))
+    fi
+    
+    echo ""
+done
+
+echo "=========================================="
+echo "✅ Téléchargement terminé"
+echo "=========================================="
+echo "✅ Succès: $success_count"
+echo "❌ Échecs: $fail_count"
+echo ""
+