在 Laravel 和 JavaScript 中更快地加载图像

在 Web 开发领域，网站上图像加载的速度可能会影响或破坏用户体验。图片加载缓慢可能会导致更高的跳出率、更低的参与度，并最终对 SEO 产生负面影响。如果您使用 Laravel 和 JavaScript，您可以实施多种策略来优化图像加载并确保您的 Web 应用程序发挥最佳性能。在这篇博文中，我们将探索使用 Laravel 和 JavaScript 更快地加载图像的各种技术。

1.上传前优化图片文件

在深入研究代码级优化之前，有必要从图像本身开始。大图像文件是页面加载缓慢的最常见原因之一。以下是在上传图像之前优化图像的一些技巧：

• 压缩图像：使用 TinyPNG、JPEG-Optimizer 或 ImageOptim 等工具来压缩图像而不损失质量。
• 选择正确的格式：对于照片使用 JPEG，对于透明图像使用 PNG。 SVG 非常适合图标和简单图形。
• 调整图像大小：确保图像不大于所需的大小。仅需要 500 像素时提供 2000 像素宽的图像会浪费带宽。

2. 使用 Laravel 的图像缓存和操作

Laravel 附带了强大的工具，可以帮助您有效地管理和优化图像。干预图像包对于此目的特别有用。

• 图片缓存：可以在服务器端缓存图片，以减少后续请求的加载时间。这对于动态生成或调整大小的图像特别有用。

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');

3. 在 JavaScript 中利用延迟加载

延迟加载将图像的加载推迟到即将进入视口时，这可以大大减少页面的初始加载时间。

• 本机延迟加载：HTML5 现在通过 loading 属性原生支持延迟加载。

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

• JavaScript 库：如果您需要更多控制，请考虑使用像lazysizes 这样的JavaScript 库。

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. 使用内容交付网络 (CDN)

CDN 将您的图像分发到全球多个服务器上，因此用户可以从距离其位置最近的服务器下载它们。这可以减少延迟并加快图像加载速度。

• Laravel 中的 CDN 集成：Laravel 可以轻松地与 CDN 集成。您可以将图像存储在 AWS S3 或 DigitalOcean Spaces 等云存储中，并通过 CDN 提供服务。

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

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

5. 实现 WebP 图像

WebP 是一种现代图像格式，可为网络上的图像提供卓越的无损和有损压缩。通过以 WebP 格式提供图像，您可以在不牺牲质量的情况下显着减小文件大小。

• 自动WebP转换：spatie/laravel-image-optimizer等工具可以在上传过程中自动将图像转换为WebP。

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

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

• 不支持的浏览器的后备：并非所有浏览器都支持 WebP。使用 JavaScript 回退或服务器端逻辑向不支持 WebP 的浏览器提供 JPEG/PNG 版本。

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

6. 在 JavaScript 中推迟屏幕外图像

通过推迟屏幕外图像，您可以确保仅首先加载立即可见的图像，而稍后加载其他图像。

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);
});

优化 Laravel 和 JavaScript 项目中的图像加载对于提供快速响应的用户体验至关重要。通过压缩图像、利用延迟加载、使用 CDN、实施 WebP 格式以及优化 CSS 和 JS 文件，您可以显着缩短网站上图像的加载时间。请记住，我们的目标是平衡图像质量与性能，为您的用户创造无缝体验。

立即开始实施这些策略，看看您网站的性能有何不同！

享受吧！

以上是在 Laravel 和 JavaScript 中更快地加载图像的详细内容。更多信息请关注PHP中文网其他相关文章！