이미지 최적화에 대하여

웹 성능을 위해 이미지 최적화를 했던 내용에 대해 정리하고자 한다. 

 

이미지 최적화의 장점

먼저 이미지 최적화를 통해 용량을 줄인다면 담음과 같은 장점이 있다. 

• 웹 페이지 바이트 절약
• 브라우저가 다운로드해야 하는 바이트가 줄어드므로 클라이언트 대역폭에 여유가 생김
• 콘텐츠를 빨리 다운로드하여 화면에 랜더링 하므로 좋은 사용자 경험을 제공
• 서버 저장공간이 적게 필요하므로 저장공간 확보와 비용절감

 

일단 우리가 보는 웹페이지의 거의 모든 이미지는 최적화된 이미지라는 사실이다. aws s3와 같은 클라우드 버킷 스토리지에 이미지를 올려놓고 관리하는 경우 사실 저장공간보다는 서버에서 클라이언트로 데이터를 전송하는 용량에 따라 서버의 비용과 속도에 영향을 미친다. 

 

이미지 최적화 방법

1) 적절한 포맷 사용하기

https://kokone.co.kr/2620 , (2074 * 1382) 1.33MB

 

이미지를 최적화하는 방법에는 원본 이미지 자체 크기에 따라 적절한 확장자 파일 사용하기이다. 웹사이트에서 많이 사용되는 파일은 jpeg, webp, avif 등이 있다.  

 

구글에서 제공하는 Squoosh.app을 사용해서 파일 포맷을 쉽게 변경할 수 있다.

Squoosh

 

해당 이미지를 여러 포맷으로 변환한 후 브라우저에서 이미지를 불러온 결과이다. 

같은 이미지

 

네트워크의 결과를 보면 Type에 따라 Size 바이트와 , Time 다운 속도 등이 다른 것을 확인할 수 있는데 크기가 줄어들수록 로딩 속도도 빠르다는 것을 확인할 수 있다. 

 

webp는 jpeg보다 약 93.66%의 크기가 감소하였고, avif는 webp보다 약 60.59% 크기 감소,  jpeg보다는 무려 97.5%퍼센트의 크기가 감소했다. 

 

차례대로 비교해보면 jpeg  webp  avif 순으로 크기가 작아지고 있다. 웹 사이트에서 이미지가 차지하는 바이트의 비중은 매우 크다. 그러므로 최대한 적은 용량의 이미지를 사용하는 것이 성능에 훨씬 유리하다. 

 

jpeg	정지 이미지에 많이 사용됨, 현재 가장 많이 사용, 크롬, 엣지 , 파이어폭스, 오페라, 사파리, IE등 많은 브라우저에서 사용 가능
webp	웹페이지에서 널리 사용되고 있는 jpeg를 대체하기 위해 제시된 형식. jpeg보다 압축률이 뛰어남
avif	손실/무손실 압축 지원, GIF같은 애니메이션 지원, jpeg, webp 보다 뛰어난 압축 효과.

 

 

2) 이미지 사이즈 조절하기

두번째는 이미지의 크기 자체를 줄여주는 것이다. 특히 가로폭의 차이가 클 수록 이미지 용량 차이가 매우 크다.  

550*700     43.3kb

2074 * 1382 크기의 사진 크기를 550 * 700 사이즈로 조절하였다. 그 결과 1.33MB의 크기가 43.4KB로 무려 96.74%감소하였는데 이 결과는 사이즈 조절 없이 jpeg파일을 webp로 변환한 결과보다 큰 감소율을 나타낸다.  

 

브라우저에서 사용할 수 있는 다른 이미지 최적화 방법

image CDNs 사용, CSS Sprite 기법, lazy loading사용