프로젝트 최적화(2) - 이미지 최적화

📌시작하며

이번에는 이미지를 최적화 해보자!

✅이미지 최적화

이미지 최적화는 동영상 최적화와 마찬가지로, 사이즈를 줄이는 것에서부터 시작한다.

➡️적절한 이미지 포맷 설정

💟webP 포맷

WebP은 인터넷에서 이미지가 로딩되는 시간을 단축하기 위해 Google이 출시한 파일 포맷으로, PNG, JPEG 기존 포맷 파일 보다 작아진다. CAN I USE에서 찾아보면 서비스가 종료 된 IE를 제외하고 대부분의 브라우저에서 모두 지원하는 포맷임을 알 수 있기에 적극적으로 사용해도 좋을 듯 하다!

💟picture 태그

물론 WebP를 지원하지 않는 브라우저에 대응해야 할 경우가 발생할 수 있고, 그 때는 다음과 같이 여러 이미지 포맷을 설정해 브라우저가 표시할 수 있는 이미지를 선택할 수 있도록 해주면 된다.

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="photo" />
</picture>

이 예시 코드는 WebP를 지원하지 않는 브라우저에 대비해 AVIF와 WebP, 그리고 JPG 이미지를 포함한다. 먼저 브라우저는 <source> 요소의 srcset 속성과 type 속성을 이용하여 지원하는 형식 중에서 가장 적합한 이미지를 선택하고 표시하는데, 만약 브라우저가 <source> 요소에서 지원하는 형식을 찾지 못하면 <img> 요소의 src 속성에 지정된 이미지를 사용한다.

✅CDN 활용

cloudinary.com는 클라우드 기반의 이미지 및 비디오 관리 서비스를 제공해 이미지를 최적화해 빠르게 로드 할 수 있다. 또한 URL 기반 이미지 변환 서비스를 제공해서, 업로드한 이미지의 share link에 간단한 파라미터를 넣어주면 원하는 퀄리티와 사이즈로 변환된 이미지를 불러올 수 있다는 장점이 있다.

➡️대표 파라미터

파라미터	설명
w_[넓이]	이미지 너비를 지정한다.
h_[높이]	이미지 높이를 지정한다.
c_fill	이미지를 채운다.
f_auto	최적의 이미지 포맷을 선택한다.
q_auto:best	최적의 이미지 품질을 선택한다.

➡️프로젝트 적용법

실제 사용할 때는 Cloudinary에 접속후, Assets의 Folders에 폴더를 만들고 하위에 jpg, webp를 분리하여 이미지를 넣고, 두 개의 폴더 안에 있는 이미지들의 이름을 각각 동일하게 설정해준다.

예를 들어 image.jpg 와 image.webp 와 같이 동일한 이름 다른 포맷으로 설정해주면 된다.

이렇게 해주면, 프로젝트의 데이터 파일안의 이미지는 image 라는 이름만 작성해서 관리하고, 다양한 포맷은 props로 내려서 따로 설정해주면 되므로 코드가 간결해지고 관리가 쉬워진다.

🗂️참고 사이트

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
• https://www.adobe.com/kr/creativecloud/file-types/image/raster/webp-file.html
• https://cloudinary.com/documentation/transformation_reference