사진 용량 줄이기 맥에서 여러 장 한 번에 하는 법

사진 용량 줄이기를 검색하면 윈도우 얘기가 대부분이다. 나는 맥에서 한다

글 하나에 이미지를 다섯 장씩 넣는데, 원본 그대로면 한 글이 10MB를 넘는다

다음에서 사진 용량 줄이기를 검색한 결과

왜 줄이냐면 로딩 때문이다

화면 캡처를 그냥 저장하면 레티나라 장당 1~2MB가 나온다

원본 이미지를 그대로 올렸을 때 생기는 문제

다섯 장이면 글 하나가 10MB다. 모바일에서 열면 느리고, 느린 페이지는 검색에서도 손해다

그런데 화면에서 실제로 보이는 건 가로 1000px 남짓이다. 2880px짜리를 그대로 올릴 이유가 없다

아래에 이런 걸 적었다
· 왜 줄이냐면 로딩 때문이다
· 기준을 정해두면 매번 안 고민한다
· 실제로 얼마나 줄었나
· 줄이다가 깨지는 경우
· 폴더째 한 번에 돌린다
필요한 데로 내려가면 됨

기준을 정해두면 매번 안 고민한다

내가 쓰는 기준은 세 개다.

이미지 최적화에 쓰는 세 가지 기준

가로 1440px 로 축소      레티나에서도 안 흐리고 용량은 1/3 이하로 떨어진다
PNG 와 JPEG 둘 다 만든다   같은 이미지를 두 형식으로 저장해서
작은 쪽을 고른다          어느 쪽이 이길지는 그림에 따라 다르다

형식을 미리 정하지 않는 게 핵심이다. 글자 많은 화면 캡처는 PNG가 작고, 사진이나 그라데이션은 JPEG가 작다

PNG를 만들 때 256색 팔레트로 한 번 더 줄여본다. UI 캡처처럼 색이 평평한 그림은 이러면 눈으로 차이를 모르는데 용량이 크게 떨어진다

실제로 얼마나 줄었나

오늘 돌린 것들이다.

실제 이미지 폴더별 최적화 전후 용량

도식 5장      471KB → 183KB   62% 감소
도식 5장      469KB → 173KB   64% 감소
도식 5장      422KB → 158KB   63% 감소
사진 3장    1,500KB → 277KB   83% 감소

대체로 60% 안팎이고, 사진이 섞이면 80%를 넘는다

눈으로 보면 차이를 못 느낀다. 확대해서 나란히 놓고 봐야 겨우 보인다

줄이다가 깨지는 경우

여기가 검색해도 잘 안 나오는 부분이다. 실제로 당한 것들이다.

이미지 용량을 줄이다가 생기는 세 가지 문제

① 투명 배경이 검게 변한다

PNG를 JPEG로 바꾸면 투명한 부분이 사라진다. JPEG에는 투명이라는 개념이 없다

로고나 아이콘처럼 배경이 뚫려 있는 그림은 PNG로 둬야 한다

② 아이폰 사진이 돌아간다

HEIC나 아이폰 JPEG는 회전 정보가 파일 안에 따로 들어 있다. 변환할 때 그걸 안 읽으면 사진이 눕는다

맥 미리보기로 보면 멀쩡한데 웹에 올리면 돌아가 있는 게 이 경우다. 변환 전에 회전을 먼저 적용해야 한다

③ 원본이 사라진다

제자리에서 덮어쓰면 되돌릴 수가 없다. 나는 원본 폴더는 건드리지 않고 별도 폴더에 결과를 만든다

실제로 원본이 없는 상태에서 최적화본을 지웠다가 이미지를 통째로 다시 만든 적이 있다. 한 번 겪으면 규칙이 생긴다

폴더째 한 번에 돌린다

한 장씩 하면 안 하게 된다. 나는 폴더를 통째로 넘긴다.

폴더 단위 이미지 최적화 처리 흐름

원본 폴더        건드리지 않는다
  ↓
가로 1440px 축소
  ↓
PNG · JPEG 둘 다 저장 → 작은 쪽 채택
  ↓
_web 폴더        올릴 때는 이쪽만 쓴다

파일명은 그대로 두는 게 편하다. 원본과 결과가 이름으로 짝지어져 있어야 나중에 어느 게 어느 건지 안다

정리하면

• 화면에 보이는 건 1000px 남짓이다. 2880px를 그대로 올릴 이유가 없다
• 가로 1440px면 충분하다. 레티나에서도 안 흐리다
• 형식을 미리 정하지 않는다. PNG와 JPEG를 둘 다 만들어 작은 쪽을 쓴다
• 평평한 UI 캡처는 256색으로 더 줄어든다. 눈으로는 차이를 모른다
• 투명 배경은 JPEG로 바꾸지 않는다. 뚫린 부분이 검게 된다
• 아이폰 사진은 회전부터 적용한다. 안 그러면 웹에서 눕는다
• 원본은 남긴다. 덮어쓰면 되돌릴 방법이 없다

실제로 60~80%가 줄어드는데 눈으로는 차이가 안 보인다. 안 할 이유가 없는 작업이다

같이 보면 좋은 글

• HEIC 변환 사이트 안 쓰고 맥에서 한 줄로 끝내는 방법
• 5: 웹앱 vs 모바일앱, 뭘로 만들어야 할까?
• 외주 개발 실패, 받는 쪽에서 보면 여기서 갈린다