9.1 이미지 최적화(13:36)에서 webp로 바뀌지 않습니다.

한 입 크기로 잘라먹는 Next.js(v15)

9.1) 이미지 최적화

해결된 질문

작성

수정됨

https://github.com/kimyoda/Next.js15_-.git

해당 깃 주소입니다!!

13분전까지 모든 세팅과 설정을 바꿨는데도, 계속 위와 같이 작동합니다.

book/[id]/page.ts

import Image from "next/image";      
<div
        className={style.cover_img_container}
        style={{ backgroundImage: `url('${coverImgUrl}')` }}
      >
        <Image
          src={coverImgUrl}
          width={80}
          height={105}
          alt={`도서 ${title}의 표지 이미지`}
        />

next.config.ts까지 강의와 똑같으나 위 화면처럼 계속 jpeg로 나오는데 도저히.. 이유를 못찾아서 문의드립니다!!

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
  images: {
    domains: ["shopping-phinf.pstatic.net"],
  },
};

export default nextConfig;

react typescript next.js

답변 3

이정환 Winterlood

지식공유자

안녕하세요 ssi02014님 이정환입니다.

BookItem 컴포넌트의 이미지가 webp로 변환되지 않는다고 질문을 올려주셨는데요

BookItem 컴포넌트의 이미지 태그가 Image로 변환되지 않았네요 아래는 질문자님께서 올려주신 깃허브 소스코드입니다.

이미지를 webp 확장자로 변환하거나 레이지 로딩을 적용하는 등의 최적화는 강의에서 알려드리고 있듯 next/Image 컴포넌트를 사용할 경우에만 적용됩니다.

우리 강의 9.1 챕터의 8분 20초 경을 참고하셔서 BookItem 컴포넌트의 <img> 태그를 next/Image 컴포넌트로 변환하시길 바랍니다.

ssi02014

질문자

아 그러네요! 바로 확인했습니다! 아이고, 이걸 놓쳤네요 ㅠ 알려주셔서 감사합니다!

이정환 Winterlood

지식공유자

안녕하세요 ssi02014님 이정환입니다.

아마 캐싱 관련된 문제로 보이는데 캡쳐해서 올려주신 브라우저의 스크린샷이 잘려 정확히 확인하기 어렵네요, 강한 새로고침 이후에도 동일한 문제가 발생한다면 전체 프로젝트를 실행해봐야 문제의 정확한 원인을 파악할 수 있을듯 합니다.

질문 가이드라인을 확인하셔서 전체 프로젝트 코드를 링크 형태(깃허브 or 구글드라이브)로 올려주세요

ssi02014

질문자

아, 죄송합니다! 해당 git 주소를 올려놨고, 강한 새로고침을 몇번이나 하였지만, 동일한 문제가 계속 실행했습니다!!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. ssi02014님께서 Next.js에서 이미지가 webp 형식으로 최적화되지 않고 jpeg 형식으로 로드되고 있는 문제를 겪고 계신 것 같습니다. 이 문제의 일반적인 원인과 해결 방법을 설명해드리겠습니다.

이미지 최적화가 적용되지 않는 이유와 해결 방법

Next.js의 이미지 최적화:
- Next.js의 next/image 컴포넌트는 기본적으로 브라우저의 지원 여부에 따라 이미지를 선택하여 최적화합니다. 즉, 브라우저가 webp 형식을 지원하지 않으면 다른 형식으로 제공할 수 있습니다.
웹 서버 설정 및 캐싱 문제:
- 이미지 최적화는 종종 브라우저 캐시에 의해 영향을 받을 수 있습니다. 이미지가 기존에 캐시된 경우 최적화된 버전이 아닌 이전 버전이 표시될 수 있습니다. 브라우저의 캐시를 삭제하고 다시 시도해 보세요. [Cmd + Shift + R] 또는 [Ctrl + Shift + R]을 사용하여 강력 새로고침을 시도하세요.
이미지 도메인 설정 확인:
- next.config.js에서 images.domains에 로드 중인 이미지의 도메인이 정확히 설정되어 있는지 확인하세요. 타 도메인에서 이미지를 가져올 때 누락된 설정으로 인해 이미지 최적화가 작동하지 않을 수 있습니다.
backgroundImage 스타일 사용:
- 코드에서 background-image 스타일로 url('${coverImgUrl}')로 설정한 부분이 있는데, 이 경우 next/image의 최적화 기능이 제대로 작동하지 않을 수 있습니다. next/image의 Image 컴포넌트를 직접 사용하는 것이 최적화 효과를 최대화할 수 있습니다.

관련된 문제 해결을 위한 유사한 코칭 링크를 제공해 드리겠습니다:

위의 해결 방안들이 도움이 되기를 바랍니다. 추가적인 문제가 지속된다면 해당 이미지 로딩 기준과 설정을 다시 점검해 보시는 것을 권장드립니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

ssi02014

질문자

우선 코칭 링크는 404로 떠서 전혀 도움이 안됨.
웹 서버 설정 및 캐싱도 소용없고, 브라우저의 버전(chrome)도 최신임
혹시몰라서 아래처럼 remotepatterns를 첨부하였지만 여전히 jpeg로 나옴...

혹시 몰라서 import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
  // images: {
  //   domains: ["shopping-phinf.pstatic.net"],
  // },
  // images: {
  //   remotePatterns: [
  //     {
  //       protocol: "https",
  //       hostname: "shopping-phinf.pstatic.net",
  //       port: "",
  //       pathname: "/**",
  //     },
  //   ],
  // },
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "shopping-phinf.pstatic.net",
      },
    ],
  },
};

export default nextConfig;

인프런 커뮤니티 질문&답변

9.1 이미지 최적화(13:36)에서 webp로 바뀌지 않습니다.

이미지 최적화가 적용되지 않는 이유와 해결 방법