홈페이지 제작 시 포토샵 이미지저장은 어떻게해야 효과적일까? (퀄리티와 용량, jpg와 gif) by S

 

 

포토샵을 사용하면서 jpg로 이미지를 저장할때 반드시 선택해야하는 옵션이 있다.
바로 퀄리티(Quality)라는 것인데 이는 0~12까지 설정할 수 있으며 0~4까지는 Low, 5~7까지는 Medium,

8~9까지는 high, 10~12까지는 Maximum으로 구분된다.

 

그럼 여기서 홈페이지를 제작할 때 웹페이지 디자인 후 좋은 퀄리티를 내기위해

무조건 가장 높은 퀄리티(12)로 이미지를 저장하는게 과연 현명할까?

 

결론부터 말하자면 NO이다.

 

 

 

 

물론 홈페이지를 제작하는게 아닌 인쇄용이나 이미지 보관용이었다면 12로 저장해도 전혀 문제되지 않는다.
하지만 홈페이지를 제작할 때 데이터용량 이라는건 꽤 중요한 부분을 차지한다.
이미지 용량이 클수록 페이지 뜨는 속도가 느려지는 원인이 되기도 하며

이미지들이 들어가는 서버의 총 용량은 비용적인 부분과 직결되기 때문이다.

 

그렇다고 이미지의 퀄리티를 너무 낮춰버리면 홈페이지의 질이 떨어져버린다.
그럼 이미지의 퀄리티를 떨어뜨리지 않으면서 용량을 최대한 줄이려면 어떻게 저장해야 효과적일까?

 

 

 

 

먼저 알아둘것은 이미지 용량은 사이즈에 가장 큰 영향을 미친다.
똑같은 이미지를 같은 퀄리티로해서 1200x700사이즈로 저장했을때 405KB의 용량이 나왔다면
절반으로 줄여 600x350사이즈로 저장한다면 158KB가 나온다.

 

그 다음 영향을 미치는게 색감이다.
얼마나 많은 색의 종류가 얼마나 복잡하게 들어가있는지에 따라 용량이 천차만별로 달라지는데
때문에 그라데이션, 스트록, 패턴, 그림자 같은 효과(Effects)들이 많이 들어가면 들어갈수록

이미지 용량이 커지는게 당연하다.

 

여기서 착각하지 말아야할 건 이미지 용량을 줄여보겠다고 완성된 페이지에 수많은 레이어들과 효과들을 합쳐 jpg파일로 저장한다고 용량은 별반 달라지지 않는다는 사실이다.

이건 psd파일의 용량을 줄이는거지 jpg파일과는 아무 연관이 없다.
jpg용량은 오직 현 화면의 이미지구성이 영향을 미칠뿐이다.

같은 이미지를 같은자리에 겹쳐지게 레이어를 20개건 100개건 만들어서 저장을 한다해도

jpg용량은 처음 레이어 한개일때와 같다는 소리.

그렇다고 디자인할때 용량 신경쓰느라 그라데이션 넣어야할걸 단색으로 넣는다거나,

정해져있는 사이즈크기를 내맘대로 줄일수는 없으니 결국 이미지 저장 시 퀄리티가 가장 핵심이 되는것이다.

 

 

 

 

 

아래는 그라데이션 색상이 많이 들어가있는 이미지로 퀄리티만 다르게해서 저장한 결과이다.

 

퀄리티4 (Low) - 용량 42Kb

퀄리티7 (Medium) - 용량 50Kb

퀄리티8 (high) - 용량 60Kb

퀄리티9 (high) - 용량 69Kb

퀄리티12 (Maximum) - 용량 158Kb

 

 

 

 

 

 

 

 

위의 결과를 봤을때 4는 한눈에봐도 질이 확 떨어져보이고 7은 약간 질이 떨어진다.

 

그러나 8부터는 왠만해선 거의 식별하기가 힘든데

워낙 많은 색이 들어가있는 이미지라서 그나마 8과 9가 자세히 봤을때 약간의 차이를 보이는거지

어지간한 이미지들은 거의 구분이 힘들다고 봐야한다.

게다가 9(69Kb)와 12(158Kb)는 2배이상 용량차이가 나는데비해 결과물이 분간하기 힘들정도이다.

 

이렇게 웹상에서 사용되는 이미지들은 9~12의 퀄리티를 육안으로 구분하기 힘들기 때문에

