웹에서 사용하는 이미지 유형

이미지 태그에 이미지를 삽입하는 방법에는 프로젝트 내부의 이미지를 삽입하는 방식과 외부의 소스를 불러와 작성하는 방법으로 나뉩니다.

그런데 파일을 불러와 삽입하는 것이다 보니 파일의 유형에 따라 어떤 것은 정상적으로 출력이 되고 어떤 것은 정상적으로 출력되지 않을 수도 있습니다.

또한 지원여부는 대체로 사용하는 웹브라우저에 따라 다를 수 있기에 각 브라우저가 어떤 이미지를 지원하는지를 알아두는 것도 좋습니다.

Abbreviation	MIEE type	File extension(s)	Summary
JPEG	image/ jpeg	.jpg / .jpeg/ .jfif / .pjpeg/ .pjp	정지 이미지의 손실 압축에 적합합니다.(현재 가장 많이 사용됩니다.)
PNG	image/png	.png	PNG는 원본 이미지를 보다 정확하게 보여주거나 투명도가 필요한 경우 JPEG보다 선호됩니다.
GIF	image/gif	.gif	여러장의 이미지로 만들어진 애니메이션 표현 가능합니다.(움짤) 단, 지원되는 컬러범위가 적어 화질이 조금 떨어집니다.
WEBP	image/webp	.webp	구글이 만든 이미지 포맷. 품질, 압축률 등이 훨씬 우수하나 지원 브라우저가 제한적입니다. 브라우저지원확인.
SVG	image/svg+xml	.svg	다양한 크기로 정확하게 그려야 하는 아이콘, 다이어그램 등에 사용됩니다.