15가지 최고의 이미지 파일 형식, 유형별 사용 사례 및 장점과 단점 정리

15 가지 최고의 이미지 파일 형식, 유형별 사용 사례 및 장점과 단점을 일목요연하게 정리한 아주 유익한 자료를 소개하려고 합니다.

올바른 이미지 파일 유형과 형식을 선택하는 것은 사소한 결정처럼 보일 수 있습니다. 그러나 인간은 시각적인 생물이며 이미지는 온라인 경험의 필수적인 부분입니다.

대부분의 페이지와 기사는 스크린 샷과 이미지를 사용하여 텍스트 콘텐츠를 풍부하게 합니다. 실제로 웹 사이트의 약 8% 만이 시각적 콘텐츠를 포함하지 않습니다.

안타깝게도 많은 웹 사이트 소유자는 여전히 다양한 사용 사례에 대해 선택할 이미지 파일 유형을 이해하지 못하고 있습니다. 그 결과 그들은 결국 자신의 사이트 로딩 속도를 늦추고 자신의 이미지가 가장 적합한 형식을 사용할 수도 없고 최적화되지도 않았습니다.

이 기사에서는 가장 중요한 모든 이미지 파일 확장자와 이를 사용하여 방문자에게 최상의 사용자 경험을 제공해야 하는 시기를 다룰 것입니다.

목차 (Contents)

- 다른 이미지 파일 유형은 무엇입니까?

- 15 개의 가장 인기있는 이미지 파일 형식

- 이미지 파일 형식 FAQ

다른 이미지 파일 유형은 무엇입니까?

이미지 파일 유형과 형식은 래스터 이미지 파일과 벡터 이미지 파일의 두 가지 주요 범주로 나뉩니다.

각 카테고리를 자세히 살펴 보겠습니다.

래스터 이미지 파일 형식 (Raster Image File Formats)

웹에서 가장 일반적인 이미지 형식 ( JPEG, GIF, PNG )은 모두 래스터 범주에 속합니다.

래스터 이미지 파일 유형은 모든 픽셀이 해상도 (예 : 1280 × 720)에 따라 정의된 색상, 위치 및 비율을 갖는 정적 이미지를 표시합니다.

정적이기 때문에 이미지의 크기를 효율적으로 조정할 수 없으며 원본 디자인과 픽셀은 단순히 추가 공간을 채우기 위해 늘어납니다. 이로 인해 흐릿하거나 픽셀화되거나 왜곡된 이미지가 생성됩니다.

래스터 이미지 – JPEG 예

인터넷에서 보는 대부분의 사진이나 이미지는 래스터 이미지 형식을 사용하고 있습니다.

벡터 이미지 파일 형식 (Vector Image File Formats)

SVG , EPS, AI 및 PDF는 벡터 이미지 파일 유형의 예입니다.

각 디자인 모양과 색상이 픽셀에 묶여있는 정적 래스터 이미지 파일 형식과 달리 이러한 형식은 더 유연합니다.

대신 벡터 그래픽은 단일 픽셀이 아닌 전체 면적과 비교하여 크기가 조정된 직교 평면의 선과 곡선 시스템을 사용합니다.

즉, 품질 저하나 왜곡없이 원본 이미지 해상도를 끝없이 확대할 수 있습니다.

벡터 이미지 형식 확대 (이미지 출처 : Wikipedia.com )

보시다시피 7배로 확대했을 때 품질의 차이는 비교할 수 없을 만큼 완전히 다름을 알 수 있습니다.

SVG는 픽셀이 아닌 전체 영역의 백분율을 기준으로 위치를 계산하므로 픽셀화가 전혀 없습니다.

웹 사이트의 8% 만이 시각적 콘텐츠를 포함하지 않지만 나머지 92% 는 올바른 파일 형식으로 이미지를 표시하는 것이 필수적입니다. 이 가이드에서 최고의 15가지 이미지 유형 옵션을 찾아보시길 바랍니다.

15 가지 가장 인기 있는 이미지 파일 형식

아래에서는 래스터 웹 이미지에서 벡터, 이미지 편집 소프트웨어 파일에 이르기까지 모든 주요 그래픽 파일 형식을 다룹니다.

우리는 심층 분석을 통해 장점과 단점, 브라우저 및 OS 지원, 각 형식에 대한 이상적인 사용 사례를 정리하였습니다.

