size="2">9. HTML에 사용되는 이미지의 종류와 특성

이번 강좌에서는 HTML 문서에서 표현되는
Image의 종류와 특성에 대해서 알아보겠습니다. Image의 특성을 알면
홈페이지를 위한 Image를 제작하거나 사용할 때 도움이 될 겁니다.

홈페이지 제작에 사용되는 Image는
GIF, JPG, PNG 세가지가 있습니다.

1) GIF

• 
  
• 256 칼라를
  지원한다.
  
  
• GIF87a와
  GIF89a 두 가지 Image 형식을 지원한다. 
  
  
• 투명효과를
  적용할 수 있다.
  
  
• Animation을
  만들 수 있다.
  
  

최초 GIF에서 좀 더 깔끔한 이미지를
만들기 위해 GIF89a 형식이 추가되었습니다. GIF89a 형식은 기존의 GIF가
가지고 있는 특성에 투명효과와 Animation 기법을 도입한 것입니다.

요즘 웹 서핑을 하다보면 배너광고가
많이 있죠? 한번 다운로드 받아보세요. 아마 대부분이 GIF 형식일 겁니다.
Animation을 지원하는 이미지라면 gif 타입이라고 보심 됩니다.

2) JPG

• 
  
• 트루 칼라를
  지원한다.
  
  
• 파일의 크기를
  임의로 조절할 수 있다.
  
  
• 트루 칼라를
  지원하면서도 용랑이 작다.
  
  
• 포트폴리오나
  사진과 같은 고화질의 이미지 처리에 적합하다.
  
  

웹 서핑을 하다가 사진이나 풍경같은
그림을 다운로드 받아보세요. 아마 대부분이 JPG 형식일 겁니다.

3. PNG

• 
  
• GIF와 JPG
  형식의 장점을 보안하여 개발된 이미지 파일 형식이다.
  
  
• 알파 채널을
  이용한 투명 및 모자이크 효과를 지원한다.
  
  
• 트루 칼라를
  지원하면서도 용량이 작다
  
  
• 익스플로어와
  넷스케이프 4.0 이상에서만 지원된다.
  
  
• 익스플로어와
  넷스케이프 4.0 이하 버전에서는 플러그인을 설치해야 한다.
  
  

Image 파일의 사이즈와 홈페이지
전송속도는 반비례합니다. Image 파일의 사이즈가 넘 크면 홈페이지
로딩이 무지 느려지겠죠.

4. Image 용량 줄이기

• 
  
• 이미지의
  크기를 가능한 작게 하기.
  
  
• 이미지에
  사용되는 색상을 최소한으로 줄이기.
  
  
• 큰 용량의
  이미지는 잘라서 Table을 사용하여 꾸민다.
  
  

이미지의 용량이 너무
크면 페이지의 로딩 속도가 상당히 느려집니다. 화려한 홈페이지 보다는
적절한 조화가 필요할 것 같습니다.

방문객의 입장으로서
화려한 홈페이지 보다는 로딩이 빠른 홈페이지를 선호하지는 않을까
하는 생각을 합니다. 일반적으로 네티즌이 클릭했을 때 3초가 지나도
아무런 변화가 없다면 지루함을 느낀다고 하는군요.