깨지지 않게 PNG 용량 줄이는 사이트!

 

    깨지지 않게 PNG 용량 줄이는 사이트

 

안녕하세요, 만두소녀 입니다.

올해 여름부터 IT, 웹의 세계에 제대로 빠져 코딩도 배우고, 디자인툴도 배우며 이것저것 공부해오고 있습니다.

여러가지 스킬을 익히는 것도 재미있지만 저는 블로그를 계속 해왔던 사람인지라 그런지 유독 정보 분야에 관심이 가곤 합니다.

 

 

스킬도 중요하지만 정보력도 실력으로 평가되는 요즘!

도움이 될 만 한 유익한 정보들을 담아 소개해드리고자 합니다.

 

그 첫번째는 이미지에 관련한 정보입니다.

웹에서 중요한 것은 속도인데요. 속도를 줄이기 위해서는 용량의 경량화 작업이 필수입니다.

다른 무엇보다도 용량을 크게 차지하고 있는 이미지의 경량화가 관건이라고 볼 수 있습니다.

 

 

 

---

먼저 PNG 파일 구해오기

• 용량을 줄일 PNG 파일을 가지고 옵니다.

 

각자 작업할 파일을 가지고 계시겠지만 따로 가지고 있는 것이 없다면

픽사베이 등 무료 이미지 사이트에 png를 검색하여 찾아오실 수 있습니다.

구글링, 네이버 검색으로도 되겠지만 저작권 등의 문제로 사용하실 때 조심하도록 합니다.

 

 

 

 

아무튼 저는 동물 png를 검색하여 귀엽고도 아련한 고양이 사진을 저장하였습니다.

우측을 보면 1920x1276의 사이즈로 용량은 2.6MB인 것을 확인할 수 있습니다.

 

---

추천 사이트로 이동

• tiny png(타이니 피엔지: tynypng.com)

 

 

 

추천할 사이트는 팬더가 메인의 자리를 차지하고 있는 귀여운 사이트입니다.

애니메이션 혹은 인형 쇼핑몰인가 싶었지만 꽤 유명한 IT회사 입니다.

이름은 tiny png(타이니 피엔지)라고 합니다.

 

 

 

TinyPNG – Compress PNG images while preserving transparency

 

위 링크박스를 누르면 사이트로 이동됩니다.

 

 

---

 

간단한 tiny png 사용법

• 먼저 파일 정보로 용량 확인

 

사용 전 사용할 파일의 정보를 확인해보도록 하겠습니다.

파일 이름은 고양이.png로 저장하였습니다.

왜 이런건지 모르겠지만 2.6MB파일을 저장하였는데 하고보니 3.2MB가 되어있군요.

 

아무튼 웹에서 3.2메가 라는 이미지 용량은 용납할 수 없이 큰 사이즈입니다.

이미지 용량은 최대한 KB(킬로바이트)에서 놀도록 합니다.

 

 

 

 

 

• 브라우저로 다이렉트로 파일 드래그

 

고양이.png 파일을 크롬브라우저에 바로 드래그 하여보았습니다.

(Chrome, Firefox 및 Safari는 지원하지만 Microsoft Edge 만 아직 지원하지 않는다고 합니다.)

 

사진 변환하실 때 주의사항은 아래와 같습니다.

• 20개 파일까지 드래그 가능
• 각각 5MB 크기까지 허용
• PNG, JPG 파일만 가능
• 더 변환하고 싶을 시 프로버전 다운 필요

 

 

 

드래그하여 다운로드를 하였더니 고양이2.png라는 제목의 파일이 새로 생성되었습니다.

여러개의 파일을 변환할 시에는 하나씩 개별적으로 다운로드할 수도 있지만 한꺼번에 압축파일로 다운받을 수도 있습니다.

 

 

 

고양이2.png 파일의 정보를 확인해보니 858KB로 줄어있는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

3.2 MB -> 858KB

변환한 결과 용량이 무려 4분의 1로 줄어들었습니다.

메가바이트에서 킬로바이트로 변하였습니다.

이 정도라면 필드에 바로 뛰어들어도 될 만한 용량입니다.

 

 

 

 

화질에도 거의 변화가 없는 것을 확인할 수 있습니다.

처음 이미지에서 파일 크기가 70 % 이상 줄어 들지만, 시력이 좋은 사람이더라도 차이를 잘 알 수 없다고 설명합니다.

 

그렇다면 어떤 방식으로 PNG용량을 줄이는 것일까요?

홈페이지에서 정보들을 좀 가지고 와봤습니다. 번역체로 이상하게 보일 수 있습니다.

 

 

 

TinyPNG의 스마트 손실 압축기술

PNG는 부분적으로 투명한 이미지를 저장할 수있는 유일하게 널리 지원되는 형식이므로 유용합니다. 형식은 압축을 사용하지만 파일은 여전히 ​​클 수 있습니다. 따라서 TinyPNG는 스마트 손실 압축 기술을 사용 하여 PNG 파일의 파일 크기를 줄입니다. 이미지의 색상 수를 선택적으로 줄임으로써 데이터를 저장하는 데 더 적은 바이트가 필요합니다. 효과는 거의 보이지 않지만 파일 크기가 크게 달라집니다.

 

 

TinyPNG의 작동원리

PNG (Portable Network Graphics) 파일을 업로드하면 이미지의 비슷한 색상이 결합됩니다. 이 기술을 "양자화"라고합니다. 색상 수를 줄이면 24 비트 PNG 파일을 훨씬 작은 8 비트 색인 색상 이미지로 변환 할 수 있습니다. 불필요한 모든 메타 데이터도 제거됩니다. 결과적으로 투명도 를 100% 지원하는 PNG 파일이 향상됩니다. 

TinyPNG를 만든 이유

PNG 이미지를 자주 사용하지만 로드시간에 큰 불편함을 겪곤 합니다. 따라서 최상의 압축으로 웹 사이트를 더 빠르고 재미있게 사용하기 위해 TinyPNG를 만들었습니다. 2014 년에는 JPEG 이미지에 대한 지능적인 압축 기능이 추가되었으며 2016 년에는 애니메이션 PNG에 대한 지원 기능이 추가되었습니다. 웹 사이트로 이미지를 압축하는 것은 모든 사람에게 무료이며 우계속하여 무료를 유지하고 싶습니다.

 

 

TinyPNG를 이용중인 회사

• 삼성있는 것 실화..

 

 

---

무료라면 어떻게 수익을 창출하는지?

• 포토샵에서 다이렉트로 파일 변환

아주 좋은 기능을 무료로 제공하고 있다보니 수익구조는 어떻게 되어 있을지 궁금해졌습니다.

찾아보니 포토샵에서 바로 이미지를 변환할 수 있는 기능(플러그인)을 판매하고 있었습니다.

 

 

 

 

(사이트 펌)

Photoshop CC 2015, 2017 및 2018 만 이미지를 알파 투명도의 인덱스 PNG 파일로 저장할 수 있습니다. 다른 버전에서는 불가능하며 Photoshop CS5에서도 제대로 표시 할 수 없습니다.

웹 에 저장을 사용 하여 이미지를 24 비트 투명 PNG 파일로 내보내고 TinyPNG에 업로드 할 수 있습니다. 작은 인덱스 된 PNG 파일로 변환합니다. TinyPNG Photoshop 플러그인을 설치할 수도 있습니다 . Photoshop에서 바로 압축 된 PNG 및 JPEG 이미지를 스케일, 미리보기 및 저장할 수 있습니다.