이미지 포맷

💡 

HTML 에서 이미지를 표시할 때는 용도에 따라 포맷을 선택하는 것이 핵심!

 

---

 

📋 이미지 포맷 비교 📋

포맷	특징	장점	단점	주요 용도
JPG (JPEG)	손실 압축 방식	사진처럼 색상이 다양한 이미지에 최적화, 용량이 작음	투명 배경 불가능, 압축 반복 시 화질 저하	실사 사진, 배경 이미지
PNG	무손실 압축 방식	투명 배경(Alpha) 지원, 문자나 로고가 선명함	사진의 경우 JPG보다 용량이 훨씬 큼	로고, 아이콘, 투명도가 필요한 이미지
GIF	256색 제한	짧은 애니메이션(움짤) 가능, 투명 배경 지원	색상 표현 한계로 화질이 낮고 용량이 비효율적	간단한 배너 애니메이션, 유머 짤
SVG	벡터(Vector) 방식	아무리 확대해도 깨지지 않음, 코드로 제어 가능	복잡한 사진 표현 불가, 파일이 커지면 연산 부담	로고, 아이콘, 인포그래픽
WebP	구글 제작(차세대)	JPG/PNG보다 용량이 30% 이상 작음, 투명/애니메이션 지원	구형 브라우저(IE 등)에서 지원 안 함	모던 웹의 거의 모든 이미지

 

🔸 WebP로의 전환

이제 대부분의 브라우저가 WebP를 완벽히 지원하기 때문에, 기존의 JPG와 PNG를 WebP로 변환하여 사용하는 것이 기본이다.
똑같은 화질에 용량만 획기적으로 줄어들어 페이지 로딩 속도가 빨라졌기 때문이다.

 

✂️ 이미지 다이어트

TinyPNG 같은 도구를 사용하여 파일의 메타데이터를 제거하고 용량을 최소화한 뒤 배포한다.

 

 💬  JPG 또는 PNG 파일을 WEBP 형식으로 변환하는 방법

• 온라인 변환 사이트 이용하기
  설치 과정 없이 웹상에서 간편하게 파일을 변환할 수 있는 방법. 대표적인 사이트로는 CloudConvert, Convertio, Ezgif 등이 있으며, 해당 사이트에 파일을 업로드한 후 변환할 이미지 형식을 WEBP로 선택하면 쉽게 변환할 수 있다.
• 포토샵 및 디자인 툴 활용하기
  포토샵 최신 버전에서는 ‘다른 이름으로 저장’ 기능을 통해 WEBP 포맷 선택이 가능. 이 방법은 이미지 품질을 유지하면서 변환할 수 있어 고품질 결과물을 원하실 때 적합하다.
• 커맨드라인 도구 사용하기
  개발자 분들이 많이 활용하는 방법으로, 구글에서 제공하는 cwebp 도구를 설치하여 터미널이나 명령 프롬프트에서 다음과 같이 입력해 변환할 수 있다.