본문 바로가기

HTML

이미지(img)종류

♡뱅크스토리 입니다.♡

 

이미지 관련 태그에 앞서 홈페이지에서 많이 사용되는 그림 파일 확장자에 대해서 간단하게 차이점을 알아 보도록 하겠습니다. 디지털 이미지는 픽셀 기반(pixel-based)과 벡터 기반(vector-based)으로 크게 두가지 형태로 나눌수 있고,  주로 쓰이는 파일 확장자에는 jpg, gif, bmp, png 등이 있습니다.

 

Joint Photographic Expert Group(jpeg.jpg)
1986년 ISO와 CCITT가 공동으로 만든 위원회 이름인데 컬러 정지 화상의 압축 방식을 이렇게 부르는 경우가 많습니다. 이 방식은 정지 화상의 국제 표준입니다. 품질의 저하를 가능한 줄이면서 데이터 용량을 압축하는 것으로 단순한 화상에서 20~50%, 복잡한 것에서 70~80%로 압축할 수 있습니다. 이 방식의 단점은 처리 시간이 많이 걸려 동영상에는 사용할 수 없으며, 여러번 압축을 할 경우 이미지의 품질에 손상을 줄 수 있습니다.

 

Graphics Interchange Format(GIF)
CompuServ에서 개발한 화상 파일 포맷입니다. 컬러 정지 화상을 압축하는 방식의 하나로 GIF 파일 확장자는 *.gif이고 웹의 표준 그래픽 파일 형식으로 256컬러 이하의 그래픽 파일에 많이 사용됩니다. 넷스케이프에서 기본적으로 처리하는 이미지 파일 형식입니다. 모든 컴퓨터에서 사용할 수 있으며, 특히 애니메이션을 표현하는데 많이 사용합니다.

 

BMP(Microsoft Windows Device Independent Bitmap)는 주로 '*bmp'와 같은 확장자 형태로 붙어있는 그래픽 파일 포맷 형식을 말합니다. 윈도우 또는 OS/2 환경에서 사용되는 비트맵 데이터를 표현하기 위하여 마이크로소프트에서 정의하고 있는 비트맵 그래픽 파일 형식을 말합니다.
그래픽 파일 형식중에 가장 단순한 구조를 가지고 있고 압축 알고리즘이 원시적이어서 같은 이미지를
저장한다고 가정했을때 다른 포맷 방식에 비해 파일 크기가 매우 크다는 단점을 가지고 있습니다.
장점이라면 화질 자체는 BMP가 가장 좋습니다. 결론적으로 말하자면 BMP는 Bit map입니다. 따라서, 컴퓨터에서 이미지들을 저장하는 방식이고, BMP확장자는 그림 파일이 아니란 겁니다.

 

Portable Network Graphics(PNG)
웹에서 최상의 비트맵 이미지를 구현하기 위해 W3C(world wide web consortium)에서 제정한 파일 포맷.  넷스케이프 네비게이터 4.0이나 인터넷 익스플로러 4.0부터 이를 지원하고 있다. 보통 핑이라고 발음하며, 웹상의 표준 이미지 파일 포맷인 GIF의 대안으로 개발되었습니다.
이 포맷은 24바이트의 이미지를 처리하면서 어떤 경우는 GIF보다 작은 용량으로도 이미지 표현이 가능하고 원 이미지에 전혀 손상을 주지 않는 압축과 완벽한 알파 채널(alpha channel)을 지원하는 등 이전에는 불가능했던 다양한 기능들을 포함하고 있다. 하지만 아직 이 포맷을 주관 포맷으로 지원하는 사이트들이 거의 없고 이미지 편집 프로그램들에서도 많은 지원이 이루어지지 않고 있기 때문에 GIF나 JPG를 이 포맷이 100% 대체하기에는 다소 시간이 걸릴 듯 합니다. 스마트폰 배경화면에 쓰려면 손실과 용량이 적은 PNG가 가장다고 할수 있습니다.

 

 

픽셀기반

픽셀, 그림, 페인트(paint)은 다수의 픽셀(화소)에 색을 입혀 그림을 표시하는 방법입니다. 비트맵 그림(bitmap images)이라고도 부르는데. 컴퓨터의 기본 단위인 비트가 맵(지도)처럼 펼쳐저 있어서 비트맵이라고도 부릅니다. 이런 픽셀기반을 다루는 프로그램으로는 Adobe Photoshop Pro, Image Ready 등과 윈도우에서 기본제공하는 그림판이 있습니다.

 

<그림1>이 픽셀 기반의 그림입니다. 한칸한칸이 모여 하나의 그림이 되는거죠. 하나의 픽셀은 한번에 하나의 색을 띄고요(물론 사진이 바뀌면 픽셀은 다른색을 표시 하겠죠) 단, 픽셀 그림을 확대하거나 픽셀수가 적을 경우 위와 같이 계단현상 일어납니다. 픽셀수가 늘어나면 파일 크기 역시 증가 합니다.

현재 우리가 사용하는 웹 브라우저는 기본적으로 픽셀 그림인 jpg, gif, png 만 지원합니다.

 

벡터기반

벡터 그림은 벡터 수식을 이용하여 그림으로 나타내는데, 드로윙(Drawing)기반이라고 부릅니다. 즉, 점과 점을 찍고 그 점들을 이어 선으로 만드는 형태입니다. 주요 프로그램으로는 Macromedia Flash, Macromedia Director, Adobe Illustrator, Corel Draw, AutoCAD 등이 있습니다.

 

이미지 크기를 변화해도 화질에 변화 없으므로, 패턴이 반복되는 그림 그릴 때 적절합니다. 파일 크기가 작으며 해상도와 무관하기 때문에 현수막등 대형이미지가 필요할때도 용이하답니다.

 

<그림2>는 좌측 그림이 픽셀기반이고, 우측 그림이 벡터 기반의 그림입니다. 비압축 파일은 bmp 이고, 압축파일은 jpg, gif, png 입니다.

웹 브라우저에서 많이 쓰이는 압축방식은 gif, jpg, png 인데요. png는 요즘 웹에서 많이 쓰이는 압축방식인데, jpg 등 보다 압축률이 좋고 로열티가 없다고 합니다. gif, jpg 등을 만든 회사에 우리나라 기업들이 로열티를 지불하는데 png는 그럴 필요없다고 합니다.

이외에도 많은 압축방법이 존재 하는데, 여기에서 말하는 압축이란? 알집이나 빵집 같은 프로그램을 통한 압축이 아니고, 그림 파일내에 같은 패턴으로 반복 하는 것을 단순화 시키는 것을 말합니다.

 

<그림3>그림을 디지털 수치로 본다면 좌측이 무압축(bmp)방식이고, 우측이 반복되는 패턴을 단순화 시킨 압축(jpg, gif 등) 방식입니다.

 

 

♡뱅크스토리 입니다.♡

 

 

010-7249-0202

'HTML' 카테고리의 다른 글

이미지 경로  (0) 2014.06.14
테이블 기본 구조  (0) 2014.06.09
HTML 요소(Element)  (0) 2014.06.05
글자 관련 태그  (0) 2014.06.04
HTML 기본  (0) 2014.05.27