CMYK 이미지 경량화 처리

가끔 디자인해서 전달되는 파일이 RGB형태가 아니라 

인쇄용인 CMYK로 화면 개발팀으로 오는 경우가 있습니다.

 

CMYK는  Cyan, Magenta, Yellow, Black(청록색, 자홍색, 노란색, 검정) 4가지 색으로
잉크에 기초한 색으로 인쇄용에 사용됩니다. 
모두 섞으면 Black이 되고, 색 종류가  RGB에 비해 제한적입니다.
표현 색깔 범위가 좁지요.

 

RGB는 Red, Green, Blue 의 약자로 빛의 삼원색으로 
빛을 내서 색을 표현하는 TV, 스마트폰 화면 같은 칼라를 말합니다.
RGB를 모두 섞으면 흰색이 되며, 색 종류가 매우 풍부하다.
우리 눈으로 보는 모든 색을 표현할 수 있다고 봅니다.

RGB로 디자인한 것을 인쇄하면 인쇄잉크 색 표현이 적기 때문에
RGB로 디자인한 칼라가 모두 표현되지 않는 것이 당연합니다.
따라서 CMYK로 디자인한 이미지를 RGB로 변환하면 
일반적으로 색깔이 더 풍부하고, 밝은 느낌이 듭니다.(저만 그럴지도 모르지만 ㅠㅠ)

PicellUs Image Slimmer는 CMYK로 디자인된 이미지가 입력되었을때  
우선 RGB로 변경하고 Slimmer를 적용합니다.

따라서 결과 파일은 RGB입니다.

PicellUs Image Slimmer는 인쇄용이 아니라, 디지털 업무처리용이라고 말씀드리겠습니다.


아래 예제 이미지 참조 바랍니다.

CMYK원본 이미지(4.33M, CMYK)
픽셀러스 이미지 슬리머 적용 후(1.17M, RGB)

PicellUs Slimmer Java SDK API 매뉴얼

 

1. API 예제.

1-1. 이미지 슬림화 메소드

<%@ page import="wisedigm.picellus.handler.ResizeSlimHandler" %>
<%@ page import="wisedigm.picellus.util.FileUtil" %>
 
<%
        ResizeSlimHandler rsHandler = new ResizeSlimHandler();
              
        String srcImagePath = "e:/test/";
        String fileName = "20131005_173330.jpg";
        float jpgSlimRatio = 80;
        String original = "true";
              
        rsHandler.picSlimmer(srcImagePath, fileName, jpgSlimRatio, original);
       
%>

※     picSlimmer 메소드의 인자
첫번째 인자 : 이미지 경로
두번째 인자 : 이미지 명
세번째 인자 : 이미지 경량화 율
네번째 인자 : 백업 파일 생성 여부, True일 경우 원본 파일을 original 디렉토리로 이동.
              (true : 보존, false : 삭제)

 

1-2. 디렉토리 일괄 슬림화 메소드

<%@ page import="wisedigm.picellus.handler.ResizeSlimHandler" %>
<%@ page import="wisedigm.picellus.util.FileUtil" %>
 
<%
        ResizeSlimHandler rsHandler = new ResizeSlimHandler();
       
        String srcImagePath = "e:/test/";
        float jpgSlimRatio = 80;
        String original = "true";
              
        rsHandler.picDirSlimmer(srcImagePath, jpgSlimRatio, original);
       
%>

※     picDirSlimmer 메소드의 인자
첫번째 인자 : 이미지 경로
두번째 인자 : 이미지 경량화 율
세번째 인자 : 백업 파일 생성 여부, True일 경우 원본 파일을 original 디렉토리로 이동.
             (true : 보존, false : 삭제)

 

1-3. 이미지 리사이즈 메소드

<%@ page import="wisedigm.picellus.handler.ResizeSlimHandler" %>
<%@ page import="wisedigm.picellus.util.FileUtil" %>
 
<%
        ResizeSlimHandler rsHandler = new ResizeSlimHandler();
              
        String original = "true";
              
        int width1= 1000;
        int width2= 800;
        int width3= 600;
        int width4= 0;
        int width5= 0;
              
        rsHandler.picResizeSlimmer(srcImagePath, fileName, original, width1, width2, width3, width4, width5);
 
%>

※     picResizeSlimmer 메소드의 인자
첫번째 인자 : 이미지 경로
두번째 인자 : 이미지 명
세번째 인자 : 백업 파일 생성 여부, True일 경우 원본 파일을 보존함.
              (true : 보존, false : 삭제)
네번째 인자 : Resize 할 Width 값 (width : 0이면 Resize이미지를 생성 안함)
다섯번째 인자 : Resize 할 Width 값 (width : 0이면 Resize이미지를 생성 안함)
여섯번째 인자 : Resize 할 Width 값 (width : 0이면 Resize이미지를 생성 안함)
일곱번째 인자 : Resize 할 Width 값 (width : 0이면 Resize이미지를 생성 안함)
여덟번째 인자 : Resize 할 Width 값 (width : 0이면 Resize이미지를 생성 안함)

 