1. JPEG ( JPG ) - Joint Photographic Experts Group | 공동 사진 전문가 그룹

2. PNG - Portable Network Graphics | 휴대용 네트워크 그래픽

3. GIF - Graphics Interchange Format | 그래픽 교환 형식

4. WebP - Wepp | 손실/비손실 압축 이미지 파일 형식 

5. TIFF - Tagged Image File Format | 무손실 압축과 태그를 지원 파일 형식

6. BMP - Bitmap | 그림 파일 포맷

7. HEIF - High Efficiency Image File Format | 고효율 이미지 파일 형식

8. SVG - Scalable Vector Graphics | 확장 가능한 벡터 그래픽

9. EPS - Encapsulated Postscript | 캡슐화된 포스트 스크립트

10. PDF - Portable Document Format | 포터블 문서 형식

11. PSD - Photoshop Document | 포토샵 문서

12. AI - Adobe Illustrator Artwork | 어도비 일러스트레이터 아트 워크

13. XCF - eXperimental Computing Facility | GIMP 기본 이미지 형식

14. INDD - Adobe InDesign Document | 어도비 인디자인 문서

15. RAW - Raw Image File Types | 원시 이미지 파일 유형

1. JPEG ( JPG ) — Joint Photographic Experts Group

Tiger 이미지 JPEG 형식

JPEG(또는 JPG)는 손실 압축이 적용된 래스터 이미지 파일 형식으로 이미지 공유에 적합합니다. JPEG는 "lossy (손실)"이라는 의미로 파일 크기가 줄어들지만 형식을 사용할 때 이미지 품질도 떨어집니다.

JPEG는 압축 및 사실상 범용 브라우저 / OS 지원으로 인해 인터넷에서 볼 수 있는 가장 많이 사용되는 이미지 파일 유형 중 하나입니다.

대부분의 소셜 미디어 플랫폼 (예 : Facebook 및 Instagram)은 업로드된 이미지 파일을 자동으로 JPEG로 변환합니다. 또한 고유한 소셜 미디어 이미지 크기를 사용하여 사진의 해상도를 제어합니다.

[ 장점과 단점 ]

• 범용 브라우저 및 OS 지원합니다.
• 파일 크기가 상당히 작습니다.
• 손실된 이미지 압축은 텍스트 가독성을 저하시킬 수 있습니다.

[ 브라우저 및 OS 지원 ]

• 모든 주요 브라우저 (Chrome, Firefox, Safari 등)의 버전 1.0부터 지원됩니다.
• 모든 주요 운영 체제의 모든 이미지 뷰어 및 편집기에서 기본적으로 지원됩니다.

[ 사용 사례 ]

• 블로그 콘텐츠 이미지, 인터뷰이의 얼굴 사진, 제품 이미지 등을 위한 사용은 좋은 선택이 될 수 있습니다.
• 작은 텍스트가 많은 인포그래픽 또는 텍스트가 핵심인 튜토리얼 스크린 샷을 위한 사용은 하지 않습니다.

2. PNG — Portable Network Graphics

Kinsta의 리소스 센터 .png 이미지 파일

PNG는 무손실 압축을 지원하고 색상 간의 디테일과 대비를 유지하는 래스터 그래픽 형식입니다.

특히 PNG는 JPEG보다 훨씬 더 나은 텍스트 가독성을 제공합니다.

따라서 PNG는 인포그래픽, 배너, 스크린 샷 및 이미지와 텍스트를 모두 포함하는 기타 그래픽에 더 많이 사용됩니다.

[ 장점과 단점 ]

• 고품질 (무손실) 이미지와 선명하게 보이는 텍스트.
• 파일 크기가 클수록 과도하게 사용되면 웹 사이트 로딩 속도가 느려질 수 있습니다 (특히 고해상도 이미지).

[ 브라우저 및 OS 지원 ]

• 모든 주요 브라우저 (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari)에서 지원됩니다.
• 모든 주요 운영 체제 및 표준 이미지 편집기에서 지원됩니다.

[ 사용 사례 ]

• 인포그래픽, 배너, 블로그 그래픽, 스크린 샷, 쿠폰 및 텍스트가 포함된 기타 비주얼에 적합합니다.
• 고해상도 사진에는 사용하지 않습니다. 최대 수 메가 바이트(MB)의 대용량 파일이 생성됩니다.

3. GIF — Graphics Interchange Format

gif 이미지의 예

