Nuxt Image 및 Cloudinary를 사용한 성능 이미지

사람들이 웹사이트 성능을 향상하려고 할 때 가장 먼저 추천하는 것이 무엇인지 묻는다면 저는 항상 이미지를 살펴보는 것입니다. 현대적이고 최적화된 형식으로 제공됩니까? 크기가 적당합니까? 브라우저가 실제로 필요한 시간을 가져오기 시작할 수 있도록 적절하게 지연 로드되어 있습니까?

그래서 저는 항상 처음부터 프로젝트에 성능이 뛰어난 이미지를 사용하는 경향이 있습니다. 제가 가장 좋아하는 최신 웹 프레임워크는 Nuxt이므로 저는 즉시 사용자에게 더 뛰어난 성능의 이미지를 제공하는 데 도움이 되는 모듈인 Nuxt Image에 대해 생각하게 되었습니다. 그러나 더 나은 경험을 제공하기 위해 Nuxt Image 모듈을 여러 타사 이미지 제공업체 중 하나와 작동하도록 구성할 수 있습니다. 여기서는 항상 Cloudinary를 선택하겠습니다.

이 글에서는 Nuxt Image와 Cloudinary를 사용하여 사용자에게 최적화되고 성능이 뛰어난 이미지를 제공하는 방법을 보여드리겠습니다.

좋아하셨으면 좋겠습니다 :)

즐기세요!

? Nuxt Image 및 Cloudinary를 사용한 성능 이미지

이러한 성능의 이미지를 얻기 위해 가장 먼저 해야 할 일은 프로젝트에 Nuxt Image 모듈을 설치하는 것입니다. 다음과 같이 nuxi를 사용하면 그렇게 할 수 있습니다:

npx nuxi@latest module add image

이렇게 하면 기본(로컬) 구성으로 프로젝트에 모듈이 추가됩니다. Cloudinary를 사용하려면 이를 다음과 같이 변경해야 합니다.

export default defineNuxtConfig({
  image: {
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/<your-cloud-name>/image/upload/'
    }
  }
})
</your-cloud-name>

Nuxt Image용 Cloudinary 공급자는 최고의 성능을 위해 자동 형식 선택과 자동 품질 선택을 자동으로 활성화합니다. 이는 사용 사례가 가장 일반적인 사례와 다르지 않는 한 이러한 측면을 처리할 필요가 없다는 것을 의미합니다.

자동 품질 및 형식 선택 외에도 사용자에게 더욱 성능이 뛰어나고 최적화된 이미지를 제공하기 위해 할 수 있는 몇 가지 작업이 있습니다.

먼저, 크기가 조정되고 최적화된 이미지 버전을 생성하는 데 사용될 이미지의 크기 속성을 구성할 수 있습니다. 다음과 같이 할 수 있습니다:

export default defineNuxtConfig({
  image: {
    screens: {
      'xs': 320,
      'sm': 640,
      'md': 768,
      'lg': 1024,
      'xl': 1280,
      'xxl': 1536,
      '2xl': 1536
    },
  }
})

다음으로 다음과 같이 모든 이미지에 추가될 전역 수정자를 추가할 수 있습니다.

export default defineNuxtConfig({
  image: {
    provider: 'cloudinary',
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/<company>/image/fetch/',
      modifiers: {
        quality: 'auto:best',
      }
    }
  }
})
</company>

마지막으로 NuxtImg 구성 요소 자체의 경우 더 나은 성능을 얻기 위해 다음 소품을 전달할 수 있습니다.

<nuxtimg src="/nuxt-icon.png" loading="lazy"></nuxtimg>

여기에서 사용 가능한 모든 소품 목록을 확인할 수 있습니다

그러나 고급 Cloudinary 사용법이나 VideoPlayer, OgImage 또는 ProductGallery와 같은 사전 구축된 구성 요소를 찾고 있다면 모듈 문서나 GitHub 저장소를 방문하여 Nuxt용 Cloudinary 모듈을 확인하세요.

여기에서 확인할 수 있는 몇 가지 기사도 게시했습니다.

? 자세히 알아보기

Vue, Nuxt, JavaScript 또는 기타 유용한 기술에 대해 자세히 알아보려면 이 링크를 클릭하거나 아래 이미지를 클릭하여 VueSchool을 확인하세요.

일상 작업이나 사이드 프로젝트에 도움이 될 수 있는 최신 Vue 또는 Nuxt 애플리케이션을 구축하는 동안 가장 중요한 개념을 다룹니다.

✅ 요약

잘했어요! Nuxt Image와 Nuxt Cloudinary 모듈을 모두 사용하여 사용자에게 고성능 이미지를 제공하는 방법을 배웠습니다.

몸조심하시고 다음에 만나요!

그리고 언제나처럼 즐거운 코딩을 하시나요?️

위 내용은 Nuxt Image 및 Cloudinary를 사용한 성능 이미지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!