태그해부학 <img>와 이미지포맷

정의와 사용방법

image의 줄임말로 말 그대로 사진을 넣을 때 사용하는 태그이다.

 

필수 속성으로는 사진의 위치를 넣는 src(source), 대체 텍스트를 넣는 alt(alternate)가 있다.

 

alt속성은 해당 이미지가 별 의미 없는 이미지라면 값을 비워놓아도 된다. 하지만 웹 표준을 위해 꼭 속성은 써줘야 한다.

그리고 alt속성은 아래와 같은 상황이어서 이미지를 불러올 수 없을 때 나타나는 텍스트이다. 이미지를 보지 못하는 시각장애인 분들을 위해 스크린리더가 읽어주는 텍스트이기도 하다.

 

• src 속성이 비었거나 null임.
• src의 URL이 현재 사용자가 보는 페이지의 URL과 같음.
• 지정한 이미지가 손상돼 불러올 수 없음.
• 이미지의 메타데이터가 손상돼 원본 크기를 알아낼 수 없고, <img> 요소의 속성에도 크기를 지정하지 않음.
• 사용자 에이전트가 지원하지 않는 이미지 형식임.

<img src="penguin.png" alt="남극 펭귄 사진" />

 

 

 

이미지 포맷

이미지는 웹 페이지 내에서 차지하는 용량이 매우 크기 때문에, 이미지 포맷을 효율적으로 사용하지 않으면 웹 페이지가 매우 무거워질 수 있습니다. 참고로 이미지 포맷이라는 것은 이미지를 압축하는 방식을 말합니다.

 

jpg

- 정지된 사진을 위해 만들어진 손실 압축 방법

- 사진 이미지에서 주로 사용한다.

- 손실되는 방식이기 때문에 원본 파일을 저장하는 데에는 적합하지 않다.

 

gif

- 비 손실 방식이다.

- 색을 최대 256개만 사용 가능하기 때문에, 색상이 많은 사진을 표현하기에는 적절하지 않다.

- 색이 적은 사진이나 로고는 jpg보다 선명하게 표현이 가능하다.

- 애니메이션 구현이 가능하다.

 

png

- 특허권에서 완전히 자유롭지 못한 gif의 대안으로 나온 방식

- png 8비트와 png 24비트가 존재한다.

- png 8비트는 애니메이션 구현을 제외하고 gif와 동일하다. 그리고 압축률이 gif보다 더 높다.

- png 24비트는 풍부한 색 표현이 가능하고 투명도도 표현 가능하지만 용량이 크기 때문에 8비트로 가능하다면 최대한 8비트로 표현하는 것이 좋다.

 

svg

- 벡터 방식

- 이미지가 깨지지 않는다.

 

 

참고 자료

이미지 포맷