쉬운 방법의 웹페이지 이미지 최적화

텍스트만으로 이루어진 웹페이지라면 상당히 빠른 페이지 로딩 속도를 자랑하겠지만

사실상 비주얼, 디자인적인 측면에서는 높은 점수를 받기 어렵습니다.


특히 국내 웹환경에서는 멋진 타이포그라피를 보여주기도 어렵습니다.

범용성 있는 폰트라고는 달랑 굴림, 돋움 밖에 없으니깐요.


그래서 우리는 웹페이지에 텍스트가 들어간 이미지도 많이 사용하고

뿐만 아니라 아이콘, 비주얼 이미지도 많이 사용합니다.


누구나 고민하는 웹사이트 퍼포먼스.

이미지가 용량이 크면 당연히 사용자 입장에서는 체감 로딩 속도가 길어질 수밖에 없습니다.


그래서 웹퍼블리셔들은 이미지의 여백을 최소화하여 crop 한다던가

조금 퀄리티를 낮게 저장한다던가, gif, jpg, png 등 적당한 확장자를 선택해

이미지 퀄리티의 손실이 적으면서도 적은 용량의 이미지를 만들기 위해 노력합니다.



여러분들께 조금 도움이 되는 툴 하나 소개합니다.

Smush.it이라는 도구인데

예전에는 별도의 사이트가 존재했었는데

지금은 어찌된 운명인지 yahoo developer network의 하위 페이지에 속해있네요.


뭐 어찌됐든

이 도구는 이미지의 url 경로를 입력하면

같은 퀄리티에서 더 적은 용량의 이미지를 만들어줍니다.

1줄에 이미지 url 한개씩 입력하세요.

최대 5개까지 가능합니다.


그리고 smush 버튼을 누르면

얼만큼 용량이 절감되었는지 보여줌과 동시에

파일이름에 걸린 링크를 클릭하면 최적화된 이미지를 다운로드 받으실 수 있습니다.

불필요한 바이트를 제거하는 이미지 최적화 기술이라고 하네요.

이미지를 많이 사용할 수록 절감되는 용량이 더 커집니다.



손쉽게 이미지 최적화 하는 방법을 공유해보았습니다.

물론 이보다 더 중요한건 이미지를 덜 사용하는 것이겠지요.

접근성이나 SEO 측면에서도 이미지를 사용하기보다는 텍스트 사용을 권장합니다.