이미지 최적화(image optimizition)를 해야하는 이유
웹페이지를 로딩할 때 대부분의 경우 이미지를 로딩할 때 시간이 많이 걸린다. 네이버 메인 페이지를 접속해서 파일체크를 해보았다. 5.8M 중에 3.6M 가 이미지를 차지했고 JS 파일이 1.5M 를 차지 했다. 이미지 비중이 크다. 이처럼 이미지를 최적화 시키지 않으면 그만큼 페이지를 로딩하는데 시간이 걸리고 서버에 저장되는 파일 용량이 커지게 되어 이는 서버를 유지시키는데 비용이 많이 들 수 있다.
저의 경우 서버로 마이그레이션 하기 전 비트맵 이미지의 경우 용량을 최적화 시켜서 올리는데 TinyPNG 온라인 서비스를 이용한다. 프로그램을 설치하지 않아도 무료로 서비스를 이용할 수 있기 때문에 좋다. PNG 뿐만 아니라 JPG 파일도 가능하다.
TinyPNG의 역할
TinyPNG 는 스마트 손실 압축 기술을 사용하여 PNG 파일의 파일 크기를 줄입니다. 이미지의 색 수를 선택적으로 줄이면 데이터를 저장하는데 필요한 바이트 수가 줄어든다. 그 효과는 거의 보이지 않지만 파일 크기에 있어 매우 큰 차이를 만들어 낸다.
TinyPNG 사용 이유
PNG는 투명한 이미지를 저장할 수 있는 형식 이다. 이 프로그램은 이미지를 자동으로 최적화 시켜 웹 서버 로딩 속도가 빨라지고 스토리지 공간과 대역 폭이 절약 된다.
TinyPNG 는 전 세계 수천개 회사에서 신뢰하는 스마트 png 및 jpeg 압축을 위한 무료 온라인 서비스이다. 따로 프로그램을 설치할 필요없이 이미지를 드래그 해놓으면 알아서 압축되고 다운로드 받을 수 있다.
TinyPNG를 이용한 이미지 용량 최적화
위의 이미지가 오리지널 이미지이고 아래가 압축한 이미지이다. 용량을 비교하면 195kb 였던 이미지가 무료 41.2kb 로 최적화 되었다. 이미지를 비교해도 큰 차이가 없어보인다. 파일 가로 크기가 1920px 일 경우 격차가 더 커지게 된다.
이미지 최적화 체크리스트
- 벡터 형식 선호: 벡터 이미지는 해상도 및 배율에 독립적이므로, 여러 기기 및 고해상도 환경에 가장 적합합니다.
- SVG 자산 최소화 및 압축: 대부분의 그리기 애플리케이션에서 생성하는 XML 마크업에는 불필요한 메타데이터가 들어 있는 경우가 많습니다. 이러한 메타데이터는 삭제할 수 있습니다. 서버가 SVG 자산에 대해 GZIP 압축을 적용하도록 구성되었는지 확인하세요.
- 최적의 래스터 이미지 형식 선택: 기능적인 요구사항을 확인하고 각각의 특정 자산에 맞는 형식을 선택합니다.
- 래스터 형식에 최적화된 품질 설정 실험: ‘품질’ 설정을 낮추는 것을 두려워하지 마세요. 결과가 매우 좋은 경우가 많으며 바이트 절감 효과는 상당합니다.
- 불필요한 이미지 메타데이터 삭제: 많은 래스터 이미지에는 위치정보, 카메라 정보 등 자산과 관련하여 불필요한 메타데이터가 들어 있습니다. 적합한 도구를 사용하여 이러한 데이터를 삭제하세요.
- 배율이 조정된 이미지 제공: 서버의 이미지 크기를 조정하고 ‘표시’ 크기를 이미지의 ‘실제’ 크기와 최대한 가깝게 하세요. 특히 대규모 자산의 경우 크기 조절을 하면 높은 오버헤드를 초래하므로 주의해야 합니다.
- 자동화, 자동화, 자동화: 자동화된 도구 및 인프라에 투자하여 모든 이미지 자산이 항상 최적화되도록 하세요.
참고문서 : 이미지 최적화 https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=ko