1-4. 이미지 용량 체크 메소드

<%@ page import="wisedigm.picellus.util.FileUtil" %>
 
<%
        String sourceImage = "e:/test/20131005_150759.jpg";
       
        FileUtil.getFileSizeAsKBytes(sourceImage);
 
%>

※     getFileSizeAsKBytes 메소드의 인자
첫번째 인자 : 크기 체크할 이미지 위치

PicellUs Mobile Android Engine  API Document

 

1.    개요

-       본 문서는 PicellUs 안드로이드 모바일 엔진에 대한 설치 및 사용법에 대한 가이드를 제공하는 문서입니다.

-       본 문서는 Android Studio 2021.1.1 기준으로 작성되었으며 Android Studio 버전에 따라 실제 내용이
        본 문서의 예제와 다를 수 있습니다.

 

2.    PicellUs 모바일 엔진의 주요 기능

-       이미지 파일 용량 경량화.

 

3.    라이브러리

-       picellus_lib-1.0.aar: PicellUs 안드로이드 모바일 엔진.

 

4.    적용 방법


4.1.
적용 전 준비 사항

-       PicellUs 안드로이드 모바일 엔진을 사용하기 위해서는 안드로이드 앱 개발 환경이 구성되어 있어야 합니다.

-       Android Studio : 최신 버전의 Android studio 권장.

-       테스트용 안드로이드 앱 : PicellUs 안드로이드 모바일 엔진을 적용할 테스트용 안드로이드 앱.


4.2.
라이브러리 적용

-       PicellUs 안드로이드 모바일 엔진은 aar 포맷으로 제공됩니다.

-       아래 내용은 Android Studio 에서 aar 파일을 어플리케이션에 등록하는 예제입니다.

(1) 테스트용 어플리케이션을 저장한 경로의 libs 폴더로 이동합니다.

(2) PicellUs 안드로이드 모바일 엔진 파일(picellus_lib-1.0.aar)을 테스트용 어플리케이션의 프로젝트의
      libs 폴더에 복사하여 저장합니다.

(3) Android Studio 에서 테스트용 어플리케이션을 불러옵니다.

(4) Module build.gradle 파일에 repositories 항목을 아래와 같이 추가하고 dependencies 항목에
      PicellUs 안드로이드 모바일 엔진 관련 항목을 추가합니다.

     dependencies 항목의 picellusEngine 버전은 모듈과 함께 제공됩니다.

(5) implementation files('../libs/picellus_lib-1.0.aar')

(6) 어플리케이션에서 PicellUs 안드로이드 모바일 엔진을 import 하여 사용합니다.
       kr.co.wisedigm.picellus.library
패키지의 클래스를 사용합니다.

 

5.    API 와 예제


5-1. 초기화

Application classonCreate에서 PicellUs.init를 호출하면서 라이선스 값을 파라미터로 전달합니다.


5.2.
API

PicellUs
초기화 후, PicellUs.getInstance()를 통해 method를 사용하면 됩니다.

-       saveCompressedBitmap – 불러온 이미지의 bitmap을 경량화 후 저장소에 저장한다.

 

5.3. 예제 어플리케이션

5.3.1. Sample Application (PicellusSample App)

-       본 문서와 함께 제공된 예제 어플리케이션을 실행한 결과 화면입니다.

(1)   예제 어플리케이션의 ‘SLIM AT CALLERY’ 버튼을 클릭합니다.

 

(2) 갤러리 어플리케이션에서 경량화할 이미지를 선택합니다.

(3) 원본 이미지와 경량화된 이미지가 화면에 표시됩니다.

(4)   ‘VIEW INFORMATION’ 버튼을 클릭하여 정보를 확인합니다.

 

PicellUs Mobile iOS Engine API Document

 

1.    개요

-       본 문서는 PicellUs iOS 모바일 엔진에 대한 설치 및 사용법에 대한 가이드를 제공하는 문서입니다.

-       본 문서는 Xcode 13.2.1 기준으로 작성되었으며 Xcode 버전에 따라 실제 내용이 본 문서의 예제와 다를 수 있습니다.

 

2.    PicellUs 모바일 엔진의 주요 기능

-       이미지 파일 용량 경량화.

 

3.    라이브러리

-       PicellUsSDK.xcframework : PicellUs iOS 모바일 엔진.

 

4.    적용 방법

4.1. 적용 전 준비 사항

-       PicellUs iOS 모바일 엔진을 사용하기 위해서는 iOS 앱 개발 환경이 구성되어 있어야 합니다.

-       Xcode : 최신 버전의 Xcode 권장.

-       테스트용 iOS 앱 : PicellUs iOS 모바일 엔진을 적용할 테스트용 iOS 앱.

4.2. 라이브러리 적용

-       PicellUs iOS 모바일 엔진은 framework 포맷으로 제공됩니다.

