아티클

"이미지 최적화 분석 도구" 공개

2011-11-17 16:53:52

안녕하세요? 처음 인사드립니다.
올해 6월부터 NHN 웹표준개발1팀에 합류한 rainygirl 입니다.

누구나 간단히 써볼 수 있는 "이미지 최적화 분석 도구"를 제작하게 되어 NULI를 통해 공개하게 되었습니다.

모바일 웹서비스를 제작할 때 가장 신경쓰이는 부분은 아무래도 "용량" 문제일 것입니다.
HTML, CSS 파일은 빈줄과 공백을 제거하는 Minify를 통해 파일 용량을 줄일 수 있지요.
이미지파일도 마찬가지로 군더더기 데이타를 제거하여 용량을 크게 줄일 수 있습니다.

이미지에 군더더기 데이타라니?

JPG 이미지포맷에는 촬영기기의 모델명, 촬영일시, 노출 감도, 편집 프로그램 정보 등 그림데이타 이외의 여러 정보가 남겨집니다.
PNG 이미지포맷 역시 마지막 수정시간, 색상히스토그램, ICC 칼라 프로필, 감마값 등 그림데이타 이외의 여러 정보가 남겨집니다.
이러한 데이타를 흔히 '이미지 메타데이타(Metadata)'라고 부릅니다. 사진편집작업을 할때엔 이러한 정보가 유용하겠지만 웹서비스 UI에서 사용되는 이미지 파일은 이러한 정보를 필요로 하지 않습니다. 다시말해 불필요한 데이타인 셈이지요.

통상 20KB 정도의 용량을 차지하는 이들 메타데이타를 제거하면 이미지파일 용량이 줄어들어 웹서비스 로딩 속도가 향상될 것입니다. 그리하여!

간단한 "이미지 최적화 분석 도구"를 제작, 공개하게 되었습니다.
이미지 파일 헤더를 분석하여 이미지 메타데이타의 잔류여부를 체크하고 적정 압축률을 확인하여 최적화된 웹서비스를 만드는 데에 도움을 주는 도구입니다.

이미지 최적화 분석도구, 어떻게 사용하나요?

NULI 사이트의 MARKUP TOOLS 에서 "이미지 최적화 분석 도구" 링크를 눌러 이미지 URL을 입력하면 메타데이타 잔류 여부를 판별해 드립니다.
메타데이타가 남아있다면 어떤 데이타가 남아있는지 보여드리고, JPG 파일의 경우 추가로 압축율을 높여 용량을 더 줄일 수 있는지 비교할 수 있는 차트도 보여드립니다.

메타데이타가 남아있는 경우

메타데이타가 남은 경우 잔류 메타데이타를 보여드립니다

메타데이타가 제거된 경우

메타데이타가 제거된 경우 제거되었음을 판정해 드립니다

그렇다면, 이미지 메타데이타는 어떻게 제거하나요?

포토샵의 경우 Save as 대신 Save for Web 메뉴에서
Metadata 옵션을 None으로 지정하여 이미지를 저장하면
메타데이타를 간단히 제거할 수 있습니다.
포토샵에서 Save for Web 메뉴를 선택합니다 Save for Web 화면에서 Metadata 옵션을 None으로 지정합니다
그 외에도 다양한 메타데이타 제거 도구가 있으니 가장 적합한 도구를 사용하여 메타데이타를 제거 후 다시 체크해보시면 됩니다.

이미지 최적화 분석 도구를 NULI를 통해 안정적으로 제공해드릴 수 있게 되어 기쁩니다.
웹서비스 최적화를 고민하는 분들에게 널리 사용되었으면 하는 바램입니다.
향후 N-MET 기능에 추가하는 등 더욱 편리하게 사용하실 수 있도록 지속적으로 개선해 나가겠습니다.
고맙습니다.

댓글 0
댓글을 작성하려면 해주세요.