nuxt-image, StorefrontUI 및 Vue Storefront로 이미지 최적화

이미지를 최적화해야 하는 이유는 무엇입니까?

이미지 최적화는 웹 성능에 매우 중요합니다. 빠른 웹 사이트를 갖기 위해서는 최적화된 이미지가 필요합니다. 작고 압축되었으며 현대적인 형식으로 제공됩니다.

또한 서버/클라우드 전송 크기에 직접적인 영향을 미칩니다. 더 큰 이미지가 있는 경우 더 많은 비용이 발생합니다.

전자 상거래 웹 사이트의 경우 적절한 이미지 최적화를 쉽게 달성하기 어려운 경우가 많습니다.

정적 이미지만 있는 경우 직접 압축하여 서버에 업로드할 수 있지만 동적 이미지(예: CMS 또는 전자 상거래 백엔드)가 있는 경우 통합 기능으로 제한됩니다.

nuxt 이미지란?

“Nuxt-image는 Nuxt 앱을 위한 플러그 앤 플레이 이미지 최적화입니다.
내장된 옵티마이저 또는 좋아하는 이미지 CDN을 사용하여 코드에서 이미지의 크기를 쉽게 조정하고 변환할 수 있습니다.”

nuxt-image를 사용하면 즉시 이미지를 압축, 크기 조정 및 자를 수 있습니다. 즉, CMS 또는 전자 상거래 백엔드가 큰 이미지를 제공하더라도 사용자는 여전히 최적화된 버전을 얻을 수 있습니다.

그리고 이 모든 것이 자동으로 이루어집니다!

이 프로세스는 다음과 같습니다.
사용자가 제품 페이지를 로드하면 product_image_1.jpg(2Mb)가 있고, nuxt-image는 이 이미지를 선택한 공급자에게 보내고 주어진 구성으로 즉시 변환합니다.

공급자는 적절한 이미지(예: product_image_1.webp(60Kb))를 생성하여 사용자에게 다시 제공합니다. 따라서 사용자는 원본 이미지가 아니라 최적화된 이미지를 얻습니다.

2Mb 이미지를 60Kb webp로 변환하는 것은 시간과 리소스가 많이 소요될 수 있지만 처음으로 동일한 이미지를 요청하는 모든 다음 사용자가 캐시에서 가져옵니다.

Nuxt-image는 많은 공급자를 처리하지만 이 자습서에서는 Cloudinary를 사용합니다.

Cloudinary 란 무엇입니까?

“Developers and marketers use Cloudinary to quickly and easily create, manage and deliver their digital experiences across any browser, device, and bandwidth.”

설정이 가장 쉽기 때문에 이 자습서에서는 Programmable Media을 사용합니다.

테스트 목적으로 다음으로 제한되는 free Cloudinary account을 생성합니다.

25K 변환 또는

25GB의 관리 스토리지

25GB의 순 보기 대역폭

VSUI, Vue Storefront 및 nuxt-image와 함께 Cloudinary 사용

프로젝트에서 Cloudinary를 사용하기 전에 한 단계를 더 수행해야 합니다(계정 생성과는 별도로). 웹사이트 주소와 일치하는 "허용된 가져오기 도메인"을 설정해야 합니다.
자격 증명으로 Cloudinary에 로그인하고 설정으로 이동하여 "허용된 가져오기 도메인"을 찾습니다.



도메인 이름을 입력하고 저장을 클릭합니다.

구성하기 가장 쉬운 옵션인 Cloudinary 가져오기 옵션을 이 튜토리얼에서 사용하고 있습니다.

가져오기 방법에 대한 자세한 내용은 찾을 수 있습니다here.

이제 코딩을 시작할 수 있습니다

먼저 nuxt-image를 설치해야 합니다.

yarn add --dev @nuxt/image

그런 다음 nuxt.config.js에서 구성합니다.

modules: [
    '@nuxt/image',
    …
],
image: {
    // Using the default provider, you can also optimize external URLs. 
    // For this, you need to add them to the domains option.
    domains: ['https://exteranl-domain-from-where-we-get-our-images.com'],

    // here we are configuring our provider
    provider: 'cloudinary',

    // here we provide configuration specific to selected provider
    cloudinary: {
        baseURL: 'https://res.cloudinary.com/<your-cloud-name>/image/fetch/'
    }
},

우리는 Cloudinary를 설정했지만 물론 다른 supported provider을 사용하거나 your own integration 만들 수도 있습니다.

nuxt-image documentation , or with our SFUI components. If you want to use nuxt-image with SFUI you need to migrate to (version 0.12.0 )을 사용하여 표준 방식으로 사용할 수 있습니다.

변환이 적용된 생성된 이미지 URL을 직접 사용하는 옵션도 있습니다.
이를 수행하는 방법에 대한 정보는 here you can find information on how to do it에서 찾을 수 있습니다.

nux-이미지 문서 nuxt 이미지가 포함된 SFUI

nuxt-image와 함께 작동하는 기본 구성 요소 중 하나는 다음과 같습니다.

최적화를 사용하려면 선택한 값("nuxt-img"또는 "nuxt-picture")으로 이미지 태그 속성을 추가해야 합니다. 출력 이미지를 지정하려면 아래 예와 같이 nuxtImgConfig 개체를 사용합니다.

<SfImage
  src="static/my-image.jpg"
  image-tag="nuxt-img"
  :nuxtImgConfig="{
    format: 'webp',
    fit: 'fill',
    provider: 'cloudinary'
  }"
  alt="Our test image"
/>

, format to which image will be converted , fit type 및 다음과 같은 nuxt-image 문서에 지정된 기타 옵션을 구성할 수 있습니다.

provider

quality

preset

sizes

..또는 nuxtImgConfig에서도 수정자 속성에 전달될 수 있는 공급자가 허용하는 추가 항목.

너비/높이 그리고 그게 다야 !

이미지는 자동으로 최적화되고 캐시에서 제공됩니다.

nuxt-img와 함께 작동하는 SFUI 구성 요소 목록은 에서 찾을 수 있습니다.

our migration guide에서 nuxt-image 및 Cloudinary 작업에 대한 자세한 정보를 찾을 수 있습니다.