홈페이지에 이미지 넣기 (4)


우리는 앞에서 이미지를 어떻게 홈페이지에 삽입할 것인가에 대해서 몇가지 살펴 보았습니다. 홈페이지를 만들때 흔히 쓰는 이미지 파일형식에는 여러 가지가 있지만 보통 GIF와 JPG, PNG등이 있습니다. 순서가 뒤바뀐 느낌이 있지만 이번 시간에는 이미지를 구하는 방법 및 이미지 형식에 대해서 살펴볼까 하는데요. 물론 다 아시겠지만.. 초보자분들을 위해서 한번 정리해 보았습니다.


1. 이미지 구하는 방법



이미지를 홈페이지 넣기 위해서는 이미 만들어진 이미지( photo CD, 상업용 으로 판매 되고 있는 이미지)를 쓰거나 아니면 직접 제작(자신의 사진이나 스스로 그린 이미지)을 해야합니다.
  • 본인이 직접 카메라로 원하는 이미지를 찍어서 스캔을 하거나 디지탈 카메라를 이용해서 사진파일을 구합니다.
  • 또는 웹서핑을 하다가 이쁜 그림을 발견하면 이것을 내 컴퓨터에 저장하여 이용하는 방법입니다.
  • 위의 두가지 방법으로 구한 이미지를 포토샵이나 페인트 샵 등을 이용해서 이쁘게 다시 꾸며 이것을 홈페이지에 넣으시면 됩니다. 홈페이지에 이용할 수 있는 이미지의 종류에는 아래와 같은것이 있습니다.

    1. 디지털 카메라도 촬영된 이미지
    2. 스캐너를 이용한 사진의 디지털화
    3. 자신이 직접 제작한 이미지
    4. 인터넷이나 PC통신 상에서 다운로드한 이미지


※ 이곳에서는 인터넷에서 이쁜 그림을 저장하는 방법에 대해서 알아보겠습니다.

웹서핑 중에 괜찮은 그림이 있으면 그 그림위에 마우스를 대고 오른쪽 버튼을 클릭한 뒤~! 그러면 메뉴가 뜨죠? 이곳에서 다른이름으로 그림 저장을 합니다..
여기서 저장할 이미지 폴더를 한 개 만들어서 홈페이지에 이용할 그림들을 모두 이곳에 넣어 둡니다. 파일 이름은 "gif, 혹은 jpg" 로 정해주는데요. 파일명은 되도록이면 영어명으로 하는것이 더욱 좋습니다. 한글 파일명 보다는 이미지가 빨리 뜬다고 하네요.
자~~!! 이렇게 구한 이미지를 그래픽 프로그램을 이용하여 입맛에 맞게 편집한 다음,(img src="이미지 파일명") 이런 태그를 써서 홈페이지에 이미지를 넣으시면 됩니다.
만약 그림을 저장하지 않고 웹에 있는 그대로 불러오려면 그림의 주소를 알아내어 그 주소를 img태그 내에 적어주면 됩니다.
방법은 이렇습니다. 인터넷을 항해하시다가.. 멋진 그림을 발견하셨죠? 이때 바로 그림 위에 마우스를 위치하시고 우측 버튼을 눌러보세요. 우측버튼 맨 아래쪽을 보시면 "등록정보"가 보이실겁니다. 이걸 "콕" 찍으세요. 그러면 위와 같은 창이 한 개뜹니다. 그곳의 주소(URL)을 복사하신 다음, 태그 안에 그 주소를 넣으시면.. 그림이 들어가게 된답니다.
이렇게 말이예요. (img src="그림의 주소") 어때요? 멋지죠?



2. 그래픽 파일 포맷

GIF

  1. GIF(Graphics Interchange Format)그래픽 포맷은 네트워크상에서 가장 많이 보급되어 사용되는 그래픽 압축 포맷입니다.
  2. GIF는 CompuServe사에서 개발했다고 하여 CompuServe GIF라고 불리기도 합니다.
  3. 1987년 GIF87이라는 오리지널 포맷이 나오게 되었습니다. 그 이후, 약간 수정이 되어 GIF87a, 그 다음으로 GIF89a라는 것이 등장하여 지금껏 많은 사람들이 사용해 오고 있습니다.
  4. 특성을 보면 GIF87은 압축포맷이라는 것, GIF87a는 인터레이스(Interace)를 지원하게 되었고, GIF89a는 인터레이스(Interace)와 Transparency를 지원하게 되었습니다.

