Comment a sauvé la mise - Gestion des grandes images dans le navigateur

A sauvé la journée - Gestion des grandes images dans le navigateur" />

Un client a téléchargé 28 images, chacune environ 5 800 x 9500 pixels et 28 Mo en taille. Lors de la tentative d'affichage de ces images dans le navigateur, l'onglet entier s'est figé - refusant même de se fermer - pendant 10 minutes. Et c'était sur une machine haut de gamme avec un processeur Ryzen 9 et un GPU RTX 4080, pas sur un petit ordinateur portable.

Voici la situation

Dans notre CMS (Grace Web), lorsqu'un administrateur télécharge un fichier - qu'il s'agisse d'une image ou d'une vidéo - nous l'affichons immédiatement après la fin du téléchargement. C'est génial pour l'UX : cela confirme que le téléchargement a réussi, qu'ils ont téléchargé ce qu'ils avaient l'intention de faire et cela montre la réactivité de l'interface utilisateur pour une meilleure sensation.

Mais avec ces images massives, le navigateur pouvait à peine les afficher et se figeait.

Il est important de noter que le problème ne venait pas du téléchargement lui-même mais de l'affichage de ces grandes images. Rendre 28 images énormes simultanément et une par une était tout simplement trop. Même sur une page blanche, c'est juste... non.

Pourquoi est-ce arrivé (analyse approfondie) ?

Chaque fois que vous affichez une image dans un format tag, le navigateur passe par un processus complet qui utilise le CPU, la RAM, le GPU et parfois le lecteur - parfois même en parcourant ce processus plusieurs fois avant que l'image ne s'affiche pendant le chargement de l'image et les recalculs de mise en page. Cela passe par le calcul des pixels, le transfert de données entre le matériel, l'interpolation d'algorithmes, etc. Pour un navigateur, c'est un processus important.

Les solutions réfléchies

Nous avons envisagé plusieurs options :

1. Redimensionner immédiatement après le téléchargement et afficher la vignette
   • Problème : Le redimensionnement peut prendre trop de temps et n'est pas garanti pour être instantané, surtout si la file d'attente de redimensionnement n'est pas vide - cela entraîne un système qui ne répond pas.
2. Vérifiez la taille des fichiers et affichez uniquement leurs noms pour les fichiers volumineux
   • Problème : Cela nuirait à l'expérience utilisateur, en particulier pour ceux qui nécessitent un plus grand contrôle et des vérifications de tout matériel multimédia (d'ailleurs, ce sont souvent les mêmes avec des fichiers volumineux).

Aucune de ces solutions ne semblait utilisable. Nous ne voulions pas limiter la capacité de nos administrateurs à télécharger tout ce dont ils avaient besoin, ni faire de compromis sur l'expérience utilisateur.

Ampoule ! L'utilisation de

J'ai rappelé que le L'élément utilise le GPU beaucoup plus efficacement pour restituer le contenu. J'ai récemment vu quelqu'un créer un jeu complexe et silencieux en utilisant JavaScript et , il devrait donc théoriquement gérer les grandes images plus efficacement que .

Tester la théorie

Nous avons décidé de remplacer le éléments avec pour afficher les images téléchargées. Voici l'extrait de code que nous avons utilisé :

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const img = new Image();
// img.src = URL.createObjectURL(file); // Use this if you're working with uploaded files
img.src = filesroot + data.file_path; // Our existing file path
img.onload = function() {
  // Resize canvas to desired size (for preview)
  canvas.width = 80 * (img.width / img.height); // Adjust scaling as needed
  canvas.height = 80;
  // Draw the image onto the canvas, resizing it in the process
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  file_div.innerHTML = ''; // Prepared <div> in UI to display the thumbnail
  file_div.appendChild(canvas);
};

Les résultats

L'amélioration a été immédiate et spectaculaire ! Non seulement le navigateur a géré les 28 grandes images sans aucun problème, mais nous l'avons également poussé plus loin en chargeant des images de 120 Mo mesurant 28 000 x 17 000 pixels, et cela fonctionnait toujours comme si c'était le cas. était une petite icône.

Où est la différence ?

En utilisant l'option élément, le dessin est entièrement entre les mains du GPU, et ces puces sont littéralement faites pour cette tâche.

• tente toujours de restituer 28 000 * 17 000 = 476 000 000 pixels.
• Cette dessine seulement 80 * 80 = 6 400 pixels.

En redimensionnant l'image dans la zone Grâce à une petite taille d'aperçu, nous réduisons considérablement la quantité de données que le navigateur doit traiter : envoyez des centaines de millions de pixels au GPU et récupérez des milliers, c'est beaucoup, n'est-ce pas ?

Prochaines étapes

Compte tenu de ce succès, nous envisageons désormais de remplacer avec dans d'autres parties de notre application, notamment dans les écrans d'administration qui affichent environ 250 images à la fois. Bien que ces images soient déjà correctement redimensionnées, nous sommes curieux de voir si l'utilisation de peut offrir des performances encore meilleures.

Nous effectuerons des tests et des analyses comparatives pour mesurer tout gain de performances. Je ne manquerai pas de partager nos découvertes dans un prochain article.

Mises en garde importantes

Lorsque vous utilisez a fait des merveilles pour notre cas d'utilisation spécifique, je dois noter que vous ne devriez pas utiliser pour afficher des images sur les parties publiques des sites Web. Voici pourquoi :

• Accessibilité : les éléments sont lisibles par les lecteurs d'écran, aidant ainsi les utilisateurs malvoyants.
• SEO : les moteurs de recherche indexent les images de balises, qui peuvent améliorer la visibilité de votre site. (De la même manière, les scrapers d'entraînement à l'IA "indexent" également les images. Eh bien, que pouvez-vous faire...)
• avec peut être utilisé pour détecter automatiquement la densité des pixels et afficher des images plus grandes ou plus petites pour un ajustement parfait— ne peut pas. J'ai écrit un article sur la façon de construire votre .

Pour les sites Web publics, il est préférable de redimensionner correctement les images côté serveur avant de les proposer aux utilisateurs. Si vous souhaitez savoir comment automatiser le redimensionnement et l'optimisation des images, j'ai écrit un article sur ce sujet qui pourrait vous être utile.

Conclusion

J'adore l'optimisation ! Même si nous nous dirigeons chaque jour vers du matériel local performant, en optimisant - même lorsque "c'est bien, mais peut être mieux" - nous pourrions éviter des problèmes comme celui-ci du début.

Cette approche n’est pas standard. Et je ne me soucie pas beaucoup des normes. Elles sont souvent considérées comme des règles strictes, mais ce ne sont que des lignes directrices. Cette solution convient. Nous n'avons pas de clients avec des appareils anciens sans soutien. Donc, même si nous avons maintenant plus de code à gérer et plusieurs façons d’afficher les images, c’est une solution parfaite, et c’est ce qui compte !

Avez-vous des expériences similaires ? Comment avez-vous géré cela ? N'hésitez pas à partager vos expériences ou à poser des questions dans les commentaires ci-dessous !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!