Amélioration de la perception des performances: redimensionnement à la demande

Cet article fait partie d'une série sur la création d'un exemple d'application - un blog de galerie multi-images - pour l'analyse comparative de performance et les optimisations. (Consultez le repo ici.)

---

Nous avons construit un exemple d'application - un blog de galerie multi-images - pour l'analyse comparative des performances et les optimisations. À ce stade, notre application sert la même image, quelle que soit la résolution et la taille de l'écran dans laquelle il est servi. Dans ce tutoriel de redimensionnement de l'image, nous le modifierons pour servir une version redimensionnée en fonction de la taille de l'affichage.

Les plats clés

• Utilisez SRCSET pour permettre des images réactives qui ajustent en taille en fonction de l'écran du spectateur, améliorant les temps de chargement et les performances sans sacrifier la qualité.
• Implémentez la redimensionnement d'images à la demande avec GLIDE pour gérer efficacement le stockage du serveur en générant des images aux tailles demandées uniquement au besoin.
• Améliorez l'expérience utilisateur en utilisant JavaScript pour appliquer dynamiquement les attributs SRCSET dans les modaux d'image, garantissant que les tailles d'image optimales sont utilisées dans différents contextes de visualisation.
• Optimiser les miniatures pour un chargement rapide sur la page d'accueil en définissant une taille fixe plus petite, tout en permettant des images plus grandes et détaillées lors de l'interaction utilisateur.
• Considérez l'intégration de la redimensionnement de l'image dans l'architecture de l'application pour réduire l'utilisation de la bande passante et améliorer la réactivité globale du site Web.

Objectif

Il y a deux étapes à cette amélioration.

1. Nous devons rendre toutes les images réactives partout où cela pourrait être utile. Un endroit est les miniatures sur la page d'accueil et dans les pages de la galerie, et une autre est l'image pleine grandeur lorsqu'une image individuelle est cliquée dans la galerie.
2. Nous devons ajouter le redimensionnement-logic à notre application. Le point est de générer une image redimensionnée à la volée comme il est exigé. Cela empêchera les images non populaires de polluer notre disque dur, et il s'assurera que les populaires sont, à des demandes ultérieures, servies dans des tailles optimales.

Images réactives?

Comme l'explique cet article, les images du Web moderne sont incroyablement complexes. Au lieu de simplement depuis les temps anciens, nous avons maintenant quelque chose de fou comme ceci:

<span><span><span><picture</span>></span>
</span><span><span><span><source</span> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source</span> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img</span> src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></picture</span>></span>
</span>

Une combinaison de srcset, d'image et de tailles est nécessaire dans un scénario où vous doutez que si vous utilisez la même image pour une taille d'écran plus petite, le sujet principal de l'image peut devenir de taille trop petite. Vous souhaitez afficher une image différente (plus axée sur le sujet principal) dans une taille d'écran différente, mais vous souhaitez toujours afficher des actifs séparés de la même image basés sur sur la fenêtre.

Étant donné que nos images sont des photos et que nous voulons toujours qu'elles soient dans leur position par défaut spécifiée de DOM pour remplir le maximum de leur conteneur parent, nous n'avons pas besoin d'image (ce qui nous permet de définir une source alternative pour une résolution différente ou Prise en charge du navigateur - comme essayer de rendre SVG, alors PNG si SVG n'est pas pris en charge) ou des tailles (ce qui nous permet de définir la partie de la fenêtre qu'une image doit occuper). Nous pouvons nous en sortir avec simplement en utilisant SRCSET, qui charge une version de taille différente de la même image en fonction de la taille de l'écran.

ajoutant srcset

Le premier emplacement où nous rencontrons des images se trouve dans les galeries à domicile-wazy-wad.html.twig, le modèle partiel qui rend la liste des galeries de l'écran d'accueil.

<span><span><span><picture</span>></span>
</span><span><span><span><source</span> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source</span> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img</span> src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></picture</span>></span>
</span>

Nous pouvons voir ici que le lien de l'image est récupéré à partir d'un filtre à brindilles, qui peut être trouvé dans le fichier SRC / Twig / ImageRenderederextension.php. Il prend l'ID de l'image et le nom de l'itinéraire (défini dans l'annotation dans l'itinéraire de service de service d'imotation) et génère une URL basée sur cette formule: / image / {id} / brut -> Remplacement {id} par l'ID donné:

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl }}"</span> alt<span>="{{ gallery.name }}"</span>
</span></span><span>    <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

