본문 바로가기

HTML+CSS 기초 강의 - 8. HTML 문서에서 사용할 수 있는 이미지 포맷 본문

HTML+CSS/기초강의

HTML+CSS 기초 강의 - 8. HTML 문서에서 사용할 수 있는 이미지 포맷

티스토리스킨 웨일더스트 2018.10.30 18:13



웹 표준으로 사용할 수 있는 이미지 포맷은 jpg(jpeg), gif, png, svg 입니다.

간단하게 말하면 이 이미지 포맷이 아닌 이미지 파일은 웹/인터넷에서 사용하면 안됩니다. 사용할 수도 없습니다.


jpg(jpeg)

고해상도 고컬러 이미지를 인터넷 상에 표시하기 위해 가장 널리 사용되는 이미지 포맷입니다.

손실 압축 방식이기 때문에 압축율을 너무 많이 높이면 이미지가 다소 뭉게지거나 흐릿해 보이는 문제가 있습니다.

초고해상도 사진등을 아주 작은 파일 크기로 만들 수 있어 태생적으로 대역폭이나 트래픽 제한이 있을 수밖에 없는 인터넷 환경이나 모바일 환경에 가장 적합한 이미지 포맷입니다.


JPG 압축율에 따른 차이



또, 프로그레시브(Progressive) 저장 옵션이나 베이스라인(Baseline) 저장 옵션을 지원하는 프로그램에서 옵션 체크 후 저장한 경우, 웹에서 이미지를 볼 경우 다운로드된 부분까지만 웹브라우저에 먼저 표시가 됩니다.


Baseline JPEG



Progressive JPEG



다만, gif나 png 이미지와 달리 투명 배경을 지정할 수는 없습니다.


그래픽 프로그램에서 jpg 이미지를 저장할 때 저장 옵션에서 Progressive나 Baseline 옵션을 체크하면 저속도 환경이나 모바일 환경을 위해 웹사이트를 최적화 할 수 있습니다.





gif

가장 널리 사용되는 이미지 포맷으로 무손실 압축 이미지 포맷입니다.

주로 작은 아이콘이나 저해상도 이미지, 컬러수가 적은 이미지, 배경을 단색으로 투명처리해야 하는 이미지에 사용됩니다.

이미지에 사용할 수 있는 컬러 수가 256컬러로 제한되기 때문에 사용한 색상이 많은 이미지(사진 등)를 gif 포맷으로 저장하면 이미지가 심하게 층지어 보이거나 디더(Dither)되어 보이는 단점이 있습니다.


gif 이미지 디더링 확대보기



인터넷이 점차 고컬러, 고해상도 이미지를 쓰는 것이 일반화 되면서 png 포맷으로 대체되어가고 있습니다.

배경색으로 1색상만 사용할 수 있어 그림자 효과를 준 이미지나 경계 테두리가 여러색으로 구성된 경우 배경과 이미지 경계가 거칠어 보이는 단점이 있습니다.

컬러수가 작은 도트 이미지나 아이콘 작업 등에는 아직 많이 사용됩니다.


png

최근 들어 jpg와 함게 가장 많이 사용하는 웹 표준 이미지 포맷입니다.

gif처럼 배경 투명 이미지를 만들 수 있습니다. 배경 투명을 1색상만 지정할 수 있는 gif와 달리 8비트 알파채널을 지원해 256단계까지  반투명 효과를 줄 수 있습니다.


반투명 배경 그림자 효과를 준 이미지 비교



256 컬러만 사용할 수 있는 gif 와 달리 24bit 트루컬러를 지원하며, 8비트 알파채널을 지원해 사용할 수 있는 컬러 수의 제약도 없습니다.

이미지 포맷의 명칭이 Portable Network Graphics 의 첫 글자를 따서 만든 이미지 포맷이기 때문에 이름 그대로 인터넷 환경에 최적화 된 이미지 포맷입니다.

특허 문제가 있는 gif 이미지 포맷을 대체하기 위해 만든 이미지 포맷으로 무손실 압축 방법을 사용합니다.

gif를 완전히 대체할 수 있기 때문에 관리의 편의성을 고려하면 gif보다는 png 이미지 포맷 사용을 추천합니다.

고용량의 사진 이미지, 또는 이미지 로딩 속도를 높이는데 최적화를 해야하는 이미지가 아니라면 png 이미지 포맷을 사용하면 됩니다.


svg

웹표준에서 지원하는 유일한 벡터 이미지 포맷입니다.

사용 빈도는 높지 않지만, 웹페이지에 동적인 애니메이션이나 효과를 주는 용도로 많이 사용합니다.

벡터 포맷이어서 작은 용량으로도 다양한 해상도에 맞는 애니메이션 효과를 줄 수 있어서 용도에 맞게 잘 사용하면 웹사이트에 용량이 큰 동영상을 사용한 것 이상의 동적인 느낌을 줄 수도 있습니다.

강의를 배우면서 가장 쉽게 접하게 되는 벡터 이미지는 벡터 아이콘인 폰트어썸(Fontawesome) 입니다.

실무에서 웹페이지 제작을 하게되면서 가장 많이 사용하게 되는 무료 벡터 아이콘 팩이므로 꼭 알아두어야 합니다.


비트맵 이미지와 벡터 이미지 비교



벡터 이미지 정보를 텍스트로 기술하기 때문에 텍스트 편집기에서 열어서 그 내용을 볼 수 있습니다.


svg 파일을 메모장에서 열어본 화면



단, HTML 문서가 웹브라우저를 통해야만 제대로 레이아웃이 잡힌 멀쩡한? HTML 문서를 볼 수 있는 것처럼,

SVG 포맷 파일을 편집할 수 있는 에디터 프로그램(어도비 일러스트레이터, 어피니티 디자이너 등)을 사용해야만 svg 파일을 만들거나 수정할 수 있기 때문에 제작이 쉽지 않아 웹에서의 활용 빈도는 낮은 편입니다.


이미지 포맷 이름을 어떻게 발음하는지?

보통은 철자 그대로 발음합니다. 제이피지(jpg), 지아이에프(gif), 피엔지(png), 에스브이지/에스뷔지(svg) 이렇게 발음합니다. 

다만 영어 원어민식으로 제이피지(jpg)는 제이펙(손실압축방법의 표준 기술용어인 jpeg에서 유래), 피엔지(png)는 핑, 지아이에프(gif)는 지프로 발음하기도 하므로 알아두시기 바랍니다.



< 이전강의 다음강의 >


0 Comments