img 태그에 관해서

이미지 태그.

        웹 페이지를 작성하다 보면 아래와 같은 이미지 태그를 자주 사용하게 된다.

  <img src="./images/lightblue.jpg">

  브라우저는 어떤 순서로 이미지를 보여줄까? 아래의 그림을 보면 순차적으로 하나씩 하나씩 브라우저가 체크

  하고 서버에 요구하여 받아내고 있는걸 알 수가 있다.

만약 이미지 파일이 많다면 당연히 속도는 떨어질 것이다 ( 어떤 브라우저는 이미지 파일을 다 받은후 한번에 표시하기도 한다. ) 

종류

	JPEG	GIF	png
이미지 종류	사진 같은 이미지	단색 / 로고 / 클립아트 / 텍스트	JPEG와 GIF 모두를 지원
표현 가능 색	1600만 개의 색 표현	256개의 색 표현
압축	손실 압축 : 약간의 정보를 버리고 파일 크기를 감소	무손실 압축 : 사이즈를 줄여 압축될 수 있으며 아무것도 버리지 않는다.
투명도	지원 안함	가능

이미지 파일이 존재 하지 않을때를 위한 alt 태크

<img src="http://www.headfirstlabs.com/trivia/pencil.gifd" alt="Pencil line 35 miles long">

만약 해당 이미지 파일이 사라졌다면? 텍스트로 대체한다. 

위의 코드처럼 alt 속성을 이용하면 이미지 파일이 깨지거나 존재 하지 않을때 alt 속성에 지정한 텍스트가 표시된다.

width / height 태그

<img src="http://www.headfirstlabs.com/trivia/pencil.gif" 

alt="Pencil line 35 miles long"

width="48"

height="100">

width  와  height 속성을 이용하여 이미지 크기의 가로 세로 픽셀 수를 지정할 수 있다.

이미지의 크기를 이미지툴(포샵)로 수정하지 않고 width/height 속성으로 제어할 경우

브라우저의 속도는 감소된다. 이유는 어차피 브라우저는 전체 이미지를 다운받아서 거리다

width 와 height 까지 계산에서 뿌려줘야 하기 때문이다.