웹에서 사용하는 이미지의 이해 와 종류, 그리고 변환 > 서울시공익활동 아카이브 관리

센터소개

센터는 센터 발자취 사업설명회

센터 소식

공지사항 센터사업후기 센터지원사업 정보공개

NPO 정보

NPO 소식 NPO 채용

아카이브

공익 정보 자료 변화사례

공간대관

공간안내 대관신청

회원가입 로그인

TOP

웹에서 사용하는 이미지의 이해 와 종류, 그리고 변환

실무도구 / by Jussi / 작성일 : 2017.07.07 / 수정일 : 2017.07.07

웹에서 사용하는 이미지의 이해 와 종류, 그리고 변환

#svg,#png,#converter

인터넷과 모바일이 정보와 소통의 대세화가 되고 있으면서 데이터의 시각화가 점점 더 중요해지고 있습니다.

인터넷에서 웹이미지를 활용하여 파워포인트에서 활용하거나 다른 문서툴에 적용하기 위해서는

기본적인 이미지를 이해하는 과정이 필요해서 간단히 정리하고 웹에서 사용하는 이미지 파일 종류와 변환사이트를 안내합니다.

1. 웹에서 사용하는 이미지 파일의 이해와 종류 설명

1.1 벡터와 라스터(비트맵)의 이미지 차이 이해

[그림참고 : 위키백과]

	라스터(비트맵)	벡터
설명	정사각형 모양의 픽셀(Pixel) 수백개가 모여 전체 이미지를 구성하는 방식으로 비트의 지도(Map of bits)라는 뜻의 '비트맵(Bitmap)' 또는 '픽스맵(Pixmap)'이라고도 불림 .	점과 점 사이의 곡선으로 이미지를 구성하는 방식으로 기본적인 점의 위치 정보 정도만 기억하면 되기 때문에 파일의 크기가 작고, 이미지를 축소하거나 확대해도 이미지에 손상을 주지 않는 것이 큰 장점
단점	고해상도 래스터 이미지의 경우 컴퓨터가 픽셀 각각의 컬러 정보를 모두 저장해야 하기 때문에 용량이 크고, 처음 저장된 원본파일 크기보다 크게 확대해서 볼 경우 화면이 계단식으로 깨져 보인다	컬러의 자연스러운 변화나 세밀한 그림을 표현하기 어렵고, 이미지를 구성하는 객체가 다양하고 많아질 수록 그래픽 처리 시간도 많이 소요
활용분야	고해상도 사진이나 회화작품을 표현 웹에서 사용되는 모든 이미지는 거의 비트맵 이미지	아이콘'이나 '캐릭터' 등의 일러스트 이미지, '로고 디자인' 등에 많이 사용 웹에서 사용되는 벡터이미지->svg
편집툴	포토샵(Photoshop) , 그림판	일러스트레이터(Illustrator)
확장자	jpg, png , psd , gif , bmp	ai , svg

1.2 확장자별 이미지 타입 설명

JPEG, jpg	Joint Photographic Experts Group의 약어다. 넓은 범위의 색을 지원하므로 카메라와 스캐너에서 가장 흔히 사용되는 형식이다(흑백 사진용으로도 좋음). 그러나 JPEG는 압축 형식이므로 디테일을 일부 희생시켜 파일 크기를 줄인다. 이 점은 카메라 메모리 카드의 저장 공간을 절약하고 사진을 온라인에 게시하거나 이메일을 통해 공유할 때 유리하다.
PNG -> 웹용 추천	Portable Network Graphics의 약어로, 다양한 색과 투명 백그라운드를 지원하는 특성 덕분에 다른 백그라운드 위에 그래픽을 얹는 경우 유용하다. 이 형식은 무손실 압축을 사용하므로 이미지 디테일 손실이 전혀 없고 결과적으로 JPEG 형식보다 더 고품질 이미지를 생성하지만 파일 크기는 JPEG에 비해 더 커진다 PNG-24는 더 많은 색을 지원하며 부분적 투명 픽셀도 지원한다 JPEG와 달리 온라인에 게시할 때도 텍스트와 로고를 선명하게 유지하므로 소셜 미디어 표지 이미지에 적합
TIFF	Tagged Image File Format의 약어이며 고품질 이미지 인쇄 분야에서 오래 전부터 표준으로 사용되는 형식이다. TIFF는 거의 모든 앱에서 지원되며 포토샵에서 생성한 레이어를 지원할 수 있다
GIF	Graphics Interchange Format의 약어다. 색 수가 제한된 웹 그래픽(예: 웹툰 그림), 투명 배경 또는 애니메이션을 위한 작은 용량의 파일을 생성
PSD	어도비 포토샵과 포토샵 엘리먼트 저장 파일
BMP	윈도우 기반 PC에 널리 사용되는 bitmap 그래픽 파일 형식
ai	어도브 일러스트레이터 기본 저장 파일 (벡터)
svg	Scalable Vector Graphics 의 약자로 웹에서 표현가능한 스크립트가 가능한 다목적 벡터 포맷, 애니메이션 구현 가능 (벡터) 인포그래픽, 챠트, 타임라인등 빅데이터 분석화면에서 등장하는 움직이는 챠트는 거의 svg 파일이 대부분