GIF는 래스터 형식에 속하는 또 다른 이미지 파일 유형입니다. 무손실 압축을 사용하지만 이미지를 픽셀 당 8비트 및 제한된 256색 팔레트로 제한됩니다.

GIF 형식의 8비트 제한이 작고 인터넷 친화적인 애니메이션의 파일 크기를 유지하기 때문에 애니메이션 이미지에 가장 많이 사용되고 유명합니다.

[ 장점과 단점 ]

• 파일 크기가 작습니다.
• 애니메이션을 지원합니다.
• 8비트 제한으로 인해 이미지 품질이 제한적입니다.

[ 브라우저 및 OS 지원 ]

• 모든 주요 브라우저 (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari)에서 지원됩니다.
• 모든 주요 운영 체제 및 표준 이미지 편집기에서 지원됩니다.

[ 사용 사례 ] 

• 애니메이션 GIF를 사용하여 콘텐츠를 멋지게 꾸밀 뿐만 아니라 자습서 및 가이드에서 작업을 완료하는 방법을 보여줍니다.
• 8비트 이상의 컬러 이미지가 필요한 경우에는 사용 하지 않습니다 (JPEG는 최대 24비트를 지원합니다).

4. WebP - Wepp

WebP 이미지 예

WebP는 이미지의 더 나은 무손실 및 손실 압축을 제공하기 위해 특별히 개발된 이미지 형식입니다.

JPEG 및 PNG에서 WebP로 전환하면 동일한 품질을 위해 최대 35% 더 작은 이미지 파일을 사용하여 서버 디스크 공간과 상당한 대역폭을 절약할 수 있습니다.

[ 장점과 단점 ]

• 동일하거나 더 나은 이미지 품질을 위한 더 작은 파일입니다.
• 모든 브라우저 및 이미지 편집기에서 지원되지는 않습니다.

[ 브라우저 및 OS 지원 ]

• Google Chrome (데스크톱 용 버전 17+, 모바일 용 25+), Firefox (65+), Edge (18+) 및 Opera (11.0+)는 기본적으로 WebP를 지원합니다. Safari의 버전 14는 WebP를 지원합니다.
• 이 형식은 대부분의 기본 OS 이미지 편집기에서 여전히 지원되지 않지만 Photoshop과 같은 전문툴 옵션은 WebP를 지원합니다.

[ 사용 사례 ]

대역폭을 절약하고 사이트 속도를 높이려면 JPEG 및 PNG 파일을 교체합니다. 여러분이 선호하는 CMS 소프트웨어 워드프레스를 사용하는 경우, 여기 워드프레스에 WebP 형식의 이미지를 사용하는 방법과 기존 브라우저에 다른 형식을 사용하는 법을 제공합니다.

5. TIFF - Tagged Image File Format

TIFFC 아이콘

이미지 파일 형식에 대한 이 가이드에서 누락되어서는 안되는 형식 중 하나는 TIFF입니다.

Tagged Image File Format의 약자인 TIFF는 나중에 인쇄에 사용될 이미지를 저장하고 편집하는 데 가장 일반적으로 사용되는 래스터 이미지 형식입니다.

우선 순위가 이미지 품질 보존이기 때문에 압축을 제공하지 않습니다.

[ 장점과 단점 ]

• 저장 또는 인쇄 출판에 완벽한 고품질 파일.
• 압축 옵션이 없으면 큰 이미지 파일이 생성됩니다.
• 제한된 브라우저 지원.

[ 브라우저 및 OS 지원 ] 

• 추가 기능이나 확장 기능 없이는 주요 브라우저가 TIFF 파일을 렌더링 할 수 없습니다.
• 주로 전문적인 이미지 편집 및 게시 도구를 위한 내보내기 형식으로 사용할 수 있습니다.

[ 사용 사례 ]

• 저장과 준비용 이미지 그리고 출판용 그래픽 이미지.
• 스캔한 문서 또는 그림의 품질을 유지하기 위해 많은 스캐너에서 사용됩니다.

6. BMP-Bitmap

bmp vs gif

비트맵(BMP)은 거의 또는 전혀 압축하지 않고 개별 픽셀을 매핑하는 대부분 오래된 이미지 파일 형식입니다. 즉, BMP 파일은 쉽게 매우 커질 수 있으며 저장하거나 처리하기가 비현실적입니다.

[ 장점과 단점 ]

• WebP, GIF 또는 PNG와 같은 형식에 비해 눈에 띄는 품질 향상없이 ​​거대한 파일 크기.

