[UX/UI디자인 꿀팁] 이미지 용량을 확 줄여주는 사이트, TinyPNG

TinyPNG는 UX/UI 디자이너에게 아주 유용한 사이트입니다.

TinyPNG 사이트의 사용 방법과, UX/UI디자인 시에 저용량 이미지의 사용이 중요한 이유에 대해 이야기해보겠습니다. 

 

UX/UI디자인시에 저용량 이미지를 사용해야 하는 이유

일반적으로 웹사이트 구축 시에 용량이 큰 이미지는 업로드가 어렵습니다. 페이지 로딩 시간이 느려져 사용자 경험에 부정적인 영향을 줄 수 있기 때문입니다. 웹사이트가 로드될 때 브라우저는 이미지, 스타일시트, 스크립트 등을 포함한 페이지의 모든 리소스를 다운해야 하는데, 이미지가 너무 크면 페이지 로딩 시간이 느려질 수 있습니다. 성질 급한 현대인들에게 느린 웹사이트를 이용하는 것 만큼 빡치는 일이 없겠죠? 

이런 문제를 방지하려면 품질을 너무 많이 다운시키지 않으면서 파일 크기를 줄여 웹용 이미지를 최적화하는것이 중요합니다. 

이 때 UX/UI디자이너를 도와줄 수 있는 사이트가 바로 TinyPNG입니다.

 

TinyPNG 사이트의 기능

tinypng는 품질 저하 없이 이미지를 압축하고 최적화할 수 있는 웹사이트입니다. TinyPNG에 이미지를 업로드하면, 사이트 내에서 "smart compression"이라는 기술을 사용하여 파일 크기를 줄입니다. 이 기능은 사용자의 육안으로는 그 차이를 절대 구별할 수 없지만, 사용되는 색상의 수를 현저히 줄여줘 그 용량을 현저히 낮추어 최적화시켜 줍니다.

 

TinyPNG사이트에서 이미지 용량 낮추는 법

사용법은 아주 간단하고 직관적이어서 누구나 한 번만 해보면 바로 익힐 수 있습니다.

 

1. https://tinypng.com/ 사이트에 접속합니다.

2. 용량을 줄이고자 하는 이미지를 실선으로 표시된 영역에 드래그합니다.(파일 형식은 WebP, PNG, JPEG이며 용량은 5mb 이내여야 합니다.)

3. 위와 같이 용량 압축이 완료된 이미지를 다운받아 줍니다.

다운받은 이미지의 압축을 풀면, 용량이 현저히 작아진 이미지를 확인할 수 있습니다.

 

용량이 이전과 비교해 확 줄어들면 이미지가 깨져보이게 되는 건 아닌가 우려할 수 있는데, 깨지는 현상 전혀 없고 육안상으로 식별이 불가능한 수준입니다. 

 

좌측의 이미지가 용량 다운 전이고, 우측은 TinyPNG를 통해 용량을 78퍼센트나 낮춘 이미지입니다.

전혀 다른 점을 찾을 수 없습니다.

 

파일의 상세정보를 확인해보면, 이미지의 용량이 3.1메가바이트에서 786키로바이트로 다운된 걸 볼 수 있습니다.

 

Tinypng와 유사한 사이트

Tinypng와 유사한 기능을 하는 사이트로는 Kraken.io가 있는데, 회원 가입이 필요할 뿐더러 유료입니다.

간혹가다 tinyPNG가 중국 사이트라 찝찝하다는 의견을 볼 수 있는데... 무료 사이트 중엔 대체제가 없으므로 저는 그냥 씁니다..

 

UX/UI디자인시에 웹에 업로드되는 이미지의 적정 사이즈는?

웹에 업로드되는 이미지의 적절한 크기는 상황에 따라 달라질 수 있습니다. 하지만 웹 디자인 시에 최적화하는데 명심해야 할 몇 가지 일반적인 지침이 있습니다.

1. 해상도: 이미지의 해상도는 표시되는 장치에 맞게 최적화되어야 합니다. 인쇄용 고해상도 이미지는 웹에 업로드하기에 적합치 않습니다. 

2. 압축: 이미지의 품질을 너무 많이 희생하지 않고 파일 크기를 줄이려면 압축해야 합니다. 손실 압축 기술은 이미지에서 일부 데이터를 제거하여 파일 크기를 줄이는 데 사용할 수 있습니다.(위에서 다룬 tinyPNG와 같은 기능입니다.)

3. 파일 형식: 이미지는 JPEG, PNG, GIF와 같은 웹 친화적인 파일 형식으로 저장해야 합니다. 각 파일 형식에는 각각의 장단점이 있으므로 가장 적합한 형식을 선택해야 합니다.

이러한 지침을 따라 디자이너는 이미지가 웹 사용에 최적화되어 페이지 로딩 시간을 개선할 수 있도록 해 사이트 방문자에게 더 나은 사용자 경험을 제공해야 합니다.