Afficher un drapeau pays sur un site web semble trivial. Multiplié par 250 entrées dans une liste, c'est une question de performance, d'accessibilité et de maintenabilité. Voici le pattern complet en 2026.

Les 4 méthodes principales

1. SVG inline

<svg viewBox="0 0 3 2">
  <rect width="1" height="2" fill="#002654"/>
  <rect x="1" width="1" height="2" fill="#fff"/>
  <rect x="2" width="1" height="2" fill="#ED2939"/>
</svg>

Avantage : aucune requête réseau, redimensionnement parfait, manipulable en CSS/JS.
Inconvénient : alourdit le HTML si beaucoup de drapeaux ; pas de cache navigateur dédié.

2. Balise <img> classique

<img
  src="/flags/fr.svg"
  alt="Drapeau de la France"
  width="60"
  height="40"
  loading="lazy"
  decoding="async"
/>

Avantage : cache HTTP, simplicité, lazy-loading natif.
Inconvénient : une requête par drapeau (sauf avec HTTP/2 multiplexing).

3. Sprite SVG

Tous les drapeaux dans un fichier unique, référencés par <use> :

<svg width="60" height="40">
  <use href="/flags.svg#fr"/>
</svg>

Avantage : une seule requête HTTP pour tous les drapeaux.
Inconvénient : fichier sprite volumineux (~500 Ko pour 250 drapeaux), nécessite outillage (svg-sprite-loader).

4. CSS background-image

.flag-fr {
  background-image: url('/flags/fr.svg');
  background-size: cover;
  width: 60px;
  height: 40px;
}

Avantage : drapeau décoratif sans contenu sémantique.
Inconvénient : non accessible (lecteurs d'écran ignorent), pas d'alt.

Accessibilité : alt et aria

Drapeau informatif (à côté d'un nom de pays affiché) : alt="" car l'info est déjà présente.
Drapeau seul (sélecteur de langue, par exemple) : alt="Drapeau de la France" ou aria-label.
Drapeau décoratif (bannière fond) : alt="" et role="presentation" en SVG inline.
Jamais d'emoji drapeau pour véhiculer une information critique : support inégal (Windows ne rend pas les emoji régionaux par défaut).

Télécharger des drapeaux optimisés pour le web

Performance : lazy-loading et dimensions

Trois règles non négociables pour ne pas plomber les Core Web Vitals :

loading="lazy" sur tous les drapeaux hors viewport initial.
width et height explicites pour éviter le CLS (Cumulative Layout Shift).
decoding="async" pour ne pas bloquer le rendu.

Pattern React recommandé

function Flag({ cca2, name, size = 32 }) {
  const url = `/flags/${cca2.toLowerCase()}.svg`;
  return (
    <img
      src={url}
      alt={`Drapeau de ${name}`}
      title={name}
      width={size}
      height={(size * 2) / 3}
      loading="lazy"
      decoding="async"
    />
  );
}

Tableau récapitulatif

Méthode	Perf	Accessibilité	Idéal pour
SVG inline	★★★	★★★	1-5 drapeaux par page
<img> SVG	★★	★★★	10-50 drapeaux
Sprite SVG	★★★	★★★	50+ drapeaux statiques
CSS background	★★	★	Décoratif uniquement

Intégrer un drapeau dans un site web : SVG, lazy-loading, accessibilité