wooeorbs
commented
4 months ago 우고이라(ugoira) 파일을 연결 프로그램에서 ZIP로 열어보면 jpg 또는 png파일들과 animation.json 파일이 있습니다. animation.json가 자바스크립트로 로테이션, 프레임시간을 조절하는 부분입니다.
ZIP형식으로 다운 받는건 사실상 animation.json가 없는 우고이라와 똑같습니다.
참고 https://www.clien.net/service/board/lecture/14677378
만약에 우고이라를 webp로 변환시켜야한다면 우고이라 파일들을 webp 한 파일로 변환시킬 필요없이 jpg, png를 webp파일로 바꾸고, animation.json 메모장에 jpg, png 확장자를 webp로 바꿔넣으면 됩니다. 그러면 꿀뷰에서 알아서 자연스럽게 재생이 됩니다. 굳이 합치고 프레임 시간을 추가할 필요는 없습니다.
물론 한 파일로 합치면 용량을 더 줄여서 이득이긴하지만 webp로 저장하면 이미지와 애니메이션을 구분할 수 없다는 문제가 있습니다.
KurtBestor![https://i.pximg.net/img-zip-ugoira/img/2018/09/18/03/16/21/70752726_ugoira1920x1080.zip","originalSrc":"https://i.pximg.net/img-zip-ugoira/img/2018/09/18/03/16/21/70752726_ugoira1920x1080.zip","mime_type":"image/jpeg","frames":[{"file":"000000.jpg","delay":1000},{"file":"000001.jpg","delay":120},{"file":"000002.jpg","delay":120},{"file":"000003.jpg","delay":120},{"file":"000004.jpg","delay":500},{"file":"000005.jpg","delay":120},{"file":"000006.jpg","delay":120},{"file":"000007.jpg","delay":50},{"file":"000008.jpg","delay":50},{"file":"000009.jpg","delay":50},{"file":"000010.jpg","delay":50},{"file":"000011.jpg","delay":50},{"file":"000012.jpg","delay":50},{"file":"000013.jpg","delay":50},{"file":"000014.jpg","delay":50},{"file":"000015.jpg","delay":50},{"file":"000016.jpg","delay":50},{"file":"000017.jpg","delay":50},{"file":"000018.jpg","delay":50},{"file":"000019.jpg","delay":50},{"file":"000020.jpg","delay":50},{"file":"000021.jpg","delay":50},{"file":"000022.jpg","delay":50},{"file":"000023.jpg","delay":160},{"file":"000024.jpg","delay":160},{"file":"000025.jpg","delay":160},{"file":"000026.jpg","delay":160},{"file":"000027.jpg","delay":160},{"file":"000028.jpg","delay":160},{"file":"000029.jpg","delay":160},{"file":"000030.jpg","delay":160}],"zipSize":5330173](https://i.pximg.net/img-zip-ugoira/img/2018/09/18/03/16/21/70752726_ugoira1920x1080.zip","originalSrc":"https://i.pximg.net/img-zip-ugoira/img/2018/09/18/03/16/21/70752726_ugoira1920x1080.zip","mime_type":"image/jpeg","frames":[{"file":"000000.jpg","delay":1000},{"file":"000001.jpg","delay":120},{"file":"000002.jpg","delay":120},{"file":"000003.jpg","delay":120},{"file":"000004.jpg","delay":500},{"file":"000005.jpg","delay":120},{"file":"000006.jpg","delay":120},{"file":"000007.jpg","delay":50},{"file":"000008.jpg","delay":50},{"file":"000009.jpg","delay":50},{"file":"000010.jpg","delay":50},{"file":"000011.jpg","delay":50},{"file":"000012.jpg","delay":50},{"file":"000013.jpg","delay":50},{"file":"000014.jpg","delay":50},{"file":"000015.jpg","delay":50},{"file":"000016.jpg","delay":50},{"file":"000017.jpg","delay":50},{"file":"000018.jpg","delay":50},{"file":"000019.jpg","delay":50},{"file":"000020.jpg","delay":50},{"file":"000021.jpg","delay":50},{"file":"000022.jpg","delay":50},{"file":"000023.jpg","delay":160},{"file":"000024.jpg","delay":160},{"file":"000025.jpg","delay":160},{"file":"000026.jpg","delay":160},{"file":"000027.jpg","delay":160},{"file":"000028.jpg","delay":160},{"file":"000029.jpg","delay":160},{"file":"000030.jpg","delay":160}],"zipSize":5330173){kind=link}
webp 설정값에 따른 변환 용량 차이 (feat. jpg에서 webp로 변환할 때 이미지 용량 증가 이슈) https://velog.io/@effirin/webp-%EC%84%A4%EC%A0%95%EA%B0%92%EC%97%90-%EB%94%B0%EB%A5%B8-%EB%B3%80%ED%99%98-%EC%9A%A9%EB%9F%89-%EC%B0%A8%EC%9D%B4-feat.-jpg%EC%97%90%EC%84%9C-webp%EB%A1%9C-%EB%B3%80%ED%99%98%ED%95%A0-%EB%95%8C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%9A%A9%EB%9F%89-%EC%A6%9D%EA%B0%80-%EC%9D%B4%EC%8A%88
우고이라(ugoira)는 픽시브에서 주로 쓰는 JPG, PNG 포맷의 일러스트를 움직이는 확장자로 꿀뷰는 우고이라 확장자를 지원하므로 자체 확장자를 다운받을 수 있게 해야 합니다.
ZIP는 우고이라, GIF, WEBP(애니메이션)에 들어있던 프레임 시간, 템포 조절하는 부분을 없애므로 안좋으며 GIF는 무손실 압축 포맷이라 JPG(손실) 포맷의 우고이라를 변환할 때 무손실로 하기때문에 용량이 매우 커져서 안좋습니다. 또한 우고이라는 gif의 상위호환으로 GIF로 변환시키면 색깔 표현 문제가 있습니다.
WEBP는 손실과 무손실방식 둘다 갖고 있는 포맷이지만 jpg와 png 포맷을 인식해서 변환하는 기능을 추가하지않으면 쓰지 않는 게 좋습니다. (이미지 파일 확장자(image.open->image.format)를 읽는 기능이 있어야합니다.) 우고이라(ugoira)는 jpg, png를 둘다 쓰는 확장자이기 때문에 그렇습니다. 그리고 화질에서 100%으로 설정해도 손실압축으로 나오는 것으로 보아 손실압축방식이라고 표기해놔야 할듯 합니다. 지금까지 GIF를 WEBP로 변환시키는 줄 알고 100% 화질로 설정, 무손실 압축방식인줄 알고 썼는데 해골물 마셨던 기분입니다. 손실압축 100% 화질은 절대로 쓰면 안됩니다. 그런데 그걸 제가 썻던 셈이죠... 왜냐하면 JPG로 저장할 때 70, 80%로 손실압축하기떄문에 webp로 100% 손실압축하면 용량이 30% 늘어납니다. 그래서 webp 손실압축은 보통 70, 80%로 설정하는 데 그걸 쓰는 경우는 jpg, png 포맷일 때 쓰는데 우고이라도 그러하니 쓰면 좋은 것 같지만 문제는 PNG는 무손실 포맷이라 상황에 따라 손실 또는 무손실 압축방식으로 바꿔서 변환해야합니다. 그리고 픽시브에 올린 우고이라 확장자의 움짤은 대부분 이미지 사이즈가 작습니다. 즉 무손실 압축으로 하는게 좋습니다. 이미지 사이즈가 작은 움짤을 굳이 화질 훼손해가며 손실압축할 필요는 없습니다. 참고로 PNG를 webp로 손실압축 80% 화질 하면 약 84%, 무손실압축 하면 약 42%입니다
그렇기에 webp를 쓴다면 jpg는 손실압축 80%, png는 무손실압축 100%가 좋습니다. 포맷변환을 쓰는 경우는 용량최적화때문이니까요. 그러나 우고이라(ugoira)를 지원하는 꿀뷰가 있기때문에 원본 그대로 가지고 싶다면 용량최적화, 포맷변환을 쓸 필요없습니다.