[이미지 압축] 포토샵에서 웹용으로 저장했을때 사진 화질과 파일크기 변화
이미지 파일의 종류는 상당히 많습니다. 가장 많이 사용하는 JPEG 형식과 PNG, GIF 형식의 파일이 있고, 이미지를 사용하는 용도에 따라 적합한 파일 형식은 달라집니다.
그 중에서 제가 관심을 둔 부분은, 웹 페이지에서 어떤 형식의 이미지파일이 가장 적합할까 입니다.
네이버 블로그나 티스토리를 사용하는 경우, 파일 업로드 용량제한이 없다는 장점이 있기 때문에 이 부분이 그리 중요하지 않을 수 있습니다. 다만 원본 파일 비슷한 해상도를 가지면서 가로(width) 크기만 적당히 조절할 뿐 입니다.
하지만 자신이 사이트나 블로그를 직접 호스팅하여 운영해야 한다면, 업로드하는 이미지의 용량을 고민해봐야 합니다.
자신이 발행한 웹페이지(포스팅)에서 출력되는 이미지 용량이 크다면, 유료로 사용하고 있는 호스팅 트래픽이 많이 소모되기 때문입니다. 또한 해당 웹 페이지 로딩속도도 느려지기 때문에 구글(Google) SEO(검색엔진 최적화)에 불리해지게 됩니다.
이것과 관련된 자세한 이야기는 나중에 하도록 하고, 이미지를 웹용으로 저장했을 때 원본 사진의 화질과 파일크기에 어떠한 변화가 오는지 직접 실험해보겠습니다.
원본 사진을 웹 페이지용 이미지로 변환해주는 툴은 아주 많습니다.
저는 그 중에서 사진 편집의 으뜸이라 할 수 있는 Adobe Photoshop 7.0.1 를 사용했습니다.
포토샵에서 원본사진을 열고, <파일-웹용으로 저장> 경로로 들어가거나 단축키 <Alt+Shift+S>를 누르면 웹페이지용 이미지로 변환하는 화면이 나옵니다.
현재 원본사진을 웹페이지용 이미지로 변환하는 중 입니다.
위 상태에서 포토샵 상단 우측을 보면 어떤 파일 형식으로 저장할 것인지 설정하는 부분이 있습니다.
보시는 것과 같이 웹페이지용 이미지는 GIF, JPEG, PNG, WBMP 파일 형식중에서 선택하게 됩니다.
각각의 이미지 확장명에 대한 간략한 설명은 다음과 같아요.
PNG : 최상의 비트맵 이미지를 구현하기 위한 형식
JPEG : 이미지를 통신에 사용하기 위해 압축하는 기술표준
BMP : 마이크로 소프트에서 정의한 가장 단순한 구조의 그래픽 형식
GIF : 애니메이션 효과를 연출할 수 있으며, JPEG 파일보다 압축률을 낮지만 전송 속도는 빠른 형식
위 정의를 보면 알 수 있듯이 자신이 이미지를 무슨 용도로 사용할 것인지에 따라 적합한 형식이 정해져있습니다.
미러리스나 DSLR의 품질을 반영되어야하는 블로그를 운영한다면 PNG 가 좋을 수 있습니다.
그리고 저처럼 이미지가 글의 참조영역에 불과하다면 파일용량을 줄일 수 있는 JPEG 형식이 더 적합합니다.
그럼 원본 이미지를 위의 각각의 파일형식으로 저장을 해보겠습니다.
PNG-24 파일형식은 GIF 처럼 이미지의 투명 부분을 지원합니다.
또한 투명한 정도를 변경할 수 있는 반투명도 적용하며, PNG-8 형식보다 압축률이 낮다는 것이 특징입니다.
GIF는 흔히 말하는 움짤 형식입니다.
블로그 운영자말고, 인터넷 서핑을 즐기는 사용자 입장에서 웹 로딩속도가 가장 빠른 파일 형태 입니다.
JPEG는 이름 그대로 파일 용량을 가장 많이 고려한 형태 입니다.
포토샵에서 JPEG로 변경하고자 할 경우, 저장 품질을 4가지 중에서 선택할 수 있습니다.
앞서 설명했듯이, PNG-8 형식은 PNG 파일중 가장 가벼운 형태로 이미지의 투명을 지원하지만, 256 컬러 내에서 표현해야하는 한계가 있습니다.
원본사진(JPEG)을 위의 여러가지 옵션을 적용하여 7장의 이미지로 바꾸어 보았습니다.
카메라에서 PC로 추출한 최초의 이미지는 약 5MB의 대용량 이미지입니다.
최초의 이미지를 블로그에 올릴 수 있는 width : 580 으로 축소한 파일을 '원본'으로 가정합니다.
원본이미지는 JPEG 형식이고 파일 용량은 73.0KB이기 때문에 워드프레스를 오래 사용한 분들은 위의 이미지를 사용하지 않습니다.
원본파일을 GIF 고감도로 변경한 사진입니다.
파일용량은 132KB로 원본파일보다 약 2배 가까이 용량이 증가한 상태 입니다.
132KB 라는 용량이 충분히 작다고 생각할 수도 있지만, 이정도 용량이면 장문의 포스팅 글을 20개 모아놓은 수준입니다.
따라서 움짤 사진을 사용해야할 특별한 경우가 아니라면, GIF 형식은 웹용으로 비추합니다.
웹용으로 가장 대중화된 형식인 JPEG 고화질 입니다.
파일용량은 25.7KB 로 원본파일의 약 33% 수준입니다.
사진 퀄리티 또한 원본과 동일하다고 느껴질 정도 입니다.
그럼 JPEG 최대값으로 한 번 변환해봅시다.
파일용량은 41.9KB 가 나왔고, 품질은 원본과 동일하나고 느껴집니다.
JPEG 중간값은 라이트한 웹페이지에서 자주 사용되는 퀄리티 입니다.
73KB 용량이 12KB 로 줄었다는 건 굉장한 이득입니다.
JPEG 중간값으로 변환한 경우, 이미지를 확대해서 보았을 때 원본사진보다 화질이 떨어진다는 것을 조금 느낄 수 있습니다.
하지만 확대하지 않고 비교했을 때는 사람의 눈으로 쉽게 알아차릴 수 없는 퀄리티입니다.
그럼 내친김에 JPEG 최저값 화질도 확인해봅니다.
파일용량이 8.7KB 입니다. 원본 파일용량의 약 12%에 해당합니다.
하지만 JPEG 최저값 사진은 사람의 눈으로도 화질이 많이 안좋아졌다는 것을 느낄 수 있습니다.
PNG-8 형식입니다. 127KB 용량으로 원본보다 파일크기가 커졌습니다.
PNG-24 는 199KB 라는 용량이 나왔습니다.
앞서 실험한 GIF 형식보다 부담이되는 용량입니다.
어떤 포스팅에 이런 이미지를 10장 사용하게 되면, 웹페이지에서 사진 용량만 2MB를 사용하게 되는 겁니다.
그럼 원본사진과 블로거들에게 가장 적합한 형태인 JPEG 고화질의 화질을 비교해봅시다.
원본사진 역시 JPEG 형식입니다.
웹 페이지용으로 나쁘다고 할 수 있는 정도는 아니지만, 개인적으로 파일용량이 크다고 생각하는 정도 입니다.
위 사진에서 하얗게 나온 부분은 유리가 빛에 반사되는 영역입니다.
위 사진은 용량 대비 퀄리티가 가장 훌륭하다고 판단되는 JPEG 고화질 변환 사진입니다.
원본사진을 확대한 것과 비교해봤을 때, 빛이 반사되는 영역과 명암지 지는 부분의 경계선이 다소 딱딱하게 느껴집니다.
특히 명암이 변화하는 하단 부분은 갈색 계열의 적절한 명암톤을 선택하지 못해 네이비 계열의 색상으로 표현되었습니다.
하지만, 이미지를 위와 같이 극단적으로 확대하지 않는 한 그 차이를 구분하기 어렵습니다.
제가 오늘 실험한 결론은 이렇습니다.
웹 페이지에 업로드할 이미지는 JPEG 고화질 또는 JPEG 중간값으로 변환하여 사용하자는 겁니다.
네이버와 티스토리 블로그에서는 이득을 볼 순 없지만, 트래픽 발생에 따른 호스팅 비용은 상당량 줄일 수 있을 것 입니다.
<다른 카테고리의 글>
구글 웹마스터 도구에 워드프레스 사이트 인증하는 방법 (소유권 확인 플러그인)
FTP 프로그램 파일질라 사용법과 블루호스트 FTP 활용