[ 브라우저 및 OS 지원 ]

• 모든 주요 브라우저(Chrome, Edge, Firefox, Internet Explorer, Opera, Safari)에서 지원됩니다.
• MS Paint와 같은 대부분의 기본 OS 이미지 편집기에서 기본 지원.

[ 사용 사례 ]

• 2020년에는 기본적으로 BMP 이미지 형식에 대한 본격적인 사용 사례가 없습니다.

7. HEIF — High Efficiency Image File Format

JPEG vs HEIF 형식

고효율 이미지 파일 형식(High Efficiency Image File Format)의 약자인 HEIF는 MPEG 비디오 형식 팀이 JPEG의 직접적인 경쟁자 가되기 위해 개발 한 이미지 형식입니다.

이론적으로 압축은 JPEG보다 거의 두 배 더 효율적이므로 동일한 파일 크기로 최대 두 배의 품질을 얻을 수 있습니다.

픽셀 매핑을 기반으로 한 래스터 이미지 형식이므로 품질을 잃지 않고 이미지를 확장할 수 없습니다.

[ 장점과 단점 ]

• 파일 크기 비율에 대한 우수한 품질.
• 브라우저가 없고 OS 지원이 제한됩니다.

[ 브라우저 및 OS 지원 ]

• 주요 브라우저에서는 지원되지 않습니다.
• macOS Sierra 및 iOS 11 및 이후 버전에서 기본 지원되지만 해당 Safari 버전에서는 지원되지 않습니다.

[ 사용 사례 ]

• 일부 최신 휴대폰 및 장치에서 JPEG 파일보다 높은 품질로 사진을 저장하는 데 사용됩니다.

8. SVG — Scalable Vector Graphics

SVG 로고

일반적으로 SVG라고하는 Scalable Vector Graphics 파일 형식은 W3C에서 브라우저 내에서 바로 2차원 이미지를 렌더링하는 마크업 언어로 개발되었습니다.

래스터 형식과 같은 픽셀에 의존하지 않고 대신 XML 텍스트를 사용하여 수학적 방정식이 그래프를 만드는 방식과 유사한 방식으로 모양과 선의 윤곽을 그립니다.

즉, 품질 손실없이 SVG 이미지를 무한대로 확장할 수 있습니다.

[ 장점과 단점 ]

• 간단한 일러스트레이션, 모양 및 텍스트를 위한 작은 파일 크기 및 손실없는 크기 조정.
• 이미지나 복잡한 그림에 이상적인 형식이 아닙니다.

[ 브라우저 및 OS 지원 ]

• 모든 주요 브라우저 (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari)에서 지원됩니다.
• 기본 이미지 편집기는 사진에 적합하지 않기 때문에 SVG를 지원하지 않는 경향이 있지만 대부분의 일러스트레이션 소프트웨어는 SVG 내보내기를 지원합니다.
  
  

[ 사용 사례 ]

SVG는 로고, 아이콘, 간단한 일러스트레이션 및 반응형 디자인으로 자유롭게 확장할 수 있는 모든 것에 이상적인 형식입니다. WordPress를 사용하는 경우, 웹 사이트에서 WordPress SVG 지원을 활성화하는 방법을 확인하길 바랍니다.

9. EPS — Encapsulated Postscript

EPS 아이콘

본질적으로 EPS (Encapsulated PostScript) 파일은 어도비 일러스트레이터 (Adobe Illustrator) 및 코렐드로우 (CorelDraw)와 같은 기타 일러스트레이션 소프트웨어에 일러스트레이션을 저장하는 데 사용되는 벡터 이미지 파일입니다.

SVG 파일과 마찬가지로 EPS는 실제로 픽셀과 색상을 매핑하는 대신 코드로 모양과 선의 윤곽을 그리는 텍스트 기반 문서입니다. 결과적으로 EPS 파일은 무손실 크기 조정도 지원합니다.

[ 장점과 단점 ]

• 무손실 확장.
• 문서 및 디자인에 대한 프린터 지원.
• 브라우저 및 OS 지원
• EPS는 표준 웹 이미지 파일 형식이 아니며 주요 브라우저에서 지원되지 않습니다.

[ 사용 사례 ]

Adobe Illustrator 또는 기타 소프트웨어로 작업할 때 주로 일러스트레이션을 저장 및 인쇄하는 데 사용됩니다.