Changeons cela en ce qui suit:

<span>public function getImageUrl(Image $image)
</span><span>{
</span>  <span>return $this->router->generate('image.serve', [
</span>      <span>'id' => $image->getId(),
</span>  <span>], RouterInterface<span>::</span>ABSOLUTE_URL);
</span><span>}
</span>

Maintenant, toutes nos URL d'image auront --x comme un suffixe, où x est leur taille. Il s'agit également du changement que nous appliquerons à notre balise IMG, sous la forme de SRCSET. Changeons-le en:

<span>public function getImageUrl(Image $image, $size = null)
</span><span>{
</span>  <span>return $this->router->generate('image.serve', [
</span>      <span>'id' => $image->getId() . (($size) ? '--' . $size : ''),
</span>  <span>], RouterInterface<span>::</span>ABSOLUTE_URL);
</span><span>}
</span>

Si nous actualisons la page d'accueil maintenant, nous remarquerons les nouvelles tailles du SRCSET répertoriées:

Cela ne nous aidera pas beaucoup, cependant. Si notre fenêtre est large, cela demandera des images pleine grandeur, bien qu'elles soient des miniatures. Ainsi, au lieu de SRCSET, il est préférable d'utiliser une petite taille de miniature fixe ici:

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl }}"</span>
</span></span><span>       <span>alt<span>="{{ gallery.name }}"</span>
</span></span><span>       <span>srcset<span>="
</span></span></span><span><span>           {{ gallery.images.first|getImageUrl('1120') }}  1120w,
</span></span><span><span>           {{ gallery.images.first|getImageUrl('720') }} 720w,
</span></span><span><span>           {{ gallery.images.first|getImageUrl('400') }}  400w<span>"</span>
</span></span><span>       <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

Nous avons maintenant des miniatures à la demande, mais qui sont mises en cache et récupérées lorsqu'elles sont déjà générées.

chassons maintenant d'autres emplacements srcset.

Dans les modèles / galerie / single-gallery.html.twig, nous appliquons le même correctif qu'avant. Nous avons affaire à des miniatures, alors rétrécissons simplement le fichier en ajoutant le paramètre de taille dans notre filtre GetImageUrl:

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl('250') }}"</span>
</span></span><span>       <span>alt<span>="{{ gallery.name }}"</span>
</span></span><span>       <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

Et maintenant pour l'implémentation SRCSET, enfin!

Les vues d'image individuelles sont rendues avec une fenêtre modale JavaScript au bas de la même vue d'une seule galerie:

<span><span><span><picture</span>></span>
</span><span><span><span><source</span> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source</span> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img</span> src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></picture</span>></span>
</span>

Il y a un appel d'ajout qui ajoute l'élément IMG dans le corps du modal, c'est donc là que notre attribut SRCSET doit aller. Mais comme nos URL d'image sont générées dynamiquement, nous ne pouvons pas vraiment appeler le filtre à brindilles à l'intérieur du script. Une alternative consiste à ajouter le srcset dans les vignettes, puis à l'utiliser dans le js en la copie à partir des éléments du pouce, mais cela ferait non seulement le chargement des images de taille complète en arrière-plan des vignettes (car notre fenêtre est large) , mais il appellerait également le filtre 4 fois pour chaque vignette, ralentissant les choses. Au lieu de cela, créons un nouveau filtre à brinations dans SRC / Twig / ImageRederErextension.php qui générera l'attribut SRCSET complet pour chaque image.

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl }}"</span> alt<span>="{{ gallery.name }}"</span>
</span></span><span>    <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

Nous ne devons pas oublier d'enregistrer ce filtre:

<span>public function getImageUrl(Image $image)
</span><span>{
</span>  <span>return $this->router->generate('image.serve', [
</span>      <span>'id' => $image->getId(),
</span>  <span>], RouterInterface<span>::</span>ABSOLUTE_URL);
</span><span>}
</span>

Nous devons ajouter ces valeurs dans un attribut personnalisé, que nous appellerons Data-Srcset sur chaque miniature individuelle:

