이미지 사이즈 줄이기, 용량 압축 (feat 포토샵& tinyPNG)

 

 

현재 다니는 곳에서는 주로 포토샵, XD로 디자인 시안을 넘겨받는데,

작은 아이콘에서는 문제가 크게 되진 않으나

배경 이미지 등을 저장할 때는 용량이 클수록 리소스도 많이 차지하고 로딩시간도 느려진다.

따라서 최대한 퀄리티를 살리면서 용량을 줄이는 것이 중요하다.

 

 

 

save for web

 

포토샵 작업 시 이미지 저장할 때에는, 무조건 save for web을 사용한다.

이 때 주의할 점은,

* 퀄리티는 70~80 정도로 지정한다.

- 이렇게 해도 육안으로는 큰 차이가 없다.

* metadata는 none으로 설정한다.

- 중요하지 않은 데이터는 생략하여 용량을 더 낮춘다.

 

이렇게 하면 일반 save와 비교했을때 이미지 크기를 반 정도로 줄일 수 있다.

여기서 이미지 압축하는 사이트를 이용하여 한번 더 압축을 해주면,

원본 사이즈의 1/4 가량으로 용량이 줄어든다.

 

이미지 압축 사이트는 이미지 파일이 갖고 있는 색상수를 줄이고 메타태그 등을 삭제하여 용량을 압축시키는데,

색상수를 줄인다 하더라도 역시 육안 판별은 거의 불가능하다고 보면 된다.

자주 이용하는 곳은 tinypng 라는 사이트이다.

 

 

https://tinypng.com/

TinyPNG – Compress PNG images while preserving transparency