Picellus Image Slimmer

PicellUs의 image Slimmer 기능에 FIle 내 이미지도 경량화 하면서
체험하기 페이지를 새롭게 단장해서 사용법을 간략히 안내합니다.

체험하기 메인 화면

이미지 경량화 / 문서 내 이미지 경량화 / 이미지 다중 리사이즈는 와이즈다임 PicellUs Java Server에서 변환합니다.

원하는 메뉴를 클릭하고 아래 그림과 같이 박스 안으로 변환할 이미지를 Drag & Drop합니다.

이미지(혹은 파일)을 끌어다 놓으면 아래 그림과 같이 경량화 옵션이 나옵니다.
이미지 경량화 옵션은 보통/좋은/최고 품질로 변환할 수 있습니다.

HTML5 경량화는 위 사용법과 동일한 방법으로 실행할 수 있으며,
브라우저의 HTML5 엔진을 활용한 이미지 경량화로 서버와 통신하지 않고 변환합니다.

이미지 다중 리사이즈는 한개의 이미지를 여러 해상도로 변경할 수 있도록 합니다.
이미지를 Drag & Drop하면 아래 화면이 나옵니다.

위 그림과 같이 활용하고자 하는 이미지의 width를 입력합니다.(최대 5개)
"용량줄이기"를 클릭합니다.

결과는 아래 이미지 처럼 한번에 여러가지 width 이미지가 생성됩니다.
하나의 이미지를 PC용, Pad용, Phone용 해상도에 맞춰서 한번에 생성할 수 있습니다.

사용해 보시면서 불편한 사항이 있으시면 블로그나 지원 이메일로 문의 바랍니다.

1. PicellUs HTML5 Version 실행을 위해 브라우저에서 아래 링크로 이동합니다.

    https://www.picellus.com/slim/html5.do

2. 메인화면에서 "파일선택"을 클릭합니다.

3. 사진을 선택하기 위한 POP Up창이 나타납니다.
    원하는 이미지 혹은 사진을 선택하고 열기를 선택합니다.

4. 화면 File Upload 항목의 "Html5 Image Upload"를 클릭하면 아래 그림과 같이 HTML5에서 Slimmer가 적용된 이미지를
볼 수 있습니다.

5. 비교를 위해 원본 이미지가 나타나도록  "Image Upload"를 클릭합니다.

6. 원본 3.44M 이미지가 1.80M로 줄어들었음을 확인할 수 있습니다.

DEMO Site(https://www.picellus.com/slim/fileupload.do)에 접속했는데....
어떻게 사용할지 잘 모르시겠다는 문의가 있어서 블로그에 올립니다.

TEST할 이미지를 준비하시고, 클릭 몇번만 하시면 됩니다.

1. Slimmer 메뉴

아래 그림과 같이 
1) 파일선택 : 이미지 선택 창이 팝업됩니다. 원하는 이미지 경로로 찾아가서 선택합니다.
2) 저장 클릭 하고 잠시 눈을 두세번 깜빡이시면 경량화된 이미지가 아래에 나타납니다.

3) 얼마나 사이즈가 감소했는지 감소한 %가 이미지 아래에 정보가 표현되어 있습니다.

2. Resize 메뉴

1) 마찬가지로 파일선택을 합니다.

2) Resize는 다양한 해상도의 Device에 맞게 이미지 해상도를 일괄 Resize하는 기능이므로,
    Device 해상도를 입력해야 합니다.
    우측 Option에 해상도를 다양하게 입력합니다.

3) 저장을 클릭하고, 눈 깜빡이는 것보다는 많이 오래 기다려 주세요.
여러개 이미지를 생성하기 때문에 시간이 조금 걸립니다.(DEMO Server가 성능이 좋지 못하기도 함)

경량화, 해상도 변경한 이미지 파일은 브라우저에서 이미지 저장하시듯이

마우스 우측버튼 눌러서 저장하시면 됩니다.

저장 후 속성을 열어서 원본과 세부정보 비교해 보시기 바랍니다.

고맙습니다.

Before

After