H : T : M : G : A : W

블로그 로딩속도 개선?! 이미지최적화 알아보기블로그 로딩속도 개선?! 이미지최적화 알아보기

Posted at 2013. 11. 10. 02:27 | Posted in ▶ 똑똑한 블로그/블로그(Blog)


블로그 로딩속도 개선?! 이미지최적화 알아보기



블로그 및 인터넷에 사진을 올릴때 이미지 파일을 최적화 하시나요? 본인 역시도 최근이전까지는 특별히 이미지 사이즈만 신경쓰고 최적화에 대해서는 별로 신경을 안썻었는데요, 최근 블로그 로딩 속도가 좀 느려져서 여러가지 최적화 방법을 알아내던 중 이미지최적화에 대해 조금 깊이 알게 되었습니다. 





결론적으로 웹에서 이미지를 빨리 읽을 수 있게 하기 위해서는 이미지에 포함된 촬영정보,촬영시간,촬영기기 등 여러가지 정보를 포함한 메타데이터를 삭제해야만 이미지 사이즈를 최대한으로 줄여서 로딩속도를 개선할 수 있습니다. 그래서 오늘은 이미지가 최적화 되어있는지 알려주느 사이트를 소개해드릴까 합니다. 




  

위 사이트는 '널리'라는 곳으로 네이버가 제공하는 웹 표준화 가이드 프로젝트가 진행되는 공간입니다. 아래와 같이 웹 표준화, 접근성과 관련한 여러가지 메뉴가 있으며 이중 Tools 에서는 아래와 같이 이미지 옵티미제이션 체커가 제공됩니다. 간편하게 이미지 주소만 입력하면 해당 이미지가 메타데이터를 포함하고 있는지 보여주게 됩니다. 


이미지최적화




제 블로그 타이틀이미지입니다. 주소를 복사한 후 아래에 붙여 넣습니다. 역시, 일부로 배경을 제거한 PNG로 생성하고자 "WEB 용으로 저장"을 이용한 까닭에 메타데이터가 남아 있지 않은 최적화된 이미지네요.



메타데이터




그 다음으로는 프로필영역에 있는 작은 페이스북 이미지입니다. 





특별히 배경을 뺄목적이 없었기에 JPG로 그냥 저장을 해서 사용한 까닭에 역시 모든 메타데이터들이 남아있습니다. 이렇게 메타데이터가 포함되어 있다면 당연히 사이즈도 커지게 되고 로딩 속도고 지연될 수 밖에 없습니다. 물론, 위와 같이 작은 이미지는 체감이 어렵겠지만 블로그,카페 등 이미지를 업로드하는 과정에서 내가 디지털카메라로 찍은 jpg를 아무런 편집이나 보정없이 올린다면 그 데이터양은 엄청 많아 질 수 밖에 없습니다. 




이렇게 확인된 메타데이터를 제거하는 방법은 사실 대부분의 이미지 편집프로그램에서 제공해주므로 특별히 설명을 해드리지 않아도 될 듯합니다 외부 데이터를 많이 받아올 수 밖에 없는 블로그의 경우 최소한 이미지 로딩속도만큼은 개선할 필요성이 있을 듯 합니다. 본인 역시도 앞으로 블로그에 이미지를 올릴때 메타데이터를 조금 신경써야 겠습니다. 많은 도움 되시기 바랍니다. 



    Comments

티스토리 댓글


  1. 안그래도 블로그 로딩속도가 좀 느려서 고민이 있었는데 이런 사이트가 있었군요. 다음부터는 이미지가 많은 글을 올릴 때 여기에서 확인을 해봐야 겠어요.^^

Name __

Password __

Link (Your Website)

Comment

SECRET