포토샵기초_Save as vs Save for Web 알아보기
사진 관련 업종이거나 혹은 비쥬얼 디자이너나 일러스트레이터이든지 왜 포토샵에서 이미지를 어떻게 저장하는지를 알아야 할 때가 있습니다
이미지 파일 포맷은 지금도 계속 개발되고 있습니다만, 아직 국내와 해외를 막론하고 아직도 애용되고 있는 파일 포맷은 JPG (JPEG)입니다..JPG 파일은 GIF, PNG와는 달리 더 많은 색상을 포함하고 있어서 고품질의 사진을 소화할 수 있어서 디지털 카메라의 이미지 파일로 사용되고 있습니다. 웹 브라우저에서도 가장 많이 찾아볼 수 있는 파일 포맷 중에 하나입니다. (로고 등의 그래픽 이미지는 GIF, PNG, SVG 포맷.)
하지만 JPEG의 단점은 손실 압축 방식을 사용하고 있고 ( 늘 그런건 아니지만요 ) , 손실 압축 방식(Lossy Compression)은 쉽게 말하면 저장할 때 마다 이미지 픽셀 안에담겨져 있는 정보가 사라지고, ( 눈에 띄게 사라짉려면 1000번 정도는 재 저장을 계속 해 보시면 눈에 띄는 점이 있다는것 ) 그게 이미지 품질에 영향을 준다는 뜻이에요. (물론 JPEG에도 무손실 압축 방식이 있지만 지원되는 곳이 적음)
포토샵은 이미지의 품질을 떨어뜨리지 않고 저장할 수 있는 포맷으로 PSD, BMP, TIFF 등이 있습니다만... 이와 같은 파일 포맷 중 PSD, TIFF 는 웹브라우저나 디카, 다른 뷰어 프로그램에서는 지원이 안 되기 때문에 거의 JPEG 파일로 저장할 수 밖에 없습니다.
포토샵 CC 에는 JPG 이미지를 저장하는 방법이 대표적으로 3가지 있습니다. Export 기능이 CC에 추가되었으나 이건 여기서 언급 을 하지 않겠습니다아직 CC 버전을 사용하지 않는 분도 많으시기 때문에 전통적으로 Save As... 와 Save for Web... 만 가지고 논해 보려고 합니다.여기에서 질문... 여러분은 둘 중에 어느 걸 사용하시나요? 왜 그걸 사용해야 하는지 알고 계신 분도 있고 모르시는 분도 계실 거에요...저는 이번 조사를 통해 왜 이 두 가지가 따로 존재하는지에 대한 이유를 좀 더 알게 되었습니다.Save as 를 선택하게 되면 기본적으로 Save for Web으로 저장한 이미지보다 약 40kb 더 많은 정보가 추가됩니다.그 이유는 EXIF MetaData라고 해서 time / date / aperture / shutter speed 등이 자동으로 포함됩니다.이건 사진에 대한 정보를 말합니다. 사진 촬영 시간, 카메라 종류, 셔터 스피드 등등이 들어가는 거죠... (디카로 촬영하는 분들에겐 꼭 필요하죠.. 물론 포토샵으로 작업하여 저장한 이미지는 다를 수도 있습니다.)그렇기 때문에 타인에게 이미지 정보를 확인시켜주기 위해 정보를 남기고 저장할 때는 Save As..로 저장해야 합니다.반면에 그러기 싫은 경우에는 Save for Web...으로 저장해주는 겁니다.
Save as는 File < Save As...(Ctrl + Shift +S)에서 JPEG 파일 포맷을 선택하면 아래와 같은 창이 열립니다.
위에서 언급했지만 JPEG는 Quality를 조절할 수 있기 때문에 Quality를 조정함에 따라 이미지의 크기(사이즈)도 달라질 수 있습니다.아래의 이미지를 참고해보시면 될 거에요.Baseline ("Standard") / Baseline Optimized / Progressive 이 세 가지는 또 뭘까요?Baseline ("Standard") 는 표준 방식으로 모든 웹 브라우저에서 지원되며 아주 미세한 변화만 이미지에 적용됩니다. 
Baseline Optimized 는 위의 방식과 달리 약간의 색상 압축과 품질 압축이 더 들어가며 요즘 브라우저에서 거의 지원됩니다만 옛날 것까지 포함하지는 않습니다. 위의 옵션보다는 좀 더 빨리 로딩이 됩니다.
Progressive 는 큰 이미지의 경우 사이즈 때문에 바로 열리지 않는 경우가 있어서 처음에는 뿌옇다가 점점 선명해지는 방식입니다. 최근에 많이 보셨을법한 방식입니다. 용량은 가장 낮습니다. 화면보다 이미지를 다운로드해서 볼때 더 자세히 보여지는 저장방식입니다.
아래 옵션의 숫자들은 상세함의 정도인데, 숫자가 클수록 상세히 보입니다
물론 인터넷 속도가 무진장 빠른 우리나라에서는 별 차이가 없을 수도 있겠지만 해외 사이트에 경우에 Progressive 방식을 선호하는 듯 합니다.그렇기 때문에 인터넷 속도가 빠른 컴을 쓰시면 위의 3가지의 옵션은 별 문제가 없어집니다. 저의 경우 처음엔 그냥 Baseline Standard를 아무 생각 없이 클릭했지만 이젠 좀 더 고려해볼 수 있게 되었습니다. 그리고 그냥 무조건적으로 12로만 저장하면 될까요?
[Impulsive Adventure 홈페이지 참고]※ 위의 그래프는 Photoshop CS 기반으로 만들어졌으므로 포토샵CC는 좀 다를 수도 있음위의 그래프를 보시면 Baseline Standard와 Baseline Optimized는 각 품질 당 사이즈의 변화가 크지 않습니다.만약 이 두 방식만 사용한다면 사이즈는 11 이후에 높아집니다. 12를 주면 원본 사이즈보다 파일 크기가 높아진답니다. 퀄리티만 고려한다면 12를 주겠지만 사이즈를 생각한다면 12를 그냥 누르면 안 되겠죠....???결론적으로 볼 때, 퀄리티가 최대한 높아야 되고 파일 크기는 신경 안 쓴다면 12로 줘도 되지만파일 크기를 생각한다면 10 ~ 11도 괜찮다고 봅니다.
위의 사진이 퀄리티 10
위의 사진이 퀄리티 12
전 대략 흘겨봐도 위의 두 사진의 퀄리티 차이를 분간하지 못하겠어요. 물론 더 고품질의 이미지라면 달라질 수도 있겠지만. 보통 이런 블로그에 올리는 경우엔 그래서 전 개인적으로 최대치로 높일 경우에퀄리티 10 ~ 11을 이용합니다.^^그리고 Save for Web , 이건 단순히 웹디자이너 용이에요
하지만 이것만 기억하시면 됩니다.Save for Web은 출력용이 아닌 웹용 이미지 저장 방식이기에 철저히 용량을 우선순위에 두고 있다는 겁니다. 이런 이유로 Optimize(최적화)라는 게 존재합니다. Optimize to File Size를 이용하면 Desired file Size에서 용량을 정할 수 있습니다.
그리고 Save for Web은 위에 언급했던 Metadata를 없애고 이미지를 저장할 수 있기에 불필요한 정보를 노출시킬 필요가 없으며파일 사이즈가 정확하게 지정된 경우에 사이즈를 맞춰 저장할 수 있다는 장점이 있습니다.^^이미지를 Save for Web... 으로 JPEG 파일로 저장할 때, 퀄리티는 어떻게 해야 할까요?조사에 따르면 포토샵은 퀄리티 0 ~ 50에는 Chroma Supsampling 이라는 압축 기능을 사용하여 좀 더 퀄리티가 떨어지게 됩니다.반면에 51 ~ 100은 Chroma Supsampling을 사용하지 않아서 좀 더 좋은 퀄리티의 이미지를 이용합니다.이 말에 의하면 좀 더 좋은 퀄리티를 원하면 50 이하는 피하고 51 ~ 100 사이로 퀄리티를 조정하라는 말입니다.
50 ~ 70 사이는 파일 사이즈의 변화가 미묘하지만 80 ~ 100 사이에서는 파일 사이즈의 변화가 심해지는 걸 볼 수 있는데요.재밌는 건 60 ~ 100 사이의 이미지의 품질은 사람의 눈으로 볼 때 아주 미세하게 달라보인다는 겁니다.^^전 주로 70 ~ 80을 사용하는데 이유는 그 이상과 눈으로 비교하면 별 차이를 못 느끼기 때문이에요.... 그 이상은 사이즈의 문제입니다.95 ~ 100의 경우는 파일 사이즈가 원본을 뛰어 넘기 때문에... 사이즈를 높일 필요가 없다면 100까지 굳이 높일 이유가 없다는 거죠. 그러므로 이것도 어떻게 보면 개인의 관념적인 것도 들어갈 수 있습니다. 100%면 무조건 좋은 것 만은 아니라는 거랄까요.^^
위의 이미지 품질 70% (용량이 300KB 대로 원본 사이즈 400KB 보다 적음)
이미지 품질 100% (용량이 600KB로 원본 사이즈인 400KB를 넘음)제가 볼 때는 70이나 100이나 그게 그거 같아보이는데... 다르게 느끼시는 분들도 있을 수 있습니다. 하지만 둘 다 Chroma Supsampling이 적용되지 않았기 때문에 퀄리티는 염려할 정도는 아니란 것이죠. 단지 확대했을 때의 차이 정도.
여기에도 Optimized와 Progressive가 있습니다만 둘 사이의 차이는 그렇게 많지 않아 보입니다...(용량 차이와 품질 차이)위의 Progressive는 Save As의 Progressive처럼 점점 선명해지는 그거이라고 생각됩니다.
Embed Color Profile과 Convert to sRGB는 뭘까요?
Embed Color Profile 이건... 포토샵이 지정한 sRGB라는 색상 프로파일을 지정하겠냐는 소리인데 이건 여러분이 작업한 이미지의 색을 최대한 다른 사람들도 똑같이 확인할 수 있도록 해주는 기능인데요 세상 사람들이 전부 나와 같은 모니터를 사용한다면 상관없지만 그렇지 않기 때문에 Color Profile을 맞춰주는 거구요. 반드시 체크해줄 필요는 없습니다만 그냥 체크해둔 상태로 둡니다.
Convert to sRGB의 경우, sRGB로 만들어지지 않은 이미지 (Adobe RGB, Pro RGB) 같은 것을 sRGB로 저장해주는 역할을 합니다. 왜냐면 대부분 우리가 웹 브라우저에서 보는 이미진는 sRGB로 구성되어 있기 때문입니다.
Adobe RGB나 Pro RGB는 고품질 인쇄용이라서 웹 브라우저에 맞지 않습니다.
그래서 보편적으로,
Save AS... 에서는 Format Options은 안전빵으로 갈거면 Baseline / Baseline Opt를 기능성을 줄거면 Progressive...퀄리티는 10 ~ 12 사이는 아주 큰 차이가 나지 않을 수도 있다는 것.Save for Web...에서는 Optimized와 Progressive는 기능성이냐 안전빵이냐의 문제이고Embed Color Profile은 더 정확한 색상을 내기 위해 체크하는 거sRGB는 다른 것으로 작업안 한 이상 체크 굳이 할 필요 없는 거퀄리티는 70 ~ 100 사이에서 아주 큰 차이가 나지 않는다는 것.일단 위의 내용은 어디까지나 저의 생각입니다. 물론 제 생각을 무조건 따르라는 건 절대로 아닙니다.더 정확한 이미지의 결과는 계속 비교해봐야 하고 앞으로 이미지 포맷 방식이 어떤 식으로 변화될지도 모르기 때문에 지속적으로 확인하면서 여러분이 직접 비교해보시고 사용하는 게 더 바람직하다고 생각합니다.실제로 실무 디자이너나 포토그래퍼분들의 견해도 다를 수 있기에... 제가 조사해본 결과는 이러이러한 거 같은데 여러분은 어떤 식으로JPEG 이미지 저장을 하시는지 소통해보고 싶은 것도 있습니다.그리고 위의 내용은 진리가 아니기에 언제든지 변경될 수 있다는 걸 알아주셨으면 합니다.
SCIENCE IN NATURE ART