10. PDF — Portable Document Format

PDF 파일 예

대부분의 텍스트 기반 문서를 저장, 저장 및 읽는 것과 PDF를 연관시킬 수 있습니다. 그것은 완벽하게 이해할 수 있다. 결국 문서는 이름에 그대로 있습니다.

그러나 PDF 파일은 실제로 EPS 벡터 이미지 파일을 지원하는 동일한 PostScript 언어를 기반으로 하며 이미지와 일러스트레이션을 저장하는 데에도 사용할 수 있습니다.

나중에 인쇄하기 위해 일러스트레이션, 잡지 표지 등을 저장하기 위해 선택한 이미지 형식입니다. 또한 Kinsta eBook 에서 선호하는 선택입니다.

[ 장점과 단점 ]

• 색인 생성 및 검색 가능한 텍스트는 심층적인 인포그래픽 또는 보고서에 적합합니다.
• 링크, CTA 버튼 및 기타 상호 작용 요소를 포함할 수 있습니다 .
• 무손실 확장성.
• 웹 콘텐츠에 포함될 수 없으며 별도의 파일로 로드하고 읽어야 합니다.

[ 브라우저 및 OS 지원 ]

• 모든 주요 브라우저에서 지원되지만 PDF를 별도의 파일로 열어야 합니다.(HTML 컨텐츠 전체에 이미지를 표시하는 데 PDF 파일을 사용할 수 없습니다.)
• 대부분의 표준 문서 편집기(예 : MS Word 또는 Google Docs) 및 일러스트레이션 소프트웨어 (AI, Inkscape)에서 형식으로 지원되지만 이미지 편집 소프트웨어에서는 지원되지 않습니다.

[ 사용 사례 ]

• PDF는 콘텐츠를 보완하는 대화형 시각적 보고서 또는 인포그래픽을 만들려는 경우 가장 좋은 옵션입니다.
• 다음은 WordPress 사용자를위한 최고의 PDF 뷰어 플러그인 목록입니다.

11. PSD - Photoshop Document

PSD 로고

이름에서 알 수 있듯이 PSD 파일 형식은 이미지 문서를 저장하는 데 사용되는 이미지 형식이며 Adobe Photoshop에서 사용 중입니다.

웹에 적합한 이미지 형식이 아니므로 브라우저나 표준 이미지 뷰어 또는 편집기에서 지원하지 않습니다.

[ 장점과 단점 ]

• 모든 필터, 투명도, 경로 및 편집은 완전히 사용자 정의하고 되돌릴 수 있습니다.
• 무손실 이미지 품질.
• 큰 파일 크기.

[ 사용 사례 ]

• 완료 전후에 Photoshop 프로젝트를 저장합니다.
  
  
  

12. AI — Adobe Illustrator Artwork

Adobe Illustrator 파일 아이콘

AI는 이미지뿐만 아니라 프로젝트 상태를 저장하기 위해 Adobe에서 특별히 개발한 또 다른 이미지 형식입니다.

PSD와 마찬가지로 웹에서 사용하기 위한 것이 아니며 모든 브라우저 나 대부분의 기본 이미지 뷰어에서 지원하지 않습니다.

PSD 파일과 달리 품질 저하없이 AI 파일의 크기를 자유롭게 조정할 수 있습니다.

[ 장점과 단점 ]

• 모든 획, 선, 모양, 필터는 사용자 정의 및 되돌릴 수 있습니다.
• 자유롭게 일러스트레이션 크기를 늘리거나 줄입니다.
• 큰 파일 크기.

[ 사용 사례 ]

• 완료 전후에 Adobe Illustrator 프로젝트를 저장합니다.

13. XCF — eXperimental Computing Facility

XCF 아이콘

eXperimental Computing Facility의 약자인 XCF는 오픈 소스 이미지 편집기 GIMP의 기본 이미지 파일 유형입니다. PSD 파일과 동일하며 경로, 투명도, 필터 등을 저장합니다.

다시 한 번, 이것은 프로젝트를 저장하기 위한 기본 파일 유형이며 브라우저나 기본 이미지 뷰어에서 지원되지 않습니다.

[ 장점과 단점 ]

• 모든 경로, 필터 및 모양은 사용자 지정 및 되돌릴 수 있습니다.
• 무손실 이미지 품질.
• 큰 파일 크기.

[ 사용 사례 ]

• 완료 전후의 김프 프로젝트를 저장합니다.

