Charger les images plus rapidement dans Laravel et JavaScript

Dans le monde du développement Web, la vitesse à laquelle les images se chargent sur votre site Web peut faire ou défaire l'expérience utilisateur. Les images à chargement lent peuvent entraîner des taux de rebond plus élevés, un engagement moindre et, finalement, un impact négatif sur le référencement. Si vous utilisez Laravel et JavaScript, vous pouvez mettre en œuvre plusieurs stratégies pour optimiser le chargement des images et garantir les meilleures performances de votre application Web. Dans cet article de blog, nous explorerons diverses techniques pour charger des images plus rapidement à l'aide de Laravel et JavaScript.

1. Optimisez les fichiers image avant de les télécharger

Avant de plonger dans les optimisations au niveau du code, il est essentiel de commencer par les images elles-mêmes. Les fichiers image volumineux sont l’une des raisons les plus courantes de chargement lent des pages. Voici quelques conseils pour optimiser les images avant de les télécharger :

• Compresser les images : utilisez des outils comme TinyPNG, JPEG-Optimizer ou ImageOptim pour compresser vos images sans perte de qualité.
• Choisissez le bon format : utilisez JPEG pour les photographies et PNG pour les images avec transparence. SVG est idéal pour les icônes et les graphiques simples.
• Redimensionner les images : assurez-vous que les images ne sont pas plus grandes qu'elles ne devraient l'être. Servir une image de 2 000 px de large alors que seulement 500 px est nécessaire gaspille de la bande passante.

2. Utilisez la mise en cache et la manipulation d'images de Laravel

Laravel est livré avec des outils puissants qui peuvent vous aider à gérer et à optimiser efficacement les images. Le package Intervention Image est particulièrement utile à cet effet.

• Mise en cache des images : vous pouvez mettre en cache des images côté serveur pour réduire le temps de chargement des requêtes ultérieures. Ceci est particulièrement utile pour les images générées ou redimensionnées à la volée.

use Intervention\Image\Facades\Image;
use Illuminate\Support\Facades\Cache;

public function show($id)
{
    $image = Cache::remember("image_$id", 60, function() use ($id) {
        return Image::make(storage_path("app/public/images/$id.jpg"))->resize(800, 600)->encode('jpg');
    });

    return response($image)->header('Content-Type', 'image/jpeg');
}

• Manipulation d'image à la volée : avec Intervention Image, vous pouvez redimensionner, recadrer et appliquer des filtres aux images de manière dynamique, réduisant ainsi le besoin de stocker plusieurs versions de la même image.

$image = Image::make('public/foo.jpg')->resize(300, 200);
return $image->response('jpg');

3. Tirez parti du chargement paresseux en JavaScript

Le chargement paresseux diffère le chargement des images jusqu'à ce qu'elles soient sur le point d'entrer dans la fenêtre d'affichage, ce qui peut réduire considérablement le temps de chargement initial d'une page.

• Chargement paresseux natif : HTML5 prend désormais en charge le chargement paresseux de manière native avec l'attribut de chargement.

<img src="image.jpg" loading="lazy" alt="Lazy Loaded Image">

• Bibliothèques JavaScript : Si vous avez besoin de plus de contrôle, pensez à utiliser une bibliothèque JavaScript comme lazysizes.

document.addEventListener("DOMContentLoaded", function() {
    let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
    let active = false;

    const lazyLoad = function() {
        if (active === false) {
            active = true;

            setTimeout(function() {
                lazyImages.forEach(function(lazyImage) {
                    if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
                        lazyImage.src = lazyImage.dataset.src;
                        lazyImage.classList.remove("lazy");

                        lazyImages = lazyImages.filter(function(image) {
                            return image !== lazyImage;
                        });

                        if (lazyImages.length === 0) {
                            document.removeEventListener("scroll", lazyLoad);
                            window.removeEventListener("resize", lazyLoad);
                            window.removeEventListener("orientationchange", lazyLoad);
                        }
                    }
                });

                active = false;
            }, 200);
        }
    };

    document.addEventListener("scroll", lazyLoad);
    window.addEventListener("resize", lazyLoad);
    window.addEventListener("orientationchange", lazyLoad);
});

4. Utilisez les réseaux de diffusion de contenu (CDN)

Les CDN distribuent vos images sur plusieurs serveurs dans le monde, afin que les utilisateurs puissent les télécharger à partir d'un serveur le plus proche de leur emplacement. Cela réduit la latence et accélère le chargement des images.

• Intégration CDN dans Laravel : Laravel facilite l'intégration aux CDN. Vous pouvez stocker vos images dans un stockage cloud comme AWS S3 ou DigitalOcean Spaces et les diffuser via un CDN.

Storage::disk('s3')->put('path/to/image.jpg', $imageContent);

$cdnUrl = Storage::disk('s3')->url('path/to/image.jpg');

5. Implémenter des images WebP

WebP est un format d'image moderne qui offre une compression supérieure sans perte et avec perte pour les images sur le Web. En diffusant des images au format WebP, vous pouvez réduire considérablement la taille du fichier sans sacrifier la qualité.

• Conversion automatique WebP : des outils tels que spatie/laravel-image-optimizer peuvent convertir automatiquement les images en WebP pendant le processus de téléchargement.

use Spatie\Image\Image;
use Spatie\Image\Manipulations;

Image::load('image.jpg')
    ->format(Manipulations::FORMAT_WEBP)
    ->save('image.webp');

• Remplacement pour les navigateurs non pris en charge : tous les navigateurs ne prennent pas en charge WebP. Utilisez une solution de secours JavaScript ou une logique côté serveur pour proposer des versions JPEG/PNG aux navigateurs qui ne prennent pas en charge WebP.

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback Image">
</picture>

6. Différer les images hors écran en JavaScript

En différé les images hors écran, vous vous assurez que seules les images immédiatement visibles sont chargées en premier, tandis que les autres sont chargées plus tard.

document.addEventListener('DOMContentLoaded', function() {
    let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

    function isInViewport(el) {
        const rect = el.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }

    function deferImageLoading() {
        lazyImages.forEach(image => {
            if (isInViewport(image)) {
                image.src = image.dataset.src;
                image.classList.remove('lazy');
            }
        });
    }

    window.addEventListener('scroll', deferImageLoading);
    window.addEventListener('resize', deferImageLoading);
    window.addEventListener('load', deferImageLoading);
});

L'optimisation du chargement des images dans vos projets Laravel et JavaScript est cruciale pour offrir une expérience utilisateur rapide et réactive. En compressant les images, en tirant parti du chargement différé, en utilisant des CDN, en implémentant les formats WebP et en optimisant vos fichiers CSS et JS, vous pouvez améliorer considérablement les temps de chargement des images sur votre site Web. N'oubliez pas que l'objectif est d'équilibrer la qualité de l'image et les performances afin de créer une expérience fluide pour vos utilisateurs.

Commencez à mettre en œuvre ces stratégies dès aujourd'hui et constatez la différence dans les performances de votre site Web !

Profitez !

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!