La complexité cachée du chargement d'images web : guide pour WebGL et WebGPU

Les navigateurs servent à afficher images et textes. Ça paraît simple. Pourtant, charger des images pour WebGL ou WebGPU reste un vrai casse-tête.

Le vrai défi ? Transférer les pixels vers le GPU le plus vite possible. Selon l'API choisie, les perfs et la fiabilité changent d'un navigateur à l'autre.

Pourquoi ça compte en dev web moderne

Pour vos apps 3D, viz en temps réel ou tout ce qui touche le GPU, ce choix est crucial. Une mauvaise décision ? Des chutes de framerate, une mémoire qui gonfle, ou un rendu qui plante sur certains browsers. Un tueur de perfs invisible jusqu'au déploiement.

Le labyrinthe des APIs

WebGL et WebGPU proposent plusieurs voies pour transformer les images en textures GPU. Chacune avec ses compromis.

WebGL via gl.texImage2D accepte :

• ImageBitmap
• ImageData
• HTMLImageElement
• HTMLCanvasElement
• HTMLVideoElement
• OffscreenCanvas
• VideoFrame

WebGPU fait pareil avec queue.copyExternalImageToTexture et les mêmes sources DOM.

Trop d'options ? Ça semble génial. En vrai, ça vous force à tout optimiser vous-même. Faut connaître les impacts perfs et les bugs par navigateur.

Le paradoxe de createImageBitmap : idéal sur papier, galère en pratique

createImageBitmap promet monts et merveilles. Asynchrone, économe, avec contrôle précis sur orientation, color space et alpha. Exemple basique :

export async function chargerImageBitmap(url) {
  const res = await fetch(url, { mode: "cors" })
  if (!res.ok) throw new Error(`Erreur HTTP ${res.status} sur ${url}`)
  const blob = await res.blob()

  return createImageBitmap(blob, {
    imageOrientation: "none",
    colorSpaceConversion: "none",
    premultiplyAlpha: "none"
  })
}

Propre et efficace... en théorie. La réalité frappe fort.

Les SVG ? Un fiasco inter-navigateurs

Firefox gère bien les SVG. Chrome et Safari ? Résultats flous, sans antialiasing. Pire : en blob, Chrome sort du invalide. Oubliez les vectos nets à l'échelle.

Bugs color space sur WebGPU

Safari bugue avec ImageBitmap dans copyExternalImageToTexture. Des correctifs existent sur iOS récents, mais trop d'utilisateurs touchés en prod.

"Asynchrone" ? Pas partout

L'API simule l'asynchrone. Chrome décode en parallèle, OK. Firefox ? Tout sur le thread principal (bug connu). Safari traîne des pieds. Adieu le gain théorique.

Le verdict par navigateur

• Chrome : Décodage ImageBitmap rapide, mais SVG décevant
• Safari : SVG faible, WebGPU color space instable
• Firefox : Rendu correct, mais décodage synchrone

La leçon pour votre stack

Ça résume le web dev : specs alléchantes, implémentations bancales. Pour du critique, testez partout. Profilez. Ajoutez des workarounds.

Chez NameOcean, on sait que des apps web solides exigent plus que des docs théoriques. Hébergez sites classiques ou apps WebGPU chez nous : une infra adaptée à la vraie vie, pas aux promesses.

Comment avancer

Pour le chargement images GPU, suivez ça :

1. Profilez d'abord. Testez chaque voie sur vos browsers cibles.
2. Listez contraintes. SVG ou raster ? Color space ? Alpha ?
3. Prévoir des plans B. Une API qui foire ? Passez à la suivante.
4. Surveillez en prod. Ce qui vole en dev peut ramper chez l'utilisateur.

Le web gagne en puissance. Mais avec la complexité. Maîtriser les pièges de createImageBitmap, c'est passer de "ça marche chez moi" à "ça cartonne partout".