在 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中文網其他相關文章！