<span>public function getImageUrl(Image $image, $size = null)
</span><span>{
</span>  <span>return $this->router->generate('image.serve', [
</span>      <span>'id' => $image->getId() . (($size) ? '--' . $size : ''),
</span>  <span>], RouterInterface<span>::</span>ABSOLUTE_URL);
</span><span>}
</span>

Maintenant, chaque vignette individuelle a un attribut Data-Srcset avec les valeurs SRCSET requises, mais cela ne déclenche pas car il est dans un attribut personnalisé, des données à utiliser plus tard.

La dernière étape consiste à mettre à jour le JS pour en profiter:

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl }}"</span>
</span></span><span>       <span>alt<span>="{{ gallery.name }}"</span>
</span></span><span>       <span>srcset<span>="
</span></span></span><span><span>           {{ gallery.images.first|getImageUrl('1120') }}  1120w,
</span></span><span><span>           {{ gallery.images.first|getImageUrl('720') }} 720w,
</span></span><span><span>           {{ gallery.images.first|getImageUrl('400') }}  400w<span>"</span>
</span></span><span>       <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

ajoutant glide

Glide est une bibliothèque qui fait ce que nous voulons - redimensionnement d'image à la demande. Installons-le.

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl('250') }}"</span>
</span></span><span>       <span>alt<span>="{{ gallery.name }}"</span>
</span></span><span>       <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

Ensuite, inscrivons-le dans l'application. Nous le faisons en ajoutant un nouveau service dans SRC / Services avec le contenu suivant:

<span><span><span><img</span> src<span>="{{ image|getImageUrl(250) }}"</span> alt<span>="{{ image.originalFilename }}"</span>
</span></span><span>    <span>class<span>="single-gallery__item-image card-img-top"</span>></span>
</span>

Le service consomme le service FileManager déjà déclaré qui est automatiquement injecté en raison de la nouvelle approche de conduite automatique de Symfony. Nous déclarons à la fois le chemin d'entrée et de sortie comme le téléchargement de téléchargement, donnons à la sortie un suffixe de cache et ajoutant une méthode pour renvoyer le serveur. Le serveur est essentiellement l'instance de Glide qui réidimente et sert une image redimensionnée.

Nous devons rendre la méthode GetuploadsDirectory dans FileManager Public, car il est actuellement privé:

{% block javascripts %}
    {{ parent() }}

    <span><span><span><script</span>></span><span>
</span></span><span><span>        <span>$(function () {
</span></span></span><span><span>            <span>$('.single-gallery__item-image').on('click', function () {
</span></span></span><span><span>                <span>var src = $(this).attr('src');
</span></span></span><span><span>                <span>var $modal = $('.single-gallery__modal');
</span></span></span><span><span>                <span>var $modalBody = $modal.find('.modal-body');
</span></span></span><span><span>
</span></span><span><span>                $modalBody<span>.html('');
</span></span></span><span><span>                $modalBody<span>.append($('<img src="' + src + '" >'));
</span></span></span><span><span>                $modal<span>.modal({});
</span></span></span><span><span>            <span>});
</span></span></span><span><span>        <span>})
</span></span></span><span><span>    </span><span><span></script</span>></span>
</span>{% endblock %}

Enfin, modifions la méthode de la servante de l'imageController afin qu'il ressemble à ceci:

<span>public function getImageSrcset(Image $image)
</span><span>{
</span>    <span>$id = $image->getId();
</span>    <span>$sizes = [1120, 720, 400];
</span>    <span>$string = '';
</span>    <span>foreach ($sizes as $size) {
</span>        <span>$string .= $this->router->generate('image.serve', [
</span>            <span>'id' => $image->getId() . '--' . $size,
</span>        <span>], RouterInterface<span>::</span>ABSOLUTE_URL).' '.$size.'w, ';
</span>    <span>}
</span>    <span>$string = trim($string, ', ');
</span>    <span>return html_entity_decode($string);
</span><span>}
</span>

Cette méthode explose désormais l'ID d'image par Double-Dash, séparant la taille de l'ID d'image. Une fois que la doctrine a récupéré le fichier de la base de données de l'image à partir de la base de données, la taille est réadaptée au nom de fichier si l'on a été transmis, sinon l'image d'origine est utilisée. Si cette image n'existe pas, une est générée à partir du chemin d'origine et enregistrée pour une utilisation ultérieure.