14. INDD — Adobe InDesign Document

Adobe InDesign 아이콘

INDD는 페이지 콘텐츠, 스타일, 견본 등을 포함한 프로젝트 파일을 저장할 수 있는 어도비 인디자인(Adobe InDesign) 사용자를 위한 기본 파일 유형입니다.

이미지 파일 형식이라고도 하지만 텍스트 이외의 시각적 요소로 연결되는 경향이 있습니다.

웹에 적합한 형식이 아니므로 모든 브라우저 또는 기본 이미지 뷰어에서 지원되지 않습니다.

[ 장점과 단점 ]

• 사용자 정의 가능한 요소를 사용하여 대규모 다중 페이지 디자인 프로젝트를 저장합니다.

[ 사용 사례 ]

• 주로 그래픽 디자이너와 프로덕션 아티스트가 포스터, 전단지, 잡지, 팜플렛 등을 디자인하고 공동 작업하는 데 사용합니다.

15. RAW - Raw Image File Types

Raw 이미지 형식은 디지털 카메라가 나중에 후반 작업 및 편집을 위해 전체 품질 이미지를 저장하는 데 사용하는 파일 형식입니다.

카메라 제조업체 별 주요 Raw 이미지 파일 유형:

• Kodak: CR, K25, KDC
• Canon: CRW CR2 CR3
• Epson: ERF
• Nikon: NEF NRW
• Olympus: ORF
• Pentax: PEF
• Panasonic: RW2
• Sony: ARW, SRF, SR2

JPEG 파일에서 사용할 수 있는 256색 대신 RAW 파일은 단일 사진에서 최대 16,384가지 색상을 제공합니다. 이는 후처리 과정에서 색상과 대비를 조정할 때 더 많은 유연성을 제공합니다.

Raw 이미지는 웹 또는 공유 용이 아니며 주요 브라우저 또는 이미지 뷰어에서 지원되지 않습니다.

[ 장점과 단점 ] 

• 색상의 다양성이 더 높은 고품질 사진입니다.
• 대용량 이미지 파일(원시 파일은 최대 20 ~ 40MB까지 가능)

[ 사용 사례 ]

• 사후 처리 및 편집을 위해 가능한 최고 품질로 사진을 저장합니다.

이미지 파일 형식 FAQ

이미지 파일의 3 가지 일반적인 파일 유형은 무엇인가요?

웹 사용과 관련된 데이터를 기반으로 가장 일반적인 세 ​​가지 이미지 파일 유형은 PNG, JPEG 및 SVG입니다.

이미지 파일 형식의 사용 통계 (이미지 출처 : w3techs.com )

아래에서 그것들이 그렇게 널리 퍼진 이유를 살펴 보도록 하겠습니다.

1. PNG : 스크린 샷, 배너, 인포 그래픽, 그림

형식으로서의 PNG는 이미지 내부의 텍스트에 더 적합하기 때문에 스크린 샷, 배너 ( 배너 광고 크기 에 따라 다름) 등에 더 자주 사용됩니다.

무손실 압축을 사용하기 때문에 디자이너와 사진 작가가 포트폴리오 웹 사이트에 고품질 사진을 표시하는 데도 사용됩니다.

이 두 가지 요소는 범용 브라우저 및 OS 지원과 함께 웹에서 가장 인기있는 이미지 파일 형식이 됩니다. PNG는 웹 사이트의 무려 77% 에 존재합니다.

2. JPEG : 사진

손실 압축은 JPEG가 콘텐츠 전체에 사진을 표시하는 데 사용하는 더 나은 옵션임을 의미합니다. 품질 저하는 일반 인터넷 사용자에게 거의 보이지 않으며 상당한 디스크 공간과 대역폭을 절약 할 수 있습니다.

이것이 웹 사이트의 거의 72% 가 사용하는 인터넷에서 두 번째로 인기있는 형식 인 이유입니다. 대부분의 사이트는 다른 목적으로 PNG와 JPEG를 모두 사용합니다.

알림 : JPG와 JPEG 사이에는 차이가 없으며 동일한 형식에 대한 두 개의 서로 다른 약어 및 파일 확장자입니다.

3. SVG : 로고, 아이콘 및 일러스트레이션

SVG 파일은 아이콘, 로고, 그래프 및 간단한 일러스트레이션에 적합한 확장 가능한 벡터 파일입니다. 이미지는 CSS 코드 로 페이지에 직접 삽입 할 수도 있습니다.

