Photos de plats sur le site d’un restaurant : rapides à charger, faciles à lire

Note d'archive. Cet article décrit la situation au moment de sa publication. Les règles, les outils et les fonctionnalités mentionnés ont pu changer depuis. Vérifiez l'information à jour auprès de la source officielle avant d'agir.

Photos de plats sur le site d'un restaurant : bien réglées, elles gardent un visiteur affamé sur la page assez longtemps pour qu'il ait envie d'une table. Je m'appelle Marven Salgado et je gère la publicité et le référencement local de restaurants autour de Mascouche et du Grand Montréal. Ce que je vois sans arrêt, c'est une page de menu remplie de plats superbes qui mettent tellement de temps à s'afficher que la personne a déjà défilé plus loin. La vitesse décide si une photo vend une assiette ou passe inaperçue.

Photos de plats sur le site d'un restaurant : pourquoi le temps de chargement décide si on les voit

Les photos d'un site de restaurant ne sont vues que si elles chargent vite : sur un téléphone, la page de menu a quelques secondes pour s'afficher avant qu'un visiteur affamé abandonne. Sur un petit écran et une connexion capricieuse, tout se joue là.

Le coupable habituel, c'est le poids du fichier. Un appareil photo enregistre un plat à quatre ou cinq mégaoctets, bien plus que ce dont un navigateur a besoin pour l'afficher sur quelques centaines de pixels de large. Passez cette même photo dans une vraie compression et vous ramenez le fichier à une fraction de l'original sans abîmer son allure. Les fichiers plus légers arrivent plus tôt, alors les gens voient les plats avant de perdre patience.

Dimensions et résolution des photos qui tiennent dans une page de menu sans l'alourdir

Les dimensions comptent parce qu'un navigateur gaspille du travail à réduire une image trop grande à la volée. Je règle mes photos de menu à la largeur que la mise en page affiche vraiment : environ 800 pixels pour un plat entier, 400 pour une vignette. Un écran a rarement besoin de plus de détail.

Le piège, c'est de juger une photo à son allure à l'écran plutôt qu'au poids de son fichier. Une image peut paraître petite dans la mise en page et peser un mégaoctet en dessous, parce que personne n'a réduit le fichier, seulement l'affichage. Après avoir redimensionné une photo, je vérifie le poids du fichier en kilooctets, pas seulement ses dimensions en pixels. Une prise bien éclairée aide ici aussi, car une image propre et régulièrement éclairée se compresse plus serré qu'une image boueuse ou granuleuse.

Réglages de compression JPEG qui gardent le détail sans ralentir la page

Le JPEG autour de 60 à 75 pour cent de qualité garde une assiette nette tout en ramenant le fichier à une fraction de l'original de l'appareil. C'est mon point de départ pour les plats ; en dessous, les bords des garnitures et des sauces commencent à baver.

Enregistrez vos photos de plats en JPEG. Les formats plus récents promettent des fichiers plus légers, mais on ne peut pas encore se fier au WebP, parce que Safari ne le prend pas en charge, alors une partie de vos visiteurs verraient une image brisée. Tenez-vous-en à un JPEG bien compressé et vous obtenez un fichier rapide qui s'affiche partout.

Le lazy-loading natif qui émerge et où il aide le plus

Le chargement différé natif est tout nouveau, et il vaut la peine d'être connu. Chrome a ajouté il y a quelques mois la prise en charge d'un attribut loading="lazy" sur les images, qui dit au navigateur d'attendre avant de télécharger une photo, jusqu'à ce que le visiteur défile près d'elle. Tous les navigateurs ne le gèrent pas encore, alors voyez-le comme un bonus par-dessus une bonne compression, pas un remplacement. Vous ajoutez un attribut à vos balises img et le navigateur fait le reste, sans extension ni script supplémentaire.

C'est sur les pages qui portent beaucoup d'images d'un coup qu'il rapporte le plus :

