wish me luck

BMP, JPG 등 이미지 이름 끝에 붙는 확장자들을 보면서도 우린 무슨 차이가 있는지 알지 못합니다. 그래서 그 차이를 설명하려고 합니다.

1. BMP ( Microsoft Windows Device IIndependent Bitmap )

: DOS와 윈도우 호환 컴퓨터에서 사용되는 Bitmap 이미지이다. 압축을 지원하지 않아 지나치게 높은 파일 용량이 문제가 되어 웹용 이미지에 적합하지 않다는 단점이 있다. 최근 BMP 파일도 압축을 지원하기 시작했다.

2. PNG ( Portable Network Graphics )

: 배경이 투명한 파일을 만들거나 저장할 때 많이 쓰이며 색상을 최대한 그대로 유지할 수 있기 때문에 최근에 많이 쓰이고 있다. 단점이 있다면 색상을 그대로 유지시키는 만큼 파일 용량이 크다.

3. GIF ( Graphic Interchannge Form )

: JPG나 PNG 파일 형식과 비교했을 때 파일 크기가 작다는 장점이 있으며, 투명한 배경과 움직이는 이미지를 만들 수 있다는 장점이 있다. 단점으로는 표현할 수 있는 색상 수는 최대 256가지 뿐이다. 그래서 웹 페이지에서는 아이콘이나 불릿 등 작은 이미지에 주로 사용하고 있다.

4. JPG, JPEG( Joint Photographic Experts Group )

: 사진을 웹 페이지에 넣기 위해 개발된 형식이다. 컴퓨터에서 저장할 때나 디지털 카메라에서 저장할 때 많이 쓰이는 확장자이다. JPG와 JPEG 차이는 없으며 정식 명칭은 JPEG 이지만 윈도우와 도스에서는 확장자가 3자리로 표시되어 JPG로 쓰인 것이다.

5. PSD ( Periscope Debugger Definition )

: 포토샵에서 저장할 때 쓰는 확장자이다. 포토샵에서 작업을 했을 때 사용한 레이어들을 하나하나 다시 사용할 수 있기 때문에 계속된 작업이나 수정을 할 때 중요하다. 다른사람이 사진을 수정할 수 있게 하고 싶다면 사진과 함께 PSD 파일을 주면 좋다.

6. TIFF ( Tagged Image File Format )

: TIFF는 무손실 압축방식의 파일이다. 최대한 원본 그대로 보존해야하는 중요한 이미지에 쓰는 확장자이며 데이터 손실이 최소화 된다. 단점으로는 용량이 매우 높기 때문에 많이 사용하진 않는다.

7. SVG (Scalable Vector Graphics )

: 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일형식이다. 이미지 또는 이미지에 채도, 투명도 등을 더하면  XML 텍스트 파일로 정의되어 검색화, 목록화, 스크립트화가 가능하며 압축 역시 가능하다.

AI, PXR 등 여러가지 이미지와 관련된 확장자들이 있습니다. 

그렇지만 '이 확장자가 제일 좋다' 라는 것은 없습니다. 물론 자주 쓰이는 확장자들은 있습니다. PNG, GIF, JPG, PSD 가 대표적으로 많이 쓰이는 확장자들이죠. 그 외의 것들이 나쁘다라는게 절대 아닙니다. 사용자의 용도에 맞게 사용하는 것이 가장 중요하며 그러기 위해 많은 확장자들이 존재하는 것이 아닌가라는 생각이 듭니다.

<img> 태그에 있는 usemap 속성을 이용하면 하나의 사진에 구역을 나눠 서로 다른 사이트로 향하는 링크를 만들 수 있습니다.

ex)

<img src="사진.png" alt="" usemap="#네임이름">

<map name="네임이름">

<area shape="rect" coords="시작x좌표,시작y좌표,끝x좌표.끝y좌표" href="주소">

<map name="네임이름">

<area shape="rect" coords="시작x좌표,시작y좌표,끝x좌표.끝y좌표" href="주소">

</map>

실제로 해보겠습니다.

(유즈맵 적용 전 사진)

(유즈맵 적용 후 사진)

이미지맵을 적용하기 전 사진에서는 마우스를 사진에 올렸을 때 마우스 포인터에 아무런 변화가 없지만

이미지맵을 적용한 후 사진에는 사진박스, 네이버박스, 다음박스에 마우스를 올렸을 때 포인터가 변하는걸 볼 수 있으며

클릭시 해당 사이트로 이동하는 것을 볼 수 있다.

적용 소스

<img src="https://t1.daumcdn.net/cfile/tistory/2451BA4C596D6FFE1B" alt="" usemap="#named">

<map name="named">

<area shape="rect" coords="22,19,225,209" href="http://wishml.tistory.com/1">

<area shape="rect" coords="255,80,435,135" href="http://wishml.tistory.com/2">

<area shape="rect" coords="255,160,435,208" href="http://wishml.tistory.com/4">

</map>