À des fins de démonstration, nous prenons un chemin plus long ici et générant des fichiers manuellement en leur ajoutant la taille et en les enregistrant dans le dossier des téléchargements. Il convient de noter que vous pouvez également utiliser la méthode OutputImage de Glide pour sortir directement l'image, et il sera servi directement à partir du sous-dossier de cache, sans l'enregistrer avec un suffixe dans le dossier de téléchargement principal. Vous pouvez également utiliser la méthode MADEIMAGE pour créer simplement l'image et laisser l'ancienne logique de récupération de l'image prendre le dessus. C'est l'approche que nous avons choisie ci-dessous:

<span><span><span><picture</span>></span>
</span><span><span><span><source</span> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source</span> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img</span> src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></picture</span>></span>
</span>

Notre entreprise de résistance à l'image à la demande est opérationnelle. Maintenant, tout ce que nous avons à faire est de tester les choses.

test

Dès que nous actualiserons la page d'accueil, qui sera un peu plus lente maintenant, les images commenceront à être générées dans le dossier VAR / Téléchargements. Vérifions-le, sans faire défiler vers la deuxième page.

Bien sûr, nous avons maintenant une minuscule version miniature de chaque image de la page d'accueil, et c'est l'image qui est servie. Remarquez les petites tailles de fichiers. Accédons maintenant à une galerie et cliquez sur une image pour en obtenir une grande version.

oui, notre image a été générée à partir de l'original.

Mais qu'en est-il du mobile? Dans les navigateurs modernes, il est assez facile d'activer le mode mobile. Essayons d'ouvrir une image de galerie en vue mobile et vérifiez le dossier d'image par la suite.

Et si nous modifions l'orientation et vérifions alors le dossier?

Succès, la taille mobile de notre image a été générée avec succès, et l'image en plein écran d'avant a été réutilisée parce que c'est la taille de notre écran "mobile" en mode paysage. Srcset à la demande a été mis en œuvre avec succès!

L'application avec ces mises à niveau en place a été taguée comme cette version.

Conclusion

Dans cet article, nous avons passé le processus d'optimisation des images pour la livraison dans un site photo-axé sur photo. Nous avons gardé les miniatures à une taille fixe pour de meilleurs résultats, et avec des images en plein écran, nous nous sommes concentrés sur la mise en œuvre de SRCSET - un simple ajout à tout site Web moderne - en tandem avec glide, un package de redimensionnement d'image à la demande qui peut faire le lourdement pour nous.

Mais bien que nous redimensions des images, ne serait-il pas intelligent de les optimiser également pour la qualité et la taille en supprimant les métadonnées? Et est-ce vraiment la meilleure option pour les redimensionner à la demande pendant que l'utilisateur attend ou y a-t-il une autre approche plus pratique? Découvrez dans la partie suivante.

Des questions fréquemment posées sur le redimensionnement des images à la demande

Comment le redimensionnement des images à la demande améliore-t-il les performances du site Web?

Le redimensionnement des images à la demande peut améliorer considérablement les performances du site Web en réduisant le temps de chargement des images. Au lieu de charger l'image pleine grandeur, le site Web charge une version redimensionnée qui correspond à l'écran de la visionneuse, qui est généralement plus petite et donc plus rapide à charger. Cela améliore non seulement l'expérience utilisateur en réduisant les temps d'attente, mais économise également la bande passante, ce qui peut être particulièrement bénéfique pour les utilisateurs avec des plans de données limités.

Quelles sont les principales différences entre le redimensionnement d'image à la demande et le redimensionnement traditionnel d'image?

Le redimensionnement d'image traditionnel implique la redimensionnement manuelle de chaque image avant de le télécharger sur le site Web. Cela peut prendre du temps et inefficace, en particulier pour les sites Web avec un grand nombre d'images. D'un autre côté, la redimensionnement des images à la demande redimensionne automatiquement les images telles qu'elles sont demandées par l'utilisateur. Cela signifie que la même image peut être servie à différentes tailles à différents utilisateurs, en fonction de leurs besoins spécifiques et de leurs capacités de périphérique.

Comment puis-je implémenter le redimensionnement de l'image à la demande dans Symfony?

