메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

그림을 GIF로 저장할 것인지 JPEG(JPG)으로 저장할 것인지는 그림에 따라 다르다. GIF 그림이 특수효과 때문에 널리 쓰이지만, JPEG(JPG)으로 저장하면 세밀한 그림, 생생한 톤 등이 훨씬 뛰어나다.

1. GIF는 많은 브라우저에서 지원된다.

GIF는 많은 브라우저에서 내장 이미지로 읽혀질 수 있기 때문에, 웹 페이지 디자이너가 가장 많이 사용하는 파일 형식이다. 내장 이미지는 읽어서, "보조 응용" 이라는 다른 부가적인 보기 프로그램으로 봐야 한다.

넷스케이프는 JPEG 이미지를 내장 그래픽으로서 읽을 수 있다. 그러나 다른 대부분의 브라우저는 내장 그래픽으로 되어 있는 JPEG을 무시한다. 링크에 의해 참조되는 JPEG 그림은 보기 프로그램을 띄운 다음 별도의 윈도우에서 볼 수 있다.

2. GIF는 특수 효과에 사용할 수 있다.

GIF 그림은 "투명 GIF(transparent GIF)" 라는 것으로 저장할 수도 있는 8비트 그림이다. 이런 종류의 GIF는 희미한 모습이나 실루엣 등의 효과를 위해 인기가 있다. "비월주사 GIF(interlaced GIF)"는 인기있는 또다른 옵션인데 이것은 비월주사 GIF가 아닌 것에 비해 빨리 다운로드되는 것처럼 보이기 때문이다. 이런 그림은 일단 저해상도로 빨리 그려지고 다운로드가 진행되면서 점차 선명해진다.

3. GIF 그림은 "띠 무늬"가 생길 수 있다.

GIF 그림은 8비트이기 때문에 그림에 "띠 무늬"가 생길 수 있다. 이를 포스터화(POSTERIZED)된다고 말하기도 한다. 이것은 브라우저가 그림을 읽는 방식 때문이며 보통 색이 뭉개지는 형태로 보인다. 세밀한 부분이 많은 그림은 JPEG으로 저장하면 더 좋게 보일 것이다. 8비트 GIF에서 흔히 나타나는 띠 무늬는 JPEG(jpg) 형식에서는 디더링해서 부드러워진다. 파일 형식의 특성을 요약하면 다음과 같다.

※ 형식: GIF
- 장점:
    1. GIF 파일은 많은 브라우저에서 "내장 이미지"로 읽을 수 있다.
    2. GIF 파일은 "비월주사 GIF" 형식으로 저장할 수 있는데 이것은 일반 형식에 비해 빨리 다운로드되는 것 처럼 보인다. 이 경우 그림은 일단 저해ㅏㅇ도로 빨리 그려지고 다운로드가 진행되면서 점차 선명해 진다.
   3. GIF 그림은 "투명 GIF"으로 저장할 수 있다. 이 GIF에서는 지정된 색을 투명한 색을 간주한다. 이것은 CD-ROM에 있는 레오나르도 해다드 로레이로의 LView Pro에서 할 수 있다.

- 단점: 어떤 브라우저에서는 띠무늬가 나타날 수 있다.

※ 형식: jpg(jpeg)
- 장점: 띠 무늬가 없다.
- 단점: JPEG은 다소 디더링된 것처럼 보이며, 상당수의 브라우저에서 내장 이미지로 읽을 수 없다.

4. JPEG은 24비트 색용으로 개발되었다.

JPEG 압축 알고리즘(Joint Photographic Experts Group에 의해 개발된)은 사실은 24비트나 32비트 색상을 위해 개발된 것이다. 이미지를 압축할 때, 이 "손실형의" 알고리즘은 일부 정보를 손실한다.

