이미지 최적화 & 모던 이미지 포맷 사용하기

이미지 포맷은 80년대, 90년대에 나온 GIF, JPEG, PNG, BMP, PCX, TIFF 등이 있고, 모던 이미지 포맷으로는 WebP, AVIF, HEIF 등이 있습니다. 모던 이미지 포맷은 2010년 이후에 개발된 포맷들입니다.

더불어 벡터 이미지 전용인 SVG가 있습니다. SVG는 주로 벡터로 만들어진 아이콘에 많이 사용됩니다.

별로 중요한 내용은 아니지만 React, Next.js에서 이미지 파일 용량이 큰 경우 이미지 파일명으로 임포트되고 이미지가 작다면 자동으로 base64 코드로 직접 임포트 됩니다.
SVG 파일은 용량이 큰 경우가 거의 없어서 대개 base64 코드로 임포트.

---

이미지 최적화 && 이미지 압축

BMP는 애초에 무손실 & 무압축이므로 최적화 및 압축이 불가능하기 때문에 이 포스팅에서는 논외로 하고, 움짤기능(Animation)을 제외할 것이기 때문에 GIF 역시 제외.

각각의 이미지 포맷들은 이미지 최적화 또는 압축시에 사용하는 알고리즘이 존재하는데 JPEG은 손실 압축, PNG는 무손실 압축이기 때문에 알고리즘도 각각 다르다.

참고로 WebP는 손실 압축, 무손실 압축 둘 다 지원한다.

주의사항: 해상도가 72 DPI인지 확인해야 한다. 72 DPI를 초과하는 해상도 이미지를 대부분의 모던 브라우저에서 지원하지만, 72 DPI 초과하는 해상도 이미지를 '굳이' 써야하는 이유가 없다. 그 이상은 용량만 커질 뿐 해상도에서 오는 유의미한 차이는 없기 때문. 내려받은 후, 프린트할 용도의 이미지가 아니라면.

JPEG 압축 알고리즘 또는 라이브러리

• mozjpeg
• squoosh

PNG 압축 알고리즘 또는 라이브러리

• Deflate
• optipng
• Zopfli
• Oxipng

JPEG, PNG, WebP 셋 모두 지원하는 라이브러리

• https://github.com/tinify/tinify-nodejs
  한달에 500개 이미지까지는 무료이고 그 이상은 유료. (API 등록 및 인증 필요)

모던 이미지 포맷 사용해보기

여기서는 WebP 만드는 방법, 웹브라우저에서 사용하는 방법 등을 설명.

WebP는 Google에서 2010년에 만든 무손실/손실 압축 이미지 포맷이다. 참고로 동영상포맷으로 WebM이 있는데 둘 다 Google에서 밀고 있고 YouTube에서 주로 사용하는 이미지 포맷, 동영상 포맷이다.

이 두 가지 포맷을 Google에서 밀고 있는 가장 큰 이유는 용량이 상대적으로 작아서 트래픽 이점이 크기 때문이다.

무손실, 손실 압축 둘 다 지원하고 용량이 작다는 장점이 있는 반면 Animation 기능이 제대로 동작하지 않는다는 단점이 있어서 움짤은 아직 GIF가 주로 사용되고 있다.

또한 아직 WebP를 불러올 수 있는 이미지 뷰어가 많지 않은 실정이다. WebP를 보는 용도라면 현재는 크로뮴(Chromium) 프로젝트의 Chrome 웹브라우저를 이용하는 게 정신건강상 이롭다.

1. JPEG to WebP
   • https://cloudconvert.com/jpg-to-webp
   • https://convertio.co/kr/jpg-webp
   • https://pixelied.com/convert/jpg-converter/jpg-to-webp
2. PNG to Webp
   • https://cloudconvert.com/png-to-webp
   • https://convertio.co/kr/png-webp
   • https://pixelied.com/convert/png-converter/png-to-webp

써본 결과 cloudconvert, convertio, pixelied 이 3가지 서비스 정도가 쓸만한 느낌적인 느낌.

주의할 점은, 업로드 가능한 용량에 제약이 있는 경우가 있고 업로드 가능한 개수 제한이 있는 경우도 있다는 점 정도.

웹서비스 또는 앱서비스에 따라서 WebP를 지원하지 않는 경우가 종종 있는데 지원하지 않는지 여부는 이미지를 업로드해보면 지원하는지 지원하지 않는지 알 수 있다.
source 또는 picture로 분기해서 사용하는 서비스들은 대개 지원한다.

최적화, WebP 변환 추천하는 순서

만약, 원본파일(JPEG 또는 PNG)과 WebP 둘 다 사용해야 하는 경우라면

1. JPEG 또는 PNG 이미지를 최적화를 하고,
2. 최적화한 이미지 파일을 WebP로 변환.

또는

1. 최적화하지 않은 JPEG 또는 PNG 이미지를 WebP로 변환하고,
2. 최적화하지 않은 JPEG 또는 PNG 이미지와 WebP 2개 파일을 최적화.

이렇게 크게 2가지의 순서가 존재하는데 WebP로의 변환작업은 어차피 필수과정이므로, 그나마 덜 귀찮은 건 후자보다는 전자 과정이다. 후자는 원본과 WebP 둘 다 최적화를 해야하니까.

물론, 최적화하는 라이브러리가 multipart를 지원한다면 전자든 후자든 상관없고 본인이 편한 방식을 사용하면 된다.

난 듈다

---

새로운 기술은 써보는 버릇을 해봐야 사용법도 알 수 있고 그런 듯.