Type de page	Pourquoi le chargement différé aide
Menu complet avec photos	Seules les premières images chargent tout de suite
Page galerie	Des dizaines de prises cessent de se disputer la bande passante
Page d'accueil longue	L'image du haut charge vite, celles du bas attendent
Billet de blogue avec photos	Le lecteur reçoit vite le texte et l'image du haut

Laissez-le de côté sur l'image vedette en haut de la page. Celle-là doit s'afficher à l'instant où quelqu'un arrive.

Images adaptatives : servir un fichier plus léger à un écran de téléphone

Les images adaptatives laissent une même photo servir un petit fichier à un téléphone et un plus gros à un ordinateur, pour que personne ne télécharge plus que son écran ne peut utiliser. Ça se met en place avec l'attribut srcset dans la balise d'image.

Vous donnez au navigateur une courte liste de la même prise à différentes largeurs, disons 400, 800 et 1200 pixels, et il choisit la plus petite qui reste nette sur l'écran où il tourne. Un téléphone n'a jamais à télécharger un fichier taillé pour un grand écran. La plupart des créateurs de site hébergés comme Squarespace et Wix branchent ça d'eux-mêmes. Sur un site web sur mesure, demandez à la personne qui entretient le site de confirmer que srcset est en place sur les pages de menu et de galerie, puisque ce sont elles qui portent le plus de photos.

Photographie de plats qui se compresse bien : lumière, arrière-plan et cadrage

La façon de photographier une assiette décide à quel point le fichier peut être léger, car la compression peine avec le bruit visuel. Une lumière douce et régulière venue d'une fenêtre garde les ombres tendres, et des ombres tendres retiennent bien moins du fin détail qui fait gonfler un fichier. Un arrière-plan simple, une table en bois ou un linge de lin uni, donne au compresseur de grandes zones plates qu'il stocke à peu de frais. Un arrière-plan chargé et à motifs force le fichier à garder plus d'information, et la photo s'alourdit.

Choix de prise de vue	Effet sur le poids du fichier
Lumière douce et diffuse	Fichier plus léger et plus lisse
Arrière-plan encombré	Fichier plus lourd et plus bruité
Cadrage serré sur l'assiette	Fichier plus léger, allure plus nette

Cadrez l'assiette de près et laissez le plat remplir presque toute la prise. Ça se photographie mieux et ça se compresse mieux en même temps.

Test de vitesse de page après l'ajout de nouvelles photos

Testez la vitesse de la page chaque fois que vous ajoutez des photos, car un seul fichier trop lourd peut défaire des semaines de compression soignée. Je passe la page de menu ou de galerie dans Google PageSpeed Insights ou GTmetrix et je relis le temps de chargement juste après la mise en ligne des nouvelles images.

Si le temps de chargement grimpe, le coupable est presque toujours une seule photo trop lourde. Ouvrez les fichiers d'image et vérifiez leur poids en kilooctets ; au-delà d'environ 200 Ko pour une photo de plat, il faut d'ordinaire une autre passe de compression. Testez sur un ordinateur et sur un téléphone, parce qu'une connexion mobile dans le Grand Montréal charge les pages plus lentement que le Wi-Fi de la maison, et c'est sur le téléphone que la plupart des clients vous trouvent.

Liste de vérification des photos avant de publier une nouvelle page de menu

Faites une courte vérification avant qu'une nouvelle page de menu soit en ligne, pour qu'une image trop lourde ne passe pas entre les mailles. J'utilise la même liste chaque fois :

• Redimensionnez chaque photo à la largeur affichée par la mise en page, pas l'original de l'appareil.
• Enregistrez chacune en JPEG autour de 60 à 75 pour cent de qualité, et laissez le WebP de côté pour l'instant.
• Donnez à chaque image un texte alternatif descriptif, pour l'accessibilité et pour la recherche locale.
• Chargez la page sur une connexion mobile lente pour sentir comment elle s'ouvre vraiment.
• Comptez les photos de la page et coupez celles qui ne méritent pas leur poids.

Une page de menu doit donner faim, et elle doit aussi charger assez vite pour qu'un client affamé reste pour la lire.