-       아래 내용은 Xcode 에서 framework 파일을 어플리케이션에 등록하는 예제입니다.

(1)   테스트용 어플리케이션을 저장한 경로의 폴더로 이동합니다.

(2)   PicellUs iOS 모바일 엔진 파일(PicellUsSDK.xcframework)을 테스트용 어플리케이션의 저장할 폴더에 복사하여 저장합니다.

(3)   Xcode 에서 테스트용 어플리케이션을 불러옵니다.

(4)   iOS 모바일 엔진 파일(PicellUsSDK.xcframework) 을 프로젝트에 추가합니다..

 

(5)   Project -> TARGETS -> General -> Frameworks, Libraries, and Embedded Content PicellUsSDK.xcframework 를 추가합니다.


5.   
API 와 예제


5.1.
참조 API.

-       본 문서와 함께 제공된 자료 중 PicellUsSDK.doccarchive 파일을 더블클릭하여 API 문서를 참조합니다.

 

-  Xcode 설치되어 있는 상태에서 PicellUsSDK.doccarchive 파일 실행 시 위 화면을 볼 수 있으며 실제 PicellUs iOS 모바일
   엔진의 기능은 PicellUs 클래스를 이용하여 사용할 수 있습니다.

※  PicellUs 클래스의 imageData 메소드의 인자 중 quality 는 Float로 지정하며 값이 클수록 파일 용량이 적게 줄어들고 
    화질이 선명하며 값이 작을수록 파일 용량이 많이 줄어들지만 화질이 선명하지 않습니다.
    compressValue 값은 0.75~0.80 사이의 값을 권장합니다.
-       imageData 메소드의 사용 방법은 본 문서와 함께 제공된 예제 어플리케이션을 참고하시기 바랍니다.


5.2.
PicellUs
클래스

-       PicellUs 클래스에서 이미지의 용량을 줄이는 기능을 수행합니다.

5.3. 예제 어플리케이션

5.3.1. Sample Application (PicellUsSample App)

-       본 문서와 함께 제공된 예제 어플리케이션을 실행한 결과 화면입니다.

 (1)   예제 어플리케이션의 ‘Select Image’ 버튼을 클릭합니다.

 (2)   Photos에서 경량화할 이미지를 선택합니다.

 

(3)   원본 이미지와 경량화된 이미지가 화면에 표시됩니다.

 

(4)   ‘VIEW INFORMATION’ 버튼을 클릭하여 정보를 확인합니다.

1. TEST 목적 및 환경

 

PicellUs API  Open API를 사용할 때 각 API의 결과물이 어떤 차이가 있는지 정량적인 확인을 목적으로 한다.

 

개발 Tool Android Studio Chipmunk | 2021.2.1 Patch1
개발 언어 코틀린 (Kotlin)
TEST Mobile 갤럭시 노트 20 Ultra

 

2. TEST 방법

 

3. TEST 결과(원본이미지 4000X1868, 1.7MB)

 

<출처> 와이즈다임(주) 연구소 2022.09.15

웹페이지 무게(Page Weight)는 웹페이지를 구성하는 4가지 요소 html, css, js, image 좌우합니다.

정보전달량, 시각화의 영향으로 페이지의 무게는 지속적으로 아래 그래프와 같이

매년 10%이상 증가하고 있는 추세입니다.

연도별 페이지 무게 증가량

웹페이지를 구성요소별로 좀 더 자세히 살펴보면 아래 표와 같이 PC, Mobile 모두 image가 60% 이상
차지하고 있으며, 웹 페이지 무게 증가에 가장 큰 영향을 주는 것은 image 사용량의 증가라고 할 수 있습니다.

콘텐츠 유형별 페이지당 용량
콘텐츠 유형별 페이지당 구성 요율
콘텐츠 유형별 페이지당 구성 요율

 

콘텐츠 유통에 이미지가 가진 비중이 매우 중요하며, 가장 큰 용량을 차지함은 더 이상 설명할 필요가 없어 보입니다.

PicellUs Image Slimmer를 활용하여 선명한 이미지를 작은 용량으로, 남들 보다 빠르게 배포할 수 있습니다.

 

위 페이지 무게를 PicellUs Image Slimmer를 사용하면
총 바이트수 1,555 --> 868로 
45% 가까이 PC, Mobile 웹 페이지 무게를 줄일 수 있습니다.

 

PicellUs Image Slimmer는 Server(java), Mobile(iOS, Android) 3가지 버전을 제공합니다.

PicellUs image Slimmer 적용 후 콘텐츠 유형별 구성요율(약 45% 감소)

 

PicellUs image Slimmer 적용 후 콘텐츠 유형별 구성요율(약 45% 감소)

 

직접 체험해 보시기 바랍니다.

이미지 사이즈 줄이기 체험

 

자료출처 : "http archive" https://almanac.httparchive.org/en/2021/page-weight#introduction

+ Recent posts