만일 웹 디자이너가 그림을 8비트로 감소시키고 그것을 JPEG으로 저장한다면? 웹에서 사용되는 대부분의 컬러 모니터는 8비트이므로, 웹 페이지 상의 24비트 이미지는 지나치게 크며 색상 정보를 낭비하게 된다. 8비트 JPEG 이미지는 8비트보다 많아 보이는 정보를 저장하게 되며, 인쇄 시에는 화질의 손상이 눈에 띄겠지만, 화면 상에서는 그렇지 않다.(참고: JPEG 이미지를 JPEG으로 두번 저장하지 말기 바란다. 그러면 이미지의 화질이 심하게 떨어진다.)

웹 그래픽을 8비트로 줄이고, JPEG(jpg)으로 저장한다. 24비트 RGB 이미지 원본은 나중에 편집할 때를 대비해 보관해 놓는다. (포토샵의 경우에는 포토샵의 원본파일로 저장하는것도 좋습니다.)

출처: 멀*티*미*디*어 홈페이지 꾸미기 책자에서.. / 김정호*박경호 옮김
        1990년도 책자에서..발행처: (주) 정보시대
번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48028
42 LECTORA - 출판하기 및 파워포인트 불러오기[제14강] [1] 에듀멘 2006.03.14 6030
41 [제15강]모바일용 콘텐츠제작하기 에듀멘 2006.03.17 2969
40 공모전,자료전에 활용하세요[다음강좌 - 3D맥스강좌올려드리겠습니다] 에듀멘 2006.03.21 3015
39 플래시고수님들 ~ fla 파일의 수정방법 (파일첨부) [1] 이순신 2006.04.11 4811
38 [PHP동영상강좌] 프로그래밍 본격 시작 - 01 [1] 펀에듀넷 2006.04.24 3553
37 ZBOARD 왕초보전용 강좌!! 제로보드 설치&제거하기 [2] 이윤규 2006.04.25 6851
36 ● 좀큐티한년유채령 : ))나모 + 포샵 홈페이지 만들기 1탄 [1] file 죽은나비 2006.04.30 7372
35 ● 좀큐티한년유채령 : ))나모 + 포샵 홈페이지 만들기 2탄 file 죽은나비 2006.04.30 6505
34 ● 좀큐티한년유채령 : ))나모 + 포샵 홈페이지 만들기 3탄[마지막] [2] file 죽은나비 2006.05.06 6576
33 ○호랑이에쓰라인作 =// 나모로 홈페이지 만들기 [1탄 노프레임 사이트 만들기] [3] file 호랑이에쓰라인 2006.05.31 7660
32 ○호랑이에쓰라인作 =// 나모로 홈페이지 만들기 [2탄 외부로그인,메뉴.배너넣기] [7] file 호랑이에쓰라인 2006.06.05 6680
31 '별자리를 찿아서' 콘텐츠제작[초등과학] file 윤선미 2006.06.20 3694
30 [드림위버] 드림위버에서 설정한 사이트(Site) 제거하기 file port 2006.10.25 5487
29 [드림위버] 트레이싱 이미지(Tracing Image) 기능을 이용한 밑그림 사용하기 [3] file port 2006.10.25 6881
28 [제로보드강좌]1강. 내컴퓨터에 서버만드는방법(RWAPM 이용) [37] 네찌 2006.12.20 13829
27 [제로보드강좌]2강. MYSQL 데이터베이스추가/유저 추가하기(phpMyAdmin이용) [14] 네찌 2006.12.20 7482
26 [제로보드강좌]3강. 제로보드 설치하기 [22] 네찌 2006.12.20 7783
25 [제로보드강좌]4강. 제로보드 그룹설정 및 살펴보기 [14] 네찌 2006.12.20 7616
24 [제로보드강좌]5강. 제로보드 게시판 설정과 스킨사용법 [21] 네찌 2006.12.21 7494
23 [제로보드강좌]5-1강. 제로보드 게시판 옵션 세팅 방법 [19] 네찌 2006.12.21 7035