3.16. 이미지 최적화(Image Optimize)

제3장 웹 그래픽 기능 익히기 > 3.16. 이미지 최적화(Image Optimize)

파이어웍스에서 편집한 이미지를 웹 페이지에 담기 전에 가장 최적의 상태로 만들어줍니다.

웹 브라우저를 볼 수 있는 그림 파일은 Gif, Jpg, Png(넷스케이프 구버전에는 보이지 않음) 형식 뿐입니다.

웹페이지는 근본적으로 통신선로망을 타고 이동하는 것이기 때문에 같은 내용의 이미지를 보는데 상대적으로 많은 시간을 보내야 한다면 이것은 낭비 요소가 아닐 수 없습니다. 통신 사용자 입장에서는 신속한 전달이 가장 반가운 일이라고 할 수 있습니다.

일반적으로 가장 많이 사용되는 Gif와 Jpg 형식 중에서 현재 편집 중인 파일이 어떤 형식으로 저장되어야 질적으로 뛰어나며 가장 적은 용량을 차지할 것인지를 확인해보는 방법을 알아봅니다.

3.16.2. 최적화 전에 알아둘 상식

1) 벡터 도구로 그려진 단순한 색상의 이미지라면 Gif 형식이 좋습니다.
2) 총천연색(컬러) 사진은 Jpg가 유리합니다.
3) 움직이는 그림(애니메이션)이라면 당연히 Gif 형식이어야 합니다.

3.16.3. 이미지 최적화 방법

다음과 같은 그림을 편집하였다고 합시다.

이 그림은 단색의 텍스트 요소와 천연색 사진이 합쳐진 이미지입니다.

파이어웍스에서 최적의 이미지를 얻어내기 위해서는 캔버스 위에 있는 [미리보기]와 [최적화] 패널을 연동시켜 보면 간단하게 그 해답을 얻어낼 수 있습니다.

먼저 캔버스 위의 [미리보기] 탭을 눌러 보십시오.

 

이 그림의 경우는 [최적화] 패널에서 JPEG 형식으로 저장한다는 설정을 해둔 상태입니다.(물론 이것은 최종적인 것은 아닙니다.)

파일의 용량은 35.56K이고 56kbps 모뎀에서 이 그림을 전송 받는데 걸리는 시간이 5초라는 계산이 나와 있습니다.

아무래도 좀 부담스런 소요 시간입니다. 이 그림 하나 보자고 무려 5초씩이나?? 하는 생각을 할 수 있죠!
그렇다면 좀더 전송 시간을 단축시킬 수 있는 방법은 없을까? 
[최적화] 패널에서 설정치를 바꾸어 보죠.

[설정]에서는 파일의 형식을 선택할 수 있습니다. 
JPEG 파일의 경우는 [품질]을 조절해서 파일의 용량을 감소 혹은 증가시킬 수 있습니다. 수치가 클수록 파일 용량은 커집니다. 
'품질'의 수치를 올리거나 내려서 미리보기 그림을 보십시오. 수치를 50 이하로 내리면 그림이 많이 깨지는 것을 알 수 있을 것입니다. 그러나 전송 시간은 단축되는 것으로 나타납니다.
다음 그림은 품질을 '30'으로 설정하였을 때의 모습입니다.

GIF의 경우는 파일의 용량을 좌우하는 주요소는 색상수입니다. 128 혹은 256 등 색상의 수에 따라 달라진다는 의미입니다.
그러나 파일 용량만 무작정 줄이다가는 화질이 엉망이 되어버릴 가능성이 있으므로 적절한 선에서 판단을 해야 합니다.

'설정' 항목에 보면 최적화 가능 형식으로 다음과 같은 것들이 있음을 볼 수 있습니다.

3.16.4. '4등분' 미리보기를 이용한 이미지 최적화

어떤 형식으로 내보내기를 하는 것이 최적인가를 쉽게 판단할 수 있는 창이 미리보기의 [4등분]입니다.

화면을 4개로 쪼개어
에서 원본 파일을 보여줍니다.
나머지 창에서 각각 파일 다른 설정을 하여 미리보기를 해볼 수 있습니다.


에서는 [최적화] 패널에서 'GIF 응용 256' 형식을 선택한 경우입니다. 사진은 거의 원본 상태를 유지하고 있지만, 나머지에 비해 용량이 상대적으로 많습니다.


에서는 [최적화] 패널에서 'JPEG - 작은 파일' 형식을 선택한 경우입니다. 글과 사진이 원본에 비해 많이 뭉개졌습니다. 그러나 용량은 상대적으로 아주 적습니다.


에서는 [최적화] 패널에서 'JPEG - 고품질' 형식을 선택하고 '품질'을 '80'으로 설정한 경우입니다. 사진은 거의 원본 상태를 유지하고 있고, 나머지에 비해 용량도 적절합니다. 

이 이미지의 경우는 결국 JPEG 형식이 최상의 선택이 되겠군요. GIF는 화질이 떨어질 뿐만 아니라, 파일 크기가 JPEG보다는 제법 많이 크다는 것을 확인할 수 있습니다.

그렇다면 최종적으로 JPEG의 '품질' 수치를 약간 낮추어서 전송시간을 단축시킬 수 밖에 없겠다는 결론이 나오게 됩니다.



[선택된 보기] 미리보기를 선택하고(그림을 클릭하면 검정색 테두리선으로 선택되었음을 표시함), [원본] 탭을 클릭해서 편집을 계속하거나 [내보내기] 작업을 합니다.