Laravel と JavaScript で画像を高速にロードする

Web 開発の世界では、Web サイトに画像が読み込まれる速度がユーザー エクスペリエンスを左右する可能性があります。画像の読み込みが遅いと、直帰率が高くなり、エンゲージメントが低下し、最終的には SEO に悪影響を及ぼす可能性があります。 Laravel と JavaScript を使用している場合、画像の読み込みを最適化し、Web アプリケーションが最高のパフォーマンスを発揮するように実装できる戦略がいくつかあります。このブログ投稿では、Laravel と JavaScript を使用して画像をより速く読み込むためのさまざまなテクニックを検討します。

1. アップロードする前に画像ファイルを最適化する

コードレベルの最適化に入る前に、イメージ自体から始めることが重要です。ページの読み込みが遅くなる最も一般的な原因の 1 つは、大きな画像ファイルです。画像をアップロードする前に最適化するためのヒントをいくつか紹介します:

• 画像の圧縮: TinyPNG、JPEG-Optimizer、ImageOptim などのツールを使用して、品質を損なうことなく画像を圧縮します。
• 適切な形式を選択します: 写真には JPEG を使用し、透明度のある画像には PNG を使用します。 SVG はアイコンやシンプルなグラフィックに最適です。
• 画像のサイズ変更: 画像が必要以上に大きくならないようにします。 500 ピクセルしか必要ないときに 2000 ピクセル幅の画像を提供すると、帯域幅が無駄になります。

2. Laravelの画像キャッシュと操作を使用する

Laravel には、画像を効率的に管理および最適化するのに役立つ強力なツールが付属しています。 Intervention Image パッケージは、この目的に特に役立ちます。

• 画像のキャッシュ: サーバー側で画像をキャッシュして、後続のリクエストの読み込み時間を短縮できます。これは、実行中に生成またはサイズ変更される画像に特に役立ちます。

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

• オンザフライ画像操作: Intervention Image を使用すると、画像のサイズ変更、トリミング、フィルターの適用を動的に行うことができるため、同じ画像の複数のバージョンを保存する必要性が減ります。

$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 と簡単に統合できます。画像を A​​WS 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 は、Web 上の画像に優れた可逆圧縮および非可逆圧縮を提供する最新の画像形式です。画像を 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 ファイルの最適化により、Web サイト上の画像の読み込み時間を大幅に短縮できます。目標は、画質とパフォーマンスのバランスをとり、ユーザーにシームレスなエクスペリエンスを提供することであることを忘れないでください。

今すぐこれらの戦略の実装を開始し、Web サイトのパフォーマンスの違いを確認してください!

お楽しみください!

以上がLaravel と JavaScript で画像を高速にロードするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。