이것이 SVG가 웹 사이트의 27% 에서 사용하는 3위인 이유입니다.

입상 : 애니메이션 GIF 이미지

정적 이미지의 형식은 드물지만 GIF는 애니메이션 공유를 위한 #1 선택으로 돌아 왔습니다.

애니메이션 GIF 예

결과적으로 웹 사이트의 약 22%는 표준 형식으로 PNG 및 JPEG를 사용할 가능성이 있지만 페이지에서 GIF를 사용합니다.

어떤 이미지 형식이 최고 품질일까요?

Raw 이미지 형식은 최고 품질이지만 파일 크기가 최대 수백 메가 바이트에 달합니다.

웹 이미지의 경우 WebP 파일 형식은 동일한 품질의 사진에 대해 JPEG보다 25-35% 더 작은 파일 크기 를 제공하므로 동일한 디스크 공간에 더 높은 품질의 이미지를 업로드하고 사이트 속도를 높일 수 있습니다.

HEIF는 보다 효율적인 압축을 제공하는 또 다른 JPEG 대안이지만 현재 주요 브라우저에서는 지원되지 않습니다.

PNG 파일은 무손실 압축을 제공하지만 이는 파일 크기가 매우 크고 로드 속도가 느리다는 것을 의미합니다. 단일 PNG 파일은 종종 수백 KB 또는 1MB 이상일 수 있습니다. 그러나 지연 로딩 (WordPress 5.5 이후 코어에서 사용 가능) 및 CDN 과 같은 일부 전술을 활용한다면 여전히 빠른 사이트를 가질 수 있습니다.

투명성을 지원하는 파일 형식은 무엇일까요?

투명도를 지원하는 가장 일반적인 웹 이미지 파일 유형은 PNG, WebP, GIF 및 SVG입니다.

PSD, XCF 및 AI와 같은 대부분의 기본 프로젝트 이미지 파일 유형도 투명도를 지원합니다.

반면에 널리 사용되는 JPEG 이미지 형식은 투명도를 지원하지 않습니다 .

PNG가 JPEG보다 낫습니까?

PNG와 JPEG의 주요 차이점은 PNG는 무손실 이미지 형식이고 JPEG는 손실이 있는 형식이라는 것입니다. 이것은 기본적으로 PNG가 이미지의 원래 품질이나 세부 사항을 희생하지 않고 압축 기술을 사용한다는 것을 의미합니다.

이미지의 텍스트, 튜토리얼 스크린 샷 및 사진에서 표지판이나 기타 미세 요소를 100% 볼 수 있도록 하려면 PNG가 올바른 형식입니다.

PNG vs JPEG 연재 만화 (이미지 출처 : lbrandy.com)

위의 재미있는 그림에서 볼 수 있듯이 왼쪽에 표시된 PNG는 오른쪽에 있는 JPEG에 비해 텍스트와 단순한 모양을 명확하게 표시하는 데 훨씬 더 뛰어납니다.

이것은 JPEG가 잘못된 이미지 파일 유형임을 의미합니까? 전혀요!

일반 블로그 게시물을 위한 상당히 낮은 파일 크기 충분히 좋은 품질 이상의 JPEG 제공이 더 많거나 육안으로 품질의 차이를 파악하기 위해 고군분투하면서 헤더 이미지의 최대 50% 이상의 공간을 절약 할 수 있습니다.

최고의 이미지 파일 형식에 대한 이 가이드를 통해 웹 사이트의 시각적 콘텐츠를 선명하게 유지하길 바랍니다.

요약

프로젝트에 합법적으로 사용할 수 있는 이미지가 부족하지 않습니다. 이 가이드가 최상의 결과를 위해 어떤 컨텍스트에서 사용할 이미지 파일 유형과 형식을 이해하는 데 도움이 되었기를 바랍니다.

래스터 형식은 이미지와 그림에 가장 적합하며 벡터는 로고, 아이콘 및 디지털 그래픽을 대체할 수 있습니다.

올바른 작업에 적합한 이미지 파일 유형을 사용하면 페이지 로드 속도를 향상시킬 뿐만 아니라 대역폭과 서버로드를 줄일 수 있습니다. 더불어 긍정적인 효과로 전반적인 사용자 경험도 크게 향상됩니다.

원문) 15 Best Image File Types (Pros vs Cons + Use Cases for Each Format)