웹에서 사용 가능한 여러가지 형식의 이미지 파일들이 있다. 대표적으로 사용되는 이미지 형식들에 대해 알아보자.
JPEG (Joint Photographic Experts Group)
JPEG는 사진 이미지를 저장하는 데 가장 많이 사용되는 이미지 형식이다. 1992년에 표준화되었으며, 손실 압축 방식을 사용하여 이미지 파일 크기를 줄이는 데 효과적인 포맷이다. 아래의 확장자들은 모두 JPEG 이미지에 해당된다.
- .jpg
- .jpeg
- .jpe
- .jif
- .jfif
- .jfi
JPEG는 최대 24비트 색상을 지원하며, 약 1,677만 가지의 색상을 표현할 수 있다. 이로 인해 사진과 같이 다양한 색상을 포함하는 이미지에 적합하다.
장점
- JPEG는 사진 이미지를 크게 압축하여 파일 크기를 줄일 수 있다. 이는 웹 이미지, 온라인 앨범, 소셜 미디어 등에 이미지를 공유하거나 저장할 때 유용하다.
- JPEG는 거의 모든 운영 체제, 웹 브라우저 및 이미지 편집 소프트웨어에서 지원된다.
- JPEG 압축 및 압축 해제는 다른 이미지 형식에 비해 상대적으로 빠르다.
단점
- JPEG는 손실 압축 방식을 사용하기 때문에 이미지 정보 일부가 손실된다. 압축률을 높일수록 이미지 품질 저하가 더욱 일어난다.
- JPEG 압축 과정에서 특정 색상, 특히 밝은 색상이나 피부톤이 변형될 수 있다.
JPEG 압축의 화질 비교. 오른쪽에서 왼쪽으로 갈수록 압축률이 높은 대신 화질 손상이 많이 일어난다
PNG (Portable Network Graphics)
PNG 이미지 포맷은 1996년에 발표되었으며, 웹 이미지를 위해 설계된 무손실 압축을 제공하는 파일 형식이다. JPEG과는 다르게 PNG는 이미지 품질이 손상되지 않는 방식으로 압축하며, 이미지의 원본 정보가 완전히 유지된다. 즉, 압축 후에도 이미지 품질이 저하되지 않는다.
공식적으로는 “핑” 이라고 읽지만, 대부분 피엔지라고 읽는다. 최대 48비트의 색상을 지원한다.
장점
- 손실 없는 압축 방식을 사용하여 이미지의 원본 정보를 완전히 유지한다. 텍스트, 로고, 그래픽 디자인 등 선명한 이미지가 필요한 경우 PNG가 적합하다.
- 투명도를 지원하여 이미지의 투명 영역을 유지할 수 있다. 로고, 웹 디자인 요소, 그래픽 오버레이 등에 투명도가 필요한 경우 PNG가 적합하다.
- PNG는 감마 정보를 파일에 저장할 수 있어, 다양한 디스플레이 환경에서 일관된 색상 표현이 가능하다.
단점
- 무손실 압축 방식은 파일 크기가 상대적으로 클 수 있다는 단점이 있다. 특히 대용량 사진을 저장할 때는 PNG 형식이 JPEG보다 더 많은 저장 공간을 필요로 할 수 있다.
- 애니메이션 이미지를 지원하지 않는다. 이를 위해서는 GIF와 같은 다른 형식을 사용해야 한다.
GIF (Graphics Interchange Format)
GIF는 애니메이션 이미지를 저장하는 데 가장 많이 사용되는 이미지 형식이다. 1987년에 CompuServe에서 개발되었으며, 제한된 색상 팔레트와 손실 압축 방식을 사용하여 작은 파일 크기를 유지하면서 애니메이션 효과를 제공한다.
장점
- 여러 이미지 프레임을 순차적으로 보여주어 간단한 애니메이션을 보여줄 수 있다.
- 이미지의 특정 부분을 투명하게 설정할 수 있어, 웹 페이지의 배경과 자연스럽게 어울리게 할 수 있다.
- 거의 모든 웹 브라우저와 호환된다.
단점
- 256색만을 지원하기 때문에, 사진과 같은 고해상도 이미지에는 부적합하다.
- 이미지 품질이 다소 저하될 수 있다. 특히 사진 이미지의 경우 JPEG와 같은 손실 압축 형식에 비해 품질이 떨어진다.
SVG (Scalable Vector Graphics)
SVG는 벡터 그래픽을 저장하는 데 사용되는 이미지 형식이다. 1999년에 W3C (World Wide Web Consortium)에서 표준화되었으며, XML 기반의 마크업 언어를 사용하여 이미지를 정의한다. SVG는 벡터 그래픽의 장점인 무한 확장성과 선명한 이미지 품질을 제공하며, 웹 디자인, 로고 디자인, 아이콘 디자인 등에 널리 사용되고 있다.
장점
- 벡터 기반 형식으로, 이미지를 얼마나 확대하거나 축소해도 이미지의 선명도가 유지된다.
- 작은 크기로 복잡한 이미지를 표현할 수 있으며, 특히 코드를 최적화하면 파일 크기를 더욱 줄일 수 있습니다.
- 텍스트 에디터에서 직접 수정할 수 있으며, CSS와 JavaScript를 사용하여 동적으로 스타일과 상호작용을 조정할 수 있다.
- W3C에 의해 표준화되었으며, 모든 현대 웹 브라우저에서 널리 지원된다.
단점
- 사진과 같은 고해상도의 복잡한 이미지에는 적합하지 않다.
- 매우 복잡한 SVG 이미지는 브라우저에서 렌더링할 때 성능 저하를 일으킬 수 있다.
- 오래된 웹 브라우저는 SVG 이미지를 완벽하게 지원하지 않을 수 있다.
WebP (Web Picture)
WebP는 Google이 개발한 이미지 포맷으로, 웹 이미지 최적화를 목적으로 합니다. JPEG, PNG, GIF와 같은 기존의 이미지 형식들에 비해 더 효율적인 압축 기술을 제공한다. 이 형식은 2010년에 처음 발표되었으며, 그 이후로 점차적으로 널리 사용되고 있다. WebP는 전적으로 인터넷을 염두에 두고 설계되었다.
장점
- JPEG 및 PNG보다 20-30% 더 작은 파일 크기를 제공할 수 있다. 이는 웹 이미지 로딩 속도를 향상시키고 웹사이트 성능을 개선하는 데 도움이 된다.
- JPEG와 비교했을 때 동일한 파일 크기에서 더 높은 화질을 제공한다. 특히 사진 이미지의 경우 WebP가 더 선명하고 자연스러운 이미지 품질을 제공한다.
- PNG의 투명도를 대체할 수 있으며, GIF보다 효율적인 애니메이션을 지원한다.
단점
- WebP는 JPEG 및 PNG만큼 오래된 형식이 아니기 때문에 모든 웹 브라우저 및 이미지 편집 소프트웨어에서 지원되는 것은 아니다.
AVIF (AV1 Image Format)
AVIF는 Alliance for Open Media (AOM)에서 개발한 이미지 형식으로, 2018년에 출시되었다. AV1 비디오 코덱을 기반으로 이미지를 압축하며, JPEG 및 WebP보다 우수한 압축 효율과 화질을 제공한다. 또한 HDR, WCG, 8K 해상도를 지원하는 등 다양한 기능을 제공하여 모든 유형의 웹 콘텐츠에 대해 매우 다재다능하다.
장점
- AVIF는 동일한 품질의 이미지를 다른 형식들보다 훨씬 작은 파일 크기로 압축할 수 있다. JPEG에 비해 최대 50%까지 파일 크기를 줄일 수 있다.
- HDR과 와이드 컬러 감마 지원으로 더 넓은 표현력을 제공한다. 또한 높은 색상 깊이를 지원함으로써 더 세밀하고 정확한 색상 출력이 가능하다.
- 시각적인 부분을 넘어 웹사이트 성능과 SEO에 영향을 미친다.
- JPEG, PNG, WebP와 비교할 때 AVIF는 압축 효율성과 이미지 품질 모두에서 두드러진다.
단점
- AVIF는 상대적으로 새로운 형식이기 때문에 아직 모든 브라우저나 장치에서 지원되지 않는다. 특히 오래된 브라우저에서는 호환성 문제가 발생할 수 있다.
