Maison >interface Web >js tutoriel >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.
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 :
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.
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'); }
$image = Image::make('public/foo.jpg')->resize(300, 200); return $image->response('jpg');
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.
<img src="image.jpg" loading="lazy" alt="Lazy Loaded Image">
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); });
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.
Storage::disk('s3')->put('path/to/image.jpg', $imageContent); $cdnUrl = Storage::disk('s3')->url('path/to/image.jpg');
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é.
use Spatie\Image\Image; use Spatie\Image\Manipulations; Image::load('image.jpg') ->format(Manipulations::FORMAT_WEBP) ->save('image.webp');
<picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="Fallback Image"> </picture>
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!