압축할 때 유의할 점

GIF파일은 256색만을 지원합니다. 그래서 많은 색들이 요구되는 사진이나 그림 등을 저장할 때는 적합하지 않은 포맷입니다. 단순한 작업으로 이루어진 색상이나 선, 아이콘에서 그 기능을 제대로 활용할 수 있습니다.
JPG

  1. JPG(Joint Photographic Experts Group)이라 하여 JPG에서 표준화된 그래픽 포맷으로 사진 등 색이 많은 그래픽을 압축할 때 그 기능이 제대로 드러납니다.
  2. JPG는 압축률이 가장 높은 압축방식이지만, 압축률이 높은 대신(육안으로 거의 식별 못함)이미지에 약간의 손상이 주어지기때문에 전문적인 포스터같은 것을 제작할 때는 잘 사용하지 않는 포맷방식입니다.
  3. JPG방식은 압축을 할 때마다 이미지에 손상을 주기때문에 필수적으로 원본을 남겨 놓아야 합니다.
  4. Progressive JPG란?
    이것은 웹에서 그래픽을 전송할 때 결과를 눈으로 확인할 수 있도록 위에서 아래로 천천히 읽어 내려가는 방식의 포맷입니다.

압축할 때 유의할 점

원래 JPG는 사진 그래픽을 압축하기 위해 만들어진 포맷이므로 256이상의 색을 압축할 때 사용하는 것이 좋습니다. 즉, 적은 색상에서 사용하게 되면 용량이 터무니없이 커지는 경우가 있기때문에 아이콘이나 선과 같이 2~3가지색으로 만들어진 그래픽 압축에서는 사용하지 않는 것이 좋습니다. 참고로 JPG는 Interlace와 transparency를 지원하지 않습니다.
PNG

GIF, JPG는 웹이라는 특성상 속도에 민감한 부분을 해결하기 위해서 압축 형식으로 만들어진 그래픽 이미지 파일포맷이며, 현재 인터넷에서 널리 사용되고 있는 GIF 형식을 조만간 대체할 것으로 예상됩니다.
  1. PNG(Portable Network Graphics) 파일은 "핑"이라고 불리며, GIF 압축 알고리즘이 IBM과 UNISYS사에 의해 독점되고 있기 때문에 로열티 문제를 해결하기 위해서 개발된 것입니다.
  2. GIF와 같이 PNG 파일도 품질 손실 없는 방법으로 압축됩니다.(이것은 압축을 해제하면, 모든 이미지 정보가 복원된다는 뜻입니다.)
  3. 현재 플래시에서도 높은 압축률과 알파채널을 그대로 유지한다는 특성때문에 아주 많이 사용되고 있는 이것은 GIF보다 나은 압축률과 트루컬러(True Color)가 지원되고, GIF보다 확장된 Full alpha blending지원이 단연 특징이라고 할 수 있습니다.
  4. 아직 Animation 기능을 지원하지 않는다는 것이 다소 아쉽기는 하지만 Netscape4.0 Explorer4.0버전부터 이미지를 삽입하면 GIF와 JPG처럼 무난하게 볼 수 있습니다. 단, 그 이하의 웹 브라우저 버전에서 보려면 플래시나 디렉터처럼 Plug-in을 사용해야만 볼 수 있습니다.
  5. PNG 형식의 특징.
    • 단 하나의 투명색만을 만드는 것이 아니라, 투명도 자체를 조절할 수 있다 (이것을 "불투명도"라고 부른다)
    • 인터레이싱 이미지 기능이 제공되며, GIF 형식에 있는 것보다 더 빠르게 나타난다.
    • 감마교정 기능이 있어, 특정 디스플레이 제작회사에 의해 요구되는 색상 밝기의 형태로 이미지를 보정할 수 있다.
    • 이미지는 GIF에서 제공되는 팔레트 및 그레이스케일 형식은 물론, 트루컬러를 사용하여 저장될 수 있다
  6. PNG의 자세한 내용은 이곳을 참조하세요.

압축할 때 유의할 점

PNG파일은 넷스케이프, 익스플로러 4.0 이상에서 지원합니다. 만약 4.0 이상의 브라우저가 아니라면 볼 수 없다는 한계가 있습니다.