🐨CoalaCoding
DocsExamplesTry itBoardB반B반
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

  • JavaScript
  • Web Publishing
  • React
  • Python

커뮤니티

  • 게시판
  • 예제 모음
  • Try it 에디터

기타

  • GitHub
  • 관리자
© 2026 CoalaCoding. All rights reserved.
  • topBtn
  • rollingBanner
  • menu
  • stickyMenu
  • accordion
  • swiper
  • activeMenu
  • slide
  • tab
  • scrollEffect
  • ajax
  • tabSlide
  • adaption
  • 좋은-디자인을-위한-요소
  • 논리적vs물리적해상도
  • 게슈탈트이론
  • 색채심리학
  • 황금비율
  • 컬러모드
  • 디자인실무용어
  • 이미지파일의특징
  • 폰트와사이즈
  • 레이아웃기초
  • 10가지법칙
  • 아이트래킹
  • 색상을성공적으로고르는방법
  • 타이포그래피10가지팁
  • 스타일가이드만들기
  • 모바일디자인버튼
  • 조형요소
  • 6가지비주얼체계규칙
  • 아이콘디자인이론
  • 해상도와그리드시스템
  • 피그마란
  • 작업환경세팅
  • 인터페이스예제
  • 기능심화
  • 인터페이스설계
  1. 홈
  2. 문서
  3. HTML & CSS
  4. UI 컴포넌트
  5. 이미지파일의특징

이미지파일의특징

이미지 파일의 확장자별 특징과 비트맵/벡터 방식의 차이를 알아봅니다

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

이미지파일의 특징


1. 확장자별 구분

확장자특징용도방식
JPEG손실 압축 형식, 웹에서 많이 사용됨, 일부 품질 손실 발생 가능, 24비트 트루 컬러(1,600만 색상) 지원배포용비트맵
PNG비손실 압축 형식, 투명한 배경 지원, 파일 크기가 크지만 품질 유지, 24비트 트루 컬러(1,600만 색상) 지원배포용비트맵
GIF애니메이션 이미지 지원, 색상 수 제한, 파일 크기 작음, 8비트 256컬러로 제한배포용비트맵
BMP무압축 형식, 품질 손실 없음, 파일 크기 큼배포용비트맵
TIFF비손실 압축 형식, 색상 표현이 풍부, 파일 크기 큼배포용비트맵
AI일러스트레이터에서만 열고, 수정할 수 있는 전용 파일형식편집용벡터
PSD, PSBPhotoshop에서만 열고, 수정할 수 있는 전용 파일형식편집용비트맵

2. 제작방식별 구분

크게 두 가지로 구분됩니다.

  • 첫번째, 일러스트레이터로 제작되는 벡터 형식이 있습니다.
  • 두번째, 포토샵으로 제작되는 비트맵 형식이 있습니다.

벡터는 원본보다 크게 리사이징해도 화질 변화가 없으나 적은 수의 색상을 지원합니다. 비트맵은 1600만 색상을 지원하지만 원본보다 크게 리사이징하면 화질 변화가 큽니다.

비트맵벡터
정의정사각형의 픽셀이 모여 만든 이미지점과 점이 이루는 선분, 면에 수학적 연산으로 만들어짐
확대시깨짐 (계단현상)깨지지 않음
경계픽셀 색이 다 달라 뚜렷하지 않음면으로 이루어져 있어 뚜렷함
어떤 작업사진보정, 합성, 복잡 작업 (예: 영화 포스터)도형으로 만드는 작업 (예: 로고, 캐릭터, 명함)
장점사실 표현 가능, 색감 풍부, 특수효과 사용 가능확대시 깨지지 않아 대형 인쇄물 사용 가능
사이즈사이즈, 해상도 등으로 용량 변화, 사이즈 커짐크기 제약 없음, 용량 변하지 않음
프로그램포토샵, 페인터 등일러스트레이터, 코렐, 플래시
확장자jpg, gif, png, bmp...ai, swf, wmf...

벡터와 비트맵

  • 벡터

벡터 이미지

  • 비트맵

비트맵 이미지

목차

  • 구문