HTML에서 이미지 불러오기, gif jpg png 차이

<img>는 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그 입니다.

 

<img src="http://placehold.it/500x250" alt="피자" width="250">

 

src 속성

<img>의 필수 속성으로 이미지의 경로를 나타내는 속성입니다.

상대경로는 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로이다.

./ 현재 페이지가 있는 폴더를 나타낸다.

../ 상위 폴더로 한번 이동하는 명령

하위폴더/이미지명

 

 

절대경로는 실제 그 이미지가 위치한 곳의 전체 경로입니다.

 

alt 속성

이미지의 대체 텍스트를 나타내는 속성입니다.

대체 텍스트는 이미지를 대체하는 글을 뜻하며, 웹 접근성 측면에서 중요한 속성입니다.

src 속성과 더불어 반드시 들어가야 하는 속성입니다.

 

width/height 속성

이미지의 가로/세로 크기를 나타내는 속성입니다.

값의 단위는 필요하지 않으며, 값을 입력하면 자동으로 픽셀 단위로 계산됩니다.

width/height는 선택적인 속성이지만 이미지의 크기가 고정적이라면 width/height 속성을 선언하는 것이 성능적인 측면에서 좋습니다.

width/height 속성이 없으면 이미지는 원본 크기대로 노출되며,

둘 중 하나만 선언하면 나머지 한 속성은 선언한 속성의 크기에 맞춰 자동으로 비율에 맞게 변경됩니다.

반면 두 속성 모두 선언하면 이미지는 비율과 무관하게 선언한 크기대로 변경됩니다.

 

 

 

---

이미지 파일 형식

• gif : 제한적인 색을 사용하고 용량이 적으며 투명 이미지와 애니메이션 이미지를 지원하는 형식
• jpg : 사진이나 일반적인 그림에 쓰이며 높은 압축률과 자연스러운 색상 표현을 지원하는 형식(투명을 지원하지 않는다.)
• png : 이미지 손실이 적으며 투명과 반투명을 모두 지원하는 형식