성장가능성 200% 프론트엔드의 Dev 다이어리

[웹 성능 최적화] 이미지 파일 압축 - tiny png 사용하기 본문

퍼블리싱/웹 성능 최적화

[웹 성능 최적화] 이미지 파일 압축 - tiny png 사용하기

ZinnaJeong 2023. 3. 17. 17:30

이미지 파일은 해당 파일 정보를 메타 데이터(meta data)에 포함해 저장한다. 

 

여기서 메타데이터란 어떤 카메라로 촬영했는지, 해상도가 무엇인지 등이 메타 데이터의 대표적인 내용이다.

촬영한 이미지의 상세 정보를 눌러보면 볼 수 있는 메타 데이터

 

메타 데이터는 사람의 눈에 실제 이미지로써 보이지 않으므로,

불필요한 부분을 제거하면 크기를 상당히 줄일 수 있다고 한다.

 

 

tiny png의 온라인 서비스를 이용하면 손실 압축 방식으로 이미지 파일을 압축할 수 있다.

https://tinypng.com/

 

TinyPNG – Compress WebP, PNG and JPEG images intelligently

Make your website faster and save bandwidth. TinyPNG optimizes your WebP, PNG and JPEG images by 50-80% while preserving full transparency!

tinypng.com

 

현재 사이트에 사용중인 png이미지로 실제 테스트를 해본 결과,

67%나 용량이 줄어든 것을 확인할 수 있었다..! 두둥

 

결과물도 비교해보았을 때 커다란 차이를 느낄 수 없었고,

앞으로의 프로젝트에 적극적으로 사용해 보아야겠다고 생각했다..!

반응형
Comments