이미지 최적화 하기 포스트
https://tech.youha.info/6aea5352-5476-4f3e-9a25-b4cbffc39270

이 글에서 실려있는 이미지 최적화에 대한 내용은 대단히 유용하고 효율적이다.
나도 주 업무와 관련있고해서 다 사용하는 요소들이고해서 다들 경험해보고 잘 쓰는것이다.

개발자 입장에서는 아주아주 굉장히 효율이 높지만 이러한 방법들을 정답이라고 맹신하면 절대로 안된다.

tinypng로 압축하는거랑 webp로 변환 시키는 방법들을 사용하면 대단히 많은 용량을 절약할 수 있다. 하지만 그리하는데 손실은 분명히 일어나는것을 확인할 수 있었다.
하지만 일반적으로 바라보면 차이점을 느끼기 힘들다. ㅎㅎ

일단 대표적으로 두개의 포맷에 대하여 어떤 손실이 일어나는지에 대하여 소개하고자 한다.
이미지 준비 귀찮아서 경험을 토대로 그저 글로만..

PNG

8비트와 24비트 이미지가 있는데 보통 24비트 이미지로 사용되며 호환성이 대단히 높아서 jpg와 대표적으로 사용되는 포맷이다.
하지만 용량은 비압축 수준으로 대단히 많고, 투명까지 지원되니 원본으로 많이 사용되기도 한다.

이 24비트 이미지를 TinyPNG 서비스를 활용하여 용량을 줄이는데 언제나 놀라울 정도로 압축된다. 하지만 자세히 들여다보면 디더현상이 나타나는것을 볼 수 있었다.
8비트 스타일의 이미지로 보여지기도 하는데 이게 좀 애매한게 그러기도 하고 그렇지 안다는 것이다. 그래서 어떤 모습으로 보여지는 이미지에 따라 달라지다보니 바꿔보고 자세히 확인해보는것이 중요하다.
주로 그라데이션이 있는 부분은 쉽게 티가나기 때문에 꼭 확인해봐야 할 필요가 있다.

WEBP

webp 포맷은 처음 접할때는 정말로 사이즈 쇼크였다. 그래서 개인적으로 사용하는 서비스에서 썸네일 이미지를 만드는 부분에서 꼭 사용해오고 있었다.
그리고 용량대비 결과물이 너무 좋아서 모두 사용할 생각이었지만 결점들이 하나하나 드러나기에 용도를 따져가며 사용하기로 했다.

첫번째로 메타 데이터를 포함시키기 까다롭다.

파일을 변경할때 메타 데이터가 항상 지워지기에 포맷의 특성으로 생각했다.
용량이 적어지기 때문에 다 지워버리나 싶었는데 포함시킬 수 있어 보였다. 이곳에서 확인할 수 있어보였다.
하지만 보통 변환 프로그램들이 메타데이터를 포함시킬 수 있는 옵션이 없어서 대단히 불편하다. ㅠㅠ

탁해지는 컬러

이건 최근에 발견한 차이점이었는데 srgb 프로파일을 가지고 있는 이미지를 webp로 바꿨을때 색 영역이 좁아지는 인상을 받았다.
아마도 전체적으로 채도가 빠지는것보다 컬러표현 영역이 좁아지지 않나 싶다. webp가 컬러 프로파일을 지원하는걸로 보이지 않고, 좀 다른 코덱을 사용하는걸로 보였다. 이것은 일반적인 프로그램 (심지어 포토샵)에서 webp로 저장했을때 이러한 문제가 일어났다.
문서에서는 소개가 되어 있지만 변환 프로그램에서는 아주 주시되어있다보니 활용할 수 있는 여력이 없다.

https://note.redgoose.me/article/4059/ 이 글에서 컬러 문제를 해소하는 방법이 나왔다.

---

맺으며..

잘 사용하다가 뼈아픈 경험을 하면서 맹신하면 안되는 깨달음을 얻기만 한다. (역시 용량이 많으면 그만한 이유가 있다. ㅠㅠ)
개인적으로 이미지를 다루는 일도하기에 디테일 부분에 대하여 대단히 까다롭기에 이러한 퀄리티 이슈를 느낄 수 있었을지도...

webp의 경우에는 문서에서는 해결책들이 분명히 나와있는거 같은데 아직 삽질해볼 여력이 없어서 손을 못대고 있는데 메타데이터나 색공간 이슈들을 해결할 수 있다면 직접 컨버트 프로그램 하나 만들어서 잘 써먹을 수 있어 보인다.
누가 만들어줬으면 좋겠지만.. ㅠㅠ

디지털 이미지들을 다루다보니 gif, jpg 표현의 특성, jpg 퀄리티가 어느정도로 저장되어 있는지 뭐.. 그런것들 대략적으로 구분하게 된다. ㅋㅋ