Laravel 및 JavaScript에서 이미지를 더 빠르게 로드

웹 개발의 세계에서는 웹사이트에 이미지가 로드되는 속도가 사용자 경험을 좌우할 수 있습니다. 이미지 로딩 속도가 느리면 이탈률이 높아지고 참여도가 낮아지며 궁극적으로 SEO에 부정적인 영향을 미칠 수 있습니다. Laravel과 JavaScript를 사용하는 경우 이미지 로딩을 최적화하고 웹 애플리케이션이 최상의 성능을 발휘하도록 구현할 수 있는 몇 가지 전략이 있습니다. 이 블로그 게시물에서는 Laravel과 JavaScript를 사용하여 이미지를 더 빠르게 로드하는 다양한 기술을 살펴보겠습니다.

1. 업로드 전 이미지 파일 최적화

코드 수준 최적화를 시작하기 전에 이미지 자체부터 시작하는 것이 중요합니다. 대용량 이미지 파일은 페이지 로드 속도가 느려지는 가장 일반적인 이유 중 하나입니다. 다음은 이미지를 업로드하기 전에 이미지를 최적화하기 위한 몇 가지 팁입니다.

• 이미지 압축: TinyPNG, JPEG-Optimizer 또는 ImageOptim과 같은 도구를 사용하여 품질 저하 없이 이미지를 압축하세요.
• 올바른 형식 선택: 사진에는 JPEG를 사용하고 투명한 이미지에는 PNG를 사용합니다. SVG는 아이콘과 간단한 그래픽에 적합합니다.
• 이미지 크기 조정: 이미지가 필요 이상으로 크지 않은지 확인하세요. 500px만 필요할 때 2000px 너비의 이미지를 제공하면 대역폭이 낭비됩니다.

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

• 즉시 이미지 조작: 개입 이미지를 사용하면 이미지의 크기를 조정하고, 자르고, 필터를 동적으로 적용할 수 있으므로 동일한 이미지의 여러 버전을 저장할 필요성이 줄어듭니다.

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

3. JavaScript에서 지연 로딩 활용

지연 로딩은 이미지가 뷰포트에 들어오기 직전까지 이미지 로딩을 지연시켜 페이지의 초기 로드 시간을 대폭 줄일 수 있습니다.

• 네이티브 지연 로딩: 이제 HTML5는 로딩 속성을 통해 기본적으로 지연 로딩을 지원합니다.

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

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를 지원하는 것은 아닙니다. WebP를 지원하지 않는 브라우저에 JPEG/PNG 버전을 제공하려면 JavaScript 대체 또는 서버측 로직을 사용하세요.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!