HTML 기초강좌, 이미지 포맷 알아보기! [JPEG GIF 백터 애니메이션GIF]

HTML 기초강좌, 이미지 포맷 알아보기! [JPEG GIF 백터 애니메이션GIF]

쿠쿠리의 HTML 기초강좌! 오랜만에 다시 찾아왔습니다.

사실 쿠쿠리가 강좌를 할만큼의 지식이 있는게 아닙니다. 첫 포스팅때도 말씀을 드렸었는데

그냥 제가 공부하면서 습득한 정보를 제 블로그를 찾아주시는 분들과 함께 나누고 싶어서 강좌를 쓰고 있습니다.

사실 말만 강좌지 그냥 제가 복습하는 것이나 다름없습니다.

같이 공부해나간다고 생각하시고 포스팅 참고하셔서 의문점이 드시는 부분에 대해서는 같이 고민해봐요!

자 본론으로 돌아와서 오늘은 강좌라기 보다는 이미지 포맷에 대해서 알아보려고 합니다.

보통 홈페이지를 제작할 때 많이 쓰이는 이미지 포맷은 JPEG, GIF 이 두 종류입니다. 간혹 PNG 파일도 쓰기는 쓰지만요

JPEG, GIF, PNG 

두 이미지의 차이점이 느껴지세요? 느껴지신 다면 진짜 매의 눈이구요.

거의 차이가 없습니다. 하나의 이미지는 JPEG 파일 그리고  또 하나는 GIF로 저장된 파일이지만 큰 차이는 없습니다.

하지만 보통 다양한 색상으로 구성된 사진을 저장할 때 JPEG 포맷으로 저장합니다.

그에 반해 몇가지 안되는 단순한 색상으로 구성되어 있거나 넓은 영역이 동일한 색상일 때

보통 GIF나 PNG 포맷을 사용합니다. 

이렇게 단일 색상이 배경의 대부분을 차지하고 있을 때 GIF나 PNG 포맷을 사용하는거죠.

PNG 포맷은 뒷 배경 없이 투명한 이미지를 구현할 때 사용하기도 합니다.

위의 글귀와 배경이 이미지로 보이시나요 텍스트로 보이시나요?

이미지 같아 보이지만 실제로는 표를 만들어 놓고 배경을 설정한 뒤 PNG 포맷의 이미지를 가져온 겁니다.

즉 PNG 파일은 뒷 배경이 없이 이미지를 만들어 낼 수 있는거죠.

이미지의 해상도

컴퓨터의 디스플레이는 72ppi의 해상도로 제한되어 있기 때문에 웹으로 구현되는 이미지의 해상도는

아무리 높게 저장을 하더라도 이미지 품질이 더 높아지지 않습니다.

웹에 올릴 이미지를 72ppi 이상으로 지정하면 효과는 없고 되려 파일 크기만 커져 로딩이 느려지기만 하죠.

보통 72ppi와 300ppi를 많이 사용하는데 72ppi는 웹에 업데이트 시킬 이미지 파일일 때 지정하며

300ppi의 경우 인쇄를 할 이미지에 적용하게 됩니다. 

72ppi로 제작된 인쇄물은 출력시 해상도가 많이 떨어지므로 300ppi로 지정을 하셔야 합니다.

여기서 잠깐! 해상도 해상도 하는데 대체 해상도가 뭔지 잘 모르실까봐 설명해드려요.

해상도는 1x1 인치 사각형 내에 있는 작은 사각형의 갯수를 말합니다.

이미지를 확대해보면 이렇게 작은 사각형으로 이미지가 구성되어 있습니다.

1x1 인치 사이에 있는 저 작은 사각형이 몇개인지 파악한게 바로 해상도 입니다. 

72ppi는 72개의 사각형이 있다는 말이고 300ppi는 300개가 있다는 말이 되겠죠?

백터 vector 이미지란 무엇인가?

백터이미지란 일러스트레이션과 같은 프로그램에서 주로 사용하는 이미지 포맷입니다.

백터로 저장된 이미지 파일은 이미지 크기를 크게 늘리거나 줄여도 이미지의 품질에 영향을 미치지 않습니다.

이게 바로 백터 이미지의 장점이라고 할 수 있습니다.

주로 홈페이지에 직접 업로드가 된다기 보다는 홈페이지를 제작하는 과정에서 사용하게 됩니다.

오늘은 특별한 강좌 없이 이미지의 포맷에 대해서만 살짝 알아봤습니다.

보통 홈페이지를 제작하는데 있어서 JPEG와 GIF가 가장 많이 사용되니까 이 두 포맷의 특징만 기억해두시면 되겠죠?

다음 강좌에서는 드디어 테이블 강좌에 들어갑니다!

테이블을 만들고 구성하고 정렬하는 방법 등 다양한 응용방법에 대해서 알아 보겠습니다.

다음 포스팅은 또 언제 올지 모르겠지만 최대한 빨리 돌아올께요 ~~

---