이미지 최적화

이번 성능 미션을 진행하면서 이미지 최적화했던 부분을 정리해보고자 한다. 

 

결론부터 말하자면 10.2MB 크기의 hero.png를 webp를 적용하여 236kB 크기의 hero.webp로 최적화할 수 있었는데 생각보다 새로 배우게된 점과 새로 알게된 점이 많아서 아주아주 흥미로웠다.

이미지 최적화를 하는 이유

브라우저에서 이미지 파일을 보여줄 때는 네트워크 통신을 한다. 따라서 큰 용량의 이미지보다(원본 이미지) 작은 용량의 이미지(리사이징된 이미지)를 가져오는 것이 네트워크 비용을 생각했을 때 더 효율적이다. 실제로 리사이징된 이미지는 원본 이미지보다 용량이 몇배는 차이가 난다.

이미지 최적화 방법

• PNG 대신 JPEG(JPG) / WebP 포맷 활용을 권장한다. (단, 알파 채널이 필요할 경우에는 PNG 사용이 필수)
• 이미지에 width, height 속성을 명시적으로 사용할 것을 권장한다. (브라우저가 리사이징하기 쉽도록)
• 이미지 용량은 75% 이상 품질로 최대한 압축하고, 사용할 크기에 맞게 리사이징한다. 

Webp

webp라는 포맷은 구글에서 이미지 손실을 최소화하면서 사이즈를 줄여, 다운로드의 시간을 아끼기 위해 만든 이미지 포맷이다. 이미지의 무손실과 손실 압축(lossless and lossy compression)을 제공하고 있다.

무손실 이미지의 경우 같은 화질의 png format과 비교했을 때 26% 사이즈가 감소되고 손실 이미지의 경우는 동일한 SSIM index(두 이미지의 비슷한 정도를 비교하는 방법)의 JEPG이미지와 비교했을 때 25%-34%가 감소된다고 한다.

 

🧐 그렇다면 손실 압축, 무손실 압축 뭐가 다른 걸까??

손실압축

손실 압축 방법은 눈에 띄지 않는 조금의 데이터를 제거한다. 이 기술은 이미지 크기를 크게 줄이지만, 파일을 원래 형식으로 복원 할 수는 없다. 손실 압축은 데이터 품질이 최우선 순위가 아닌 경우 유용하기 때문에, 파일이나 데이터의 품질을 약간 떨어 뜨리더라도 데이터를 편하게 보내거나 저장할때 사용한다. 이러한 유형의 데이터 압축은 오디오 신호 및 이미지와 같은 유기적 데이터에 사용된다.

무손실압축

무손실 압축 방법은 데이터의 품질이 손상되지 않기때문에 원래 형식의 데이터를 재구성 할 수 있다. 이 기술을 사용하면 파일을 원래 형식으로 복원 할 수 있다. 무손실 압축은 압축 비율의 성능을 향상시킬 수있는 모든 파일 형식에 적용할 수 있다.

cwebp

cwebp이라는 command line 명령어는 PNG, JPEG 이미지 파일을 Webp format으로 바꿔준다. 다음과 같은 명령어로는 PNG 이미지를 80%의 퀄리티를 유지하면서 Webp 이미로 바꿀 수 있다.

 

cwebp -q 80 image.png -o image.webp

 

- o [원하는 output name 지정]

output name을 지정한다.

 

- lossless

image를 무손실로 압축한다.

 

- near_lossless [int]

무손실에 거의 가까운 수준으로 이미지를 압축한다. int의 범위는 0 ~ 100이고 전형적으로 기본 수치는 60이다.

 

- q [float]

0 ~ 100 사이로 rgb요소들을 압축한다. default는 75이다.

 

- resize [width] [height]

이미지의 크기를 입력한 width, height에 맞춰서 resize 해준다. width나 height 둘 중 하나에 0이 입력되면 자동으로 원본 사진의 비율에 맞춰서 resize한다.

 

- af

이미지 최적화에 더 많은 시간이 걸리더라도 더 균형잡인 퀄리티의 이미지로 변형해준다.

 

 더 많은 옵션 보러가기 

 

그렇다면 webp를 본격적으로 적용해보자.

1. webp 설치

brew install webp

2. cwebp을 통해서 이미지 압축 실행 (default 75)

여러 압축 방법을 써보면서 어떤 압축이 얼마나 내 이미지를 최적화 해주는지 비교해보았다.

 

손실 압축 60 

 

cwebp -q 60 image.png -o image.webp

 

결과: 10.7MB → 424KB

 

 

손실 압축 75

 

cwebp -q 75 image.png -o image.webp

 

결과: 10.7MB → 493KB

 

 

near-lossless 60

 

cwebp -near_lossle 60 image.png -o image.webp

 

결과: 10.7MB → 4MB

 

3. 위처럼 많은 경우의 수로 최적화를 시도해보다가 최종적으로 다음과 같은 방법을 적용했다.

• 손실 압축(75)
• resize width: 2400 height: 원본 사진 비율 맞춰서 자동으로 조정 (width를 2400px로 한 이유)
• 더 균형잡인 퀄리티의 이미지로 변형

cwebp -q 75 -resize 2400 0 -af src/assets/images/hero.png -o src/assets/images/hero.webp

 

결과: 10.7MB → 236kB

 

 

거의 원본 이미지에서 97.8%를 압축할 수 있었다. 그런데 원래 목표였던 120kB 밑으로 줄이지 못했다 ㅜ ㅜ 조금 더 찾아봐야겠다 ! 

 

출처

https://nuli.navercorp.com/community/article/1132444

https://ko.gadget-info.com/difference-between-lossy-compression

https://flothemes.com/flothemes-image-sizes/