웹사이트를 구축하다 보면 수많은 이미지 파일을 확인 할 수 있다.퍼블리셔가 웹사이트 디자인을 퍼블리싱을 하기 위해 디자이너는 다양한 사이즈로 이미지를 잘라서 제공한다.
이때 어떠한 이미지 확장자로 저장하면 좋을까?
정답은 사실 없다.
디자인의 목적에 따라 다양하게 선택을 해야 한다.
이유는 웹사이트 로딩속도와 명확한 디자인의 표현 하기 위해서며, 매우 중요한 부분이다.
물론 제일 좋은 건 이미지를 최대한 안사용하면 좋다. 그러나 이미지가 없는 사이트는 간단하게 이쁘지가 않다.
그리고 결국 콘텐츠 영역은 이미지를 안쓴다는 것은 디자인을 안한다는 것과 똑같으며, 사이트의 퀄리티가 매운 나쁘다고 보면 된다.
그럼 본론으로 가기전에
기본 개념을 이해하고 넘어가자.
1. 데이터 무손실/손실
이미지 저장시 데이터 정보값 손실여부에 따라 Lossless와 Lossy로 구분한다.
1-1. Lossless
이미지를 압축을 하여도 원본 이미지의 데이터 정보값을 최대한 손실 되지 않는 것을 의미하며, 압축율이 좋지 않다.
1-2. Lossy
이미지를 압축률이 매우 좋으나 원본 이미지의 데이터 정보값의 손실율이 높다.
2. 컬러표현 Indexed Color/ Direct Color
각 이미지 압축 방식에 따라 이미지의 컬러수를 제한하여 저장 압축율을 높인다.
2-1. Indexed Color
이미지 저장시 Color Map에 제한된 수의 색상 최대 256컬러를 저장하는 방식이다.
2-2. Direct Color
이미지 저장시 원본에 최대한 가까운 수천가지의 컬러를 저장하는 방식이다.
3. 비트맵과 벡터 방식
3-1. 비트맵(Bitmap)
비트맵(Bitmap)의 비트는 지도란 뜻으로 각 픽셀에 저장된 일련의 비트정보들의 집합이라고 보면 된다.
GIF, JPEG(JPG), PNG 확장자 이미지 비트맵 방식에 속한다.
비트맵(Bitmap)는 원본 사이즈보다 확대하면 네모난 점으로 이미지를 구성되어 있는 걸 확인 할 수 있으며,
원본 이상으로 확대 하면 이미지에 손상이 가므로 주의하여야 한다.
3-2. 벡터(Vector)
벡터 방식은 점과 점 사이의 선 또는 곡선으로 이미지를 구성하는 방식이다.
벡터방식은 사각형이나 원, 선 등으로 이루져 있고 개체들이 모여 하나의 이미지를 구성한다.
원본보다 아므리 확대를 하여도 원본 이미지에 손상이 없다.
대신 비트맵 방식에 비해 풍부한 질감을 표현하기 어렵다.
4. 이미지 압축(확장자) 종류
이미지 압축 방식에는 제목에서 언급했듯이 GIF, JPEG, PNG, SVG 외 다양하다.
하지만 위 4가지 확장자 외 압축방식은 웹에서 잘 사용하지 않거나 사용할 수 없으니 패스 하도록 하겠다.
(더 많은 이미지 저장 방식은 추후 디자인노트에서 정리 하도록 하겠습니다.^^;)
결국 이미지 압축방식은 1번, 2번, 3번 이 3가지 방식을 조합으로 압축율과 퀄리티를 결정한다.
4-1. GIF 확장자 - Lossy / Indexed Only / Bitmap
GIF는 데이터 손실을 거의 하지 않는다.
하지만 최대 256개의 컬러로만 저장 하므로 압축율은 좋지만 퀄리티는 떨어진다.
GIF는 로고나 심볼과 같은 컬러가 다양하지 않은 이미지를 저장할때 좋으며
GIF는 애니메이션(흔이 인터넷에 돌아다니는 음짤 이미지) 가능하며, 배경을 투명하게 할 수 있다.
하지만 배경을 투명하게 하는 알파값 성능이 좋지 않다.
4-2. JPEG(JPG) - Lossy / Direct / Bitmap
JPEG(JPG)는 눈으로 확인 하기 힘든 정보를 제거하여 세부적인 사진 이미지를 가능한 작게 저장하도록 만든 압축 방식이다.
다양한 컬러정보를 저장함으로 퀄리티가 높은 이미지를 제공하지만 압축율은 떨어진다.
JPEG(JPG)는 주로 배경이 화려한 이미지 또는 인물(모델), 제품 이미지 등 컬러가 다양한 이미지를 저장할때 사용하면 좋다.
단 JPEG(JPG)이미지는 다시 작업 후 정할때 마다 기존의 퀄리티보다 떨어지므로 주의하자.
그래서 포토샵에서 작업시 항상 작업 원본을 백업 또는 "스마트 오브젝트(Smart Opject)로 설정 후 작업하기를 권장 한다.
(해당 내용은 추후 포토샵 코너에서 좀더 다루도록 하겠습니다.)
4-3. PNG
PNG는 요즘 웹에서 제일 많이 이용되는 압축방식이다.(사실 그냥 마구 사용하는 느낌도 있다.)
PNG는 크개 PNG-8 / PNG-24 두가지로 나누어 진다.
4-3-1. PNG-8 - Lossless / Indexed / Bitmap
PNG-8는 GIF의 대용이라고 생각 하면 좋을 것 같다.
GIF보다 좋은 점은 압축율이 더 좋으며, 배경 투명시 GIF보다 알파값 성능이 좋다는 것이다.
하지만 PNG-8은 GIF처럼 애니메이션 기능 없다.
(개인적으로 참 에매하다고 생각이 들며 난 지금 거의 사용하지 않는다.)
4-3-2. PNG-24 LossLess / Direct / Bitmap
PNG-24는 데이터 손실이 없으며, 수천가지의 컬러를 저장하는 매우 좋은 압축방식입니다.
하지만 JPEG(JPG)의 역할을 하지는 않습니다.
이미지의 상황에 따라 다르지만 JPEG(JPG)보다 용량이 커지는 경우도 있습니다.
PNG-24는 주로 로고처럼 컬러는 단순하지만 고퀄리티를 원하는 경우 사용하는 것이 좋습니다.
또는 배경이 없는 배경 패턴으로 사용하기에 매우 좋습니다.
PNG-24의 알파값은 GIF, PNG-8보다 아주 뛰어난 알파값을 제공합니다.
4-4. SVG - LossLess / Vector
최근 몇년 사이 높은 사용율을 보이고 있는 방식이다.
SVG는 위 3가지 방식과 다른 한가지는 벡터방식의 압축방식을 사용한다는 것이다.
바로 이 벡터방식의 장점을 부각되어 용량과 대피 좋은 퀄리티를 사용하며 배경 없이 사용도 가능하다는 점이다.
단 JPEG(JPG)처럼 다양한 컬러 표현은 힘들다 가능 하다고 하여도 압축률이 매우 높아질 수 있다.
SVG의 또 하나의 장점은 파일을 열면 웹언어인 XML로 작성되어 있어 그래픽 프로그램이 아니여도 수정이 가능 하다는 점과
웹 언어인 CSS 또는 JavaScript로 색상을 컨트롤 할 수 있다는 점이다.
SVG는 주로 심볼이미지 로고 이미지에 사용하는 것을 추천한다.
이렇게 웹에서 사용하는 4가지의 이미지 확장자를 알아 보았습니다.
내용에 간단하게나마 어떤 경우에 사용하는 것이 좋다고 적어는 놓았지만.
결국 본인이 작업하면서 그래픽 툴에서 저장시 비교하면서 사용하다 보면 본인만의 이미지 저장 룰이 생길 것이다.
아 생각한 것보다 너무 길어 이미지 비교 자료를 첨부를 못하였다.
추하 이미지 비교 이미지도 올리도록 하습니다.