Home IT/WEB 웹사이트 이미지 용량 최적화 - TinyPNG

웹사이트 이미지 용량 최적화 – TinyPNG

이미지 최적화(image optimizition)를 해야하는 이유

웹페이지를 로딩할 때 대부분의 경우 이미지를 로딩할 때 시간이 많이 걸린다. 네이버 메인 페이지를 접속해서 파일체크를 해보았다. 5.8M 중에 3.6M 가 이미지를 차지했고 JS 파일이 1.5M 를 차지 했다. 이미지 비중이 크다. 이처럼 이미지를 최적화 시키지 않으면 그만큼 페이지를 로딩하는데 시간이 걸리고 서버에 저장되는 파일 용량이 커지게 되어 이는 서버를 유지시키는데 비용이 많이 들 수 있다.

inline ad

저의 경우 서버로 마이그레이션 하기 전 비트맵 이미지의 경우 용량을 최적화 시켜서 올리는데 TinyPNG 온라인 서비스를 이용한다. 프로그램을 설치하지 않아도 무료로 서비스를 이용할 수 있기 때문에 좋다. PNG 뿐만 아니라 JPG 파일도 가능하다.

tinypng

TinyPNG의 역할

TinyPNG 는 스마트 손실 압축 기술을 사용하여 PNG 파일의 파일 크기를 줄입니다. 이미지의 색 수를 선택적으로 줄이면 데이터를 저장하는데 필요한 바이트 수가 줄어든다. 그 효과는 거의 보이지 않지만 파일 크기에 있어 매우 큰 차이를 만들어 낸다.

TinyPNG 사용 이유

PNG는 투명한 이미지를 저장할 수 있는 형식 이다. 이 프로그램은 이미지를 자동으로 최적화 시켜 웹 서버 로딩 속도가 빨라지고 스토리지 공간과 대역 폭이 절약 된다.

TinyPNG 는 전 세계 수천개 회사에서 신뢰하는 스마트 png 및 jpeg 압축을 위한 무료 온라인 서비스이다. 따로 프로그램을 설치할 필요없이 이미지를 드래그 해놓으면 알아서 압축되고 다운로드 받을 수 있다.

TinyPNG를 이용한 이미지 용량 최적화

위의 이미지가 오리지널 이미지이고 아래가 압축한 이미지이다. 용량을 비교하면 195kb 였던 이미지가 무료 41.2kb 로 최적화 되었다. 이미지를 비교해도 큰 차이가 없어보인다. 파일 가로 크기가 1920px 일 경우 격차가 더 커지게 된다.

TinyPNG 를 이용한 이미지 압축 결과
오리지널 사진
압축한 사진

이미지 최적화 체크리스트

  • 벡터 형식 선호: 벡터 이미지는 해상도 및 배율에 독립적이므로, 여러 기기 및 고해상도 환경에 가장 적합합니다.
  • SVG 자산 최소화 및 압축: 대부분의 그리기 애플리케이션에서 생성하는 XML 마크업에는 불필요한 메타데이터가 들어 있는 경우가 많습니다. 이러한 메타데이터는 삭제할 수 있습니다. 서버가 SVG 자산에 대해 GZIP 압축을 적용하도록 구성되었는지 확인하세요.
  • 최적의 래스터 이미지 형식 선택: 기능적인 요구사항을 확인하고 각각의 특정 자산에 맞는 형식을 선택합니다.
  • 래스터 형식에 최적화된 품질 설정 실험: ‘품질’ 설정을 낮추는 것을 두려워하지 마세요. 결과가 매우 좋은 경우가 많으며 바이트 절감 효과는 상당합니다.
  • 불필요한 이미지 메타데이터 삭제: 많은 래스터 이미지에는 위치정보, 카메라 정보 등 자산과 관련하여 불필요한 메타데이터가 들어 있습니다. 적합한 도구를 사용하여 이러한 데이터를 삭제하세요.
  • 배율이 조정된 이미지 제공: 서버의 이미지 크기를 조정하고 ‘표시’ 크기를 이미지의 ‘실제’ 크기와 최대한 가깝게 하세요. 특히 대규모 자산의 경우 크기 조절을 하면 높은 오버헤드를 초래하므로 주의해야 합니다.
  • 자동화, 자동화, 자동화: 자동화된 도구 및 인프라에 투자하여 모든 이미지 자산이 항상 최적화되도록 하세요.

참고문서 : 이미지 최적화 https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=ko

RECENT POSTS

After Effects 엥커포인트 중앙으로 이동하는 방법 및 스크립트

After Effects 에서 애니메이션을 하기 위해서는 움직이는 대상의 Anchor Point 에 따라서 크기나 위치, 회전 등의 차이가 있습니다. After Effect 에서는 Layer content 에...

제주도 도로교통상황, 통제상황 및 이번주 제주도 날씨 2023-01-25

제주도로교통상황 한라산 탐방은 현재 전면 통제중이며 제주시와 서귀포시를 잇는 1100도로, 5.16도로 전 구간은 전차량 통제상황, 소형차의 경우 제1산록도로가 통제 상황입니다. 제주교통통제상황: https://www.jjpolice.go.kr/jjpolice/notice/traffic.htm ...

[EPIC GAME] Horizon Chase Turbo 2022.12.18 까지 무료 다운로드

Horizon Chase Turbo 를 2022.12.18일 01:00 까지 EPIC GAME 에서 무료로 다운 받을 수 있습니다. 오락실 자동차와 같은 레이싱 게임입니다. https://store.epicgames.com/ko/p/horizon-chase-turbo https://www.youtube.com/watch?v=5LMugZ300L8 Horizon Chase Turbo Horizon Chase Turbo는...

제주도로교통상황 및 이번주 제주도 날씨 2022-12-17 현재

제주도로교통상황 한라산 탐방은 현재 전명 통제중이며 제주시와 서귀포시를 잇는 1100도로 전 구간은 통제상황입니다. 5.16도로 마방목지~성판악 / 성판악~숲터널 구간은 소형 자량인 경우 체인을 설치해야만 운행 가능합니다. 제주지방기상청은...