무손실 압축 구현

[tentasys]

이미지를 로딩하는데 너무 많은 시간이 소요되어 이미지의 용량을 줄이는 방법을 고안합니다.
무손실 압축 외에도 이미지의 화질은 보존하면서 로딩 속도를 높일 수 있는 방법을 생각합니다.

[CreatiCoding]

jpg 자체가 무손실 압축 포맷이라 png -> jpg 변환만 작업하면 될거에여.

[CreatiCoding]

https://stackoverflow.com/questions/42218785/convert-base64-png-to-jpeg-image-in-nodejs

[CreatiCoding]

https://github.com/marekventur/png-to-jpeg

[CreatiCoding]

좋은 라이브러리를 찾았습니다.

GraphicsMagick

npm install gm

[CreatiCoding]

사용 예1 입니다.

예제1

사용 예2 입니다.

예제2

[CreatiCoding]

대신 gm의 경우 이런 식으로 작성해야합니다.
출처

[CreatiCoding]

최종 사용법입니다.

const gm = require("gm").subClass({imageMagick: true});
const fs = require("fs");
gm("./test.png")
        .compress("JPEG")
        .write('./test.jpg', function(err){
                if(err)console.log(err);
        });

이 이미지는 오른쪽 png이미지(600,1600)을 jpg로 압축변환(600, 1600)하였을 때의 결과입니다.
608.6kb 에서 183.0kb로 용량이 줄었습니다.
2000% 확대 하였을때 육안으로 비교하여 별 다른 차이를 못 느꼈습니다.
실제로 픽셀 수도 같습니다.

이 이미지는 143%에서의 비교입니다.

const gm = require("gm").subClass({imageMagick: true});
const fs = require("fs");

gm("./test003.jpg")
        .compress("JPEG")
        .write('./test004.jpg', function(err){
                if(err)console.log(err);
        });

아래는 jpg 를 jpg로 압축만 진행한 결과입니다.

아래는 jpg 를 여러번 압축한 결과입니다.
이미 압축되어 있기에 용량이 변하지 않습니다. 육안으로 구별하기 힘듭니다.

[CreatiCoding]

png -> jpg나, jpg->jpg 의 경우 이미지에 따라 압축되는 정도가 다릅니다. 하지만 결론적으로 최대 압축에 도달한 경우 더이상 압축되지 않고 화질이 보장됩니다.

따라서 다운받은 이미지는 한 번정도 이 작업 거쳐 클라우드 스토리지에 저장하겠습니다.

[tentasys]

@CreatiCoding 압축 뿐만 아니라 리사이징을 고려하지 않아도 되는지 궁금합니다.
리사이징을 고려하면 이미지의 용량을 더 줄일 수 있을 것이라 생각합니다.
각각의 디바이스별 사이즈를 고려해서 리사이징을 하는 방향으로 구현하면 어떨까 생각중인데 어떻게 생각하시나요??

[CreatiCoding]

@tentasys 저번 중간보고때도 스마트폰 화면이 달라도 웹툰 앱에서 보던 것과 미세하게 다른점을 느낄 거라고 하셨죠. jpg로 선택한 이유는 손실이 없는 압축기법이였기 때문이에요. 리사이즈된다면 손실이 없을 수가 없기에 조금 지양해야된다고 생각합니다.
그리구 지금 성능을 개선시키기 위해선 이미지 크기를 줄이는 것보단 프로그램 구조를 바꾸는게 맞다고 생각됩니당