Symfony Fournit un bundle appelé liipimaginebundle qui vous permet d'implémenter le redimensionnement d'image à la demande. Vous pouvez installer ce bundle à l'aide de composer, puis le configurer en fonction de vos besoins. Le bundle fournit une gamme de filtres que vous pouvez utiliser pour redimensionner les images, y compris les filtres à échelle, à recadrage et aux miniatures. Vous pouvez appliquer ces filtres à vos images en utilisant la fonction 'applique_filter' dans vos modèles.

Puis-je redimensionner une image sur Téléchargement dans Symfony?

Oui, vous pouvez redimensionner une image en téléchargement en téléchargement en téléchargement dans Symfony. Cela peut être fait à l'aide du VichuploaderBundle, qui vous permet de redimensionner automatiquement les images au fur et à mesure qu'ils sont téléchargés. Vous pouvez configurer le bundle pour redimensionner les images à une taille spécifique ou à un pourcentage de leur taille d'origine. Cela peut être particulièrement utile si vous souhaitez vous assurer que toutes les images téléchargées sur votre site Web sont de taille cohérente.

Comment puis-je servir des images S3 redimension À la volée, peut être réalisée en utilisant un service comme AWS Lambda. Vous pouvez configurer une fonction lambda pour redimensionner automatiquement les images car elles sont demandées à votre seau S3. Cette fonction peut être déclenchée par une passerelle API, qui passera la taille de l'image demandée à la fonction. La fonction récupérera ensuite l'image d'origine de S3, la redimensionnera à la taille demandée et renverra l'image redimensionnée à l'utilisateur.

Quels sont les avantages de l'utilisation d'un CDN pour le redimensionnement d'images à la demande?

L'utilisation d'un réseau de livraison de contenu (CDN) pour le redimensionnement à la demande peut améliorer considérablement la vitesse à laquelle les images sont livrées aux utilisateurs . Les CDN ont des serveurs situés dans le monde entier, ce qui signifie que les images peuvent être servies à partir du serveur le plus proche de l'utilisateur, réduisant la latence. De plus, les CDN peuvent mettre en cache des images redimensionnées, ce qui signifie que si la même image est à nouveau demandée à la même taille, elle peut être servie directement à partir du cache, améliorant davantage les performances.

Comment le redimensionnement de l'image à la demande affecte-t-il le référencement ?

Le redimensionnement de l'image à la demande peut avoir un impact positif sur le référencement. Des temps de chargement plus rapides peuvent améliorer l'expérience utilisateur, ce qui est un facteur que les moteurs de recherche prennent en compte lors du classement des sites Web. De plus, en servant des images qui sont de manière appropriée pour l'appareil de l'utilisateur, vous pouvez éviter les problèmes avec l'utilisabilité mobile, ce qui peut également affecter le classement des moteurs de recherche de votre site Web.

peut être utilisé à la demande d'image avec une conception Web réactive. ?

Oui, le redimensionnement d'image à la demande est un complément parfait à la conception Web réactive. Avec une conception réactive, la disposition de votre site Web s'adapte à la taille de l'écran de l'utilisateur. Avec le redimensionnement de l'image à la demande, les images de votre site Web peuvent également s'adapter à la taille de l'écran de l'utilisateur, en vous assurant que votre site Web a fière allure et fonctionne bien sur tous les appareils.

redimensionnement?

Bien que le redimensionnement d'image à la demande présente de nombreux avantages, il existe également des inconvénients potentiels à considérer. L'un d'eux est la puissance de traitement requise pour redimensionner les images à la volée, ce qui peut mettre une pression sur votre serveur si vous avez un site Web à fort trafic. De plus, si vous utilisez un service tiers pour le redimensionnement d'images à la demande, il peut y avoir des coûts associés à ce service.

Comment puis-je optimiser ma configuration de redimensionnement d'image à la demande?

Il existe plusieurs façons d'optimiser votre configuration de redimensionnement d'image à la demande. L'une consiste à utiliser un CDN, qui peut mettre en cache des images redimensionnées et les servir à partir d'un serveur proche de l'utilisateur. Un autre consiste à utiliser un service comme AWS Lambda, qui peut redimensionner les images dans le cloud, réduisant la charge sur votre serveur. De plus, vous pouvez optimiser vos images avant de les télécharger, par exemple en réduisant leur qualité ou en utilisant un format de fichier plus efficace.

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!