8정도로 저장해서 사용해도 충분하며,

사진이라던가 위처럼 이미지 색상이 너무 다채롭게 들어가서

미세한 차이라도 놓치고 싶지 않다 할때만

(사실 두개를 비교해서 뚫어지게 보지않는한 왠만한 사람들은 차이를 느끼지 못한다.

홈페이지는 말할것도 없다.) 9정도 저장해서 사용하면 될 듯하다.

 

 

 

 

 

 

 

그렇다면 일반 저장이 아닌 웹용 저장은 어떨까?

 

포토샵에서 Ctrl+Art+Shift+S를 눌러 웹용 저장을 할 때 우측에 JPEG 저장 시

위와 다르게 퀄리티를 0~100까지 조절할 수 있게 나온다. 

 

 

 

 

 

 

여기서 60으로 저장했을 때 이미지 용량은 40Kb

위에서 퀄리티 4정도의 용량밖에 나오지 않지만 결과물은 퀄리티7보다 좋으며 8보다 살짝 떨어지는 정도이다.

 

 

 

 

 

 

 

 

퀄리티 70으로 저장했을때 용량은 49Kb 이지만 퀄리티9 (69Kb)와 비슷하게 나오고

퀄리티 80으로 저장했을때 용량은 64Kb 이지만 최대 퀄리티12 (158Kb)와 거의 흡사하게 나온다.

 

 

 

 

 

 

 

때문에 효과대비 용량이 낮은 웹용저장이 가장 좋다는 거~

반드시 이미지의 용량을 줄여야할 필요가 있을땐 이 웹용저장(Ctrl+Art+Shift+S)을 잘 이용하면 된다.

 

 

 

 

 

 

그럼 여기서 jpg가 아닌 gif 저장은 어떨까?

 

우리가 홈페이지를 제작하다보면 어떤건 jpg, 어떤건 gif이미지를 사용한다.

이 차이는 어디서 나오는걸까?

 

 

흔히들 gif로 저장하면 화질이 떨어지지만 무조건 용량이 적어진다고 생각하는데 이는 상황에 따라 다르다.

 

위의 이미지를 만일 gif로 저장한다면

gif최대 퀄리티인 256색상을 사용해 저장해도 이미지가 256색상을 넘어가기 때문에

퀄리티는 아래처럼 확연히 떨어지고 용량은 75Kb로 jpg퀄리티 9의 69Kb보다도 높게 나온다.

 

 

 

 

 

 

하지만 아래처럼 몇 가지 단색만을 사용했을때는 경우가 달라진다.

jpg 8로 저장했을때 용량은 33Kb지만 gif 로 저장했을땐 7Kb로 용량이 급격히 떨어지는 것.

물론 둘의 이미지는 뭐가 더 좋다고 말할 수 없을 정도로 똑같다.

 

 

 

 

 

 

이 때 이미지에 사용된 총 컬러가 64색을 넘지않기 때문에 

gif 64색이든, 256색이든 어떠한 걸로 저장해도 결과물과 용량은 같다.

(그러니 gif저장할땐 무조건 256색을 사용할 것)

 

 

 

 

 

 

한마디로 gif는 사용된 컬러가 256색 이내일때 큰 효과를 볼 수 있다는 것.

만일 한가지색의 그라데이션이 들어갔을 경우 컬러테이블이 256색 이내로 감당이 될거 같지만

 

 

 

 

 

 

아래 jpg와 비교해 봤을때 검정색쪽에 약간의 지글거림이 보인다.

사실 버튼처럼 이미지가 작아진다면 이 정도 차이는 거의 안보이겠지만 

문제는 용량이 gif가 더 커진다는 것.

jpg 8로 저장했을때 28Kb인 용량이 gif 256으로 저장하면 98Kb가 되어버린다는 사실.

 

 

  

 

 

그러므로 컬러테이블이 꽉 채워지지 않고 최소한 한칸이라도 비어있을때 gif 이미지로 저장하는게 좋다.

 

 

 

 

 

결론은

이미지 저장은 용량을 줄이기 위해 상황에따라 적절히 하는게 효율적인데

내가 생각하기에 용량대비 가장 적절한 퀄리티는 일반 jpg저장은 8~9정도, 웹용 jpg저장은 70 정도,

그리고 gif는 그라데이션이 안 들어간 몇 가지 단색계열저장에 사용하면 된다는 사실~