이미지를 랜더링하는 두 가지 방법이 있습니다.
1. 경로를 통해 이미지를 불러오는 방법
2. Vite를 통해 이미지를 불러오는 방법
폰트 파일은 public폴더에 있고
이미지 파일은 assets폴더에 있습니다.
프로젝트에서 사용할 이미지 파일을
public폴더에 넣어도 되고 assests폴더에 넣어도 됩니다.
그렇다면 이 둘의 차이는 무엇일까요?
import를 통해 이미지를 호출하면
Vite가 내부적으로 이미지를 최적화 합니다.
assets폴더에 이미지 파일을 넣은 것 처럼,
public폴더에도 이미지 파일을 넣으면 동일하게 이미지를 호출할 수 있습니다.
public폴더에 이미지 파일을 넣으면,
assets폴더에 이미지 파일을 넣은 것과 같이 import를 통해 불러오지는 않지만
URL을 통해 해당 이미지 파일을 불러올 수 있습니다.
소스 코드를 통해 두 방법의 차이를 보겠습니다.
1. URL을 통해 이미지 불러오기(public)
2. import를 통해 이미지 불러오기(assets)
URL을 통해 이미지를 불러오면Vite가 제공하는 이미지 최적화가 동작하지 않습니다.
Vite는 이미지를 어떻게 최적화 할까??
URL을 통해서 이미지를 불러오고
import를 통해서도 이미지를 불러오고 있습니다.
두 방법의 차이를 위해서 프로젝트를 빌드해서 실행시켜 보겠습니다.
npm run build를 터미널 창에서 입력하면 dist 폴더가 생성됩니다.
dist폴더는 React의 build 결과입니다.
다음으로 npm run preview를 입력하면 npm run dev와 같이 빌드된 프로젝트를 실행시킬 수 있습니다.
빌드된 프로젝트를 실행해서 해당 URL에 접속하면
아래 그림과 같이 URL을 통해 이미지를 불러오고 있는 것과 import를 통해 불러오고 있는 이미지를 확인할 수 있습니다.
여기서,
개발자 모드를 켜서 Elements 탭을 확인해 보겠습니다.
Public 폴더에서 호출하는 이미지는 일반적인 주소로 호출하는 반면,
assets 폴더에서 호출하는 이미지는 암호문 같은 포맷으로 되어있습니다.
위 그림과 같이 암호문 같은 포맷을 Data URI라고 합니다.
Data URI
이미지와 같은 외부 데이터를
문자열 형태로 브라우저의 메모리에캐싱하기 위해 사용되는 포맷
Data URI포맷으로 호출된 이미지들은 자동으로 브라우저의 메모리에 캐싱(저장)됩니다.
즉, 브라우저에서 새로고침을 하더라도 다시 이미지를 불러오지 않도록 최적화가 됩니다.
반면,
public폴더에서 호출한 이미지는 일반적인 주소로 이미지를 호출하기 때문에
새로고침을 할 때 마다 이미지를 매 번 새롭게 불러옵니다.
개발자 도구로 확인하기
Network 탭에서 호출되는 이미지를 확인해보겠습니다.
위 그림에서 볼 수 있듯이 개발자 도구 - 네트워크 탭에서 호출하는 이미지 목록을 확인하면
일반 주소 호출된 이미지는 용량이 발생됐지만,
Data URI형태로 호출된 이미지는 (memory cahce)라고 해서 메모리에 저장이 됐습니다.
또, time탭을 보면,
Data URI 형태로 호출되는 이미지는 0 ms로 시간이 소요되지 않는 것을 확인할 수 있습니다.
이미 캐시된 데이터를 사용하는 것이기 때문에
아예 이미지를 호출하는 시간이 발생하지 않습니다.
정리
assets폴더에서 이미지를 호출하면 브라우저의 캐시를 사용해서 이미지를 호출하기에 페이지가 새로고침되도 저장되어 있는 이미지를 랜더링하기 때문에 최적화 됩니다.
※ 이미지가 많은 경우
- 이미지가 10,000개, 100,000개 등 아주 많은 경우
- 브라우저 메모리에 캐싱해두면 용량이 과부하 됩니다.
- 이런 상황에서는
assets폴더보다는,public폴더에서 이미지를 호출하는게 좋을 수 있습니다.
결론
- 소량의 이미지 사용은
assets폴더를 통해 이미지를import해서 사용하는 것이 - 대량의 이미지 사용은
public폴더를 통해 이미지를 호출하는 것이 좋습니다.
