이미지 용량 줄이기: JPG·WebP 압축과 화질 유지 기준

뷰티 제품컷 하나를 압축했는데, 배경 그라데이션이 층층이 끊겨 보이는 걸 발견한 날이 있었습니다. 용량은 절반 넘게 줄었는데 이미지는 쓸 수가 없는 상태였습니다. 그때부터 저는 이미지 최적화를 단순한 파일 관리가 아닌, 브랜드 품질 관리의 연장선으로 보기 시작했습니다. 이 글에서는 뷰티 콘텐츠를 다루는 운영디자인 실무에서 제가 실제로 써온 압축 검수 기준과 포맷 선택 방식을 정리했습니다.

뷰티 제품컷의 이미지 용량을 줄이면서 화질을 유지하는 실무 방법을 정리했습니다. 그라데이션, 유광 패키지, 로고, 피부 질감을 기준으로 JPG·WebP 압축과 Squoosh·TinyPNG·iLoveIMG 등의 활용법을 BX디자이너 경험과 함께 소개합니다.

 

용량은 줄이고 / 제품 퀄리티는 지키기

 

 

뷰티 제품컷, 같은 압축인데 왜 유독 티가 날까

운영디자인 업무를 맡으면서 이미지를 자주 다루다 보니, 같은 압축 설정을 써도 어떤 이미지는 멀쩡하고 어떤 이미지는 바로 이상해 보인다는 걸 경험으로 알게 됐습니다. 특히 뷰티 제품컷에서 그 차이가 두드러졌습니다.

제가 가장 먼저 눈에 띈 건 배경 그라데이션이었습니다. 뷰티 광고 이미지에는 베이지에서 아이보리로, 핑크에서 화이트로 넘어가는 식의 매우 미세한 색 변화가 자주 사용됩니다. 이런 영역에서 압축을 강하게 적용하면 색이 부드럽게 이어지지 않고 단계적으로 끊겨 보이는 컬러 밴딩(Color Banding) 현상이 나타납니다. 여기서 컬러 밴딩이란 원래 부드럽게 연결되어야 할 색 전환이 마치 여러 개의 단색 띠를 이어 붙인 것처럼 끊겨 보이는 현상을 말합니다. 배경이 깨끗하고 단순할수록 오히려 이 문제가 더 선명하게 보입니다.

두 번째로 신경 쓰이는 부분은 유광 패키지입니다. 투명 유리, 크롬 캡, 코팅된 플라스틱 같은 소재는 밝은 하이라이트와 어두운 면이 한 이미지에 동시에 존재합니다. JPEG는 블록 기반 손실 압축(Block-based Lossy Compression) 방식을 씁니다. 쉽게 말해 이미지를 작은 사각형 블록으로 나눈 뒤 각 블록의 색 정보를 단순화해서 용량을 줄이는 방식인데, 압축이 강해지면 블록 경계가 눈에 보이거나 미세한 반사 디테일이 뭉개집니다. 제 경험상 유광 패키지에서는 캡 주변 반사가 지저분해지거나 제품 모서리가 흐려지는 게 먼저 드러났습니다.

세 번째는 라벨 타이포그래피입니다. 제품 라벨의 작은 글자나 브랜드 로고 획은 압축 오류가 생기면 주변에 노이즈가 끼거나 획 자체가 무너집니다. 이건 단순한 화질 문제를 넘어서 제품 정보가 정확하게 전달되는가와 직결되는 부분입니다. 마지막으로 모델이 포함된 이미지라면 피부의 미세한 질감과 머리카락 가장자리도 확인합니다. 특히 피부가 지나치게 평평하게 뭉개지는 플라스틱 스킨 현상은 압축 강도를 높일수록 빠르게 나타납니다.

출처: Google web.dev 이미지 성능 가이드에서도 미세한 그라데이션 영역은 압축 설정이 충분하지 않으면 단색 띠처럼 보일 수 있다고 설명하고 있습니다. 제가 실무에서 체감한 내용과 정확히 일치했고, 그때부터 뷰티 이미지 압축 검수는 이 네 곳을 먼저 확대해서 보는 방식으로 굳어졌습니다.

• 그라데이션(Gradient): 배경 색 전환이 층처럼 끊기지 않았는가
• 반사(Reflection): 유광 캡과 유리 표면의 반사 디테일이 뭉개지지 않았는가
• 타이포그래피(Typography): 로고와 라벨 작은 글자의 획이 무너지지 않았는가
• 피부(Skin): 모공과 머리카락 경계 같은 미세한 질감이 살아 있는가

 

 

포맷 선택과 압축 순서, 실무에서 실제로 쓰는 기준

솔직히 처음에는 저도 이미지 압축 도구를 열고 파일을 올린 뒤 용량이 절반 이하로 떨어지면 그냥 쓰는 식이었습니다. 그러다 결과물이 이상해지는 경험을 반복하면서 지금은 순서를 정해두고 씁니다.

제가 쓰는 흐름은 이렇습니다. 먼저 원본 마스터 파일을 별도 폴더에 보관합니다. 그다음 실제 게시 환경에서 이미지가 몇 픽셀로 보일지를 먼저 확인합니다. 블로그 본문 이미지라면 보통 1000~1200px 내외인데, 원본이 5000px인 채로 압축만 하면 픽셀 수 자체가 불필요하게 크게 남습니다. 리사이징(Resizing), 즉 픽셀 크기를 실제 사용 크기에 맞게 먼저 줄인 뒤 압축하는 게 용량 감소 효과가 훨씬 큽니다. 출처: Google Search Central 이미지 SEO 권장사항에서도 화면 환경에 맞는 이미지 크기를 제공하면 불필요한 데이터 전송을 줄일 수 있다고 안내하고 있습니다.

리사이징이 끝나면 파일 포맷을 결정합니다. 제가 정리한 기준은 이렇습니다. 일반 제품 화보나 SNS용 인물 사진처럼 투명 배경이 필요 없는 경우에는 JPG를 씁니다. 누끼 제품 이미지나 로고처럼 투명도가 필요한 경우에는 PNG입니다. 블로그 배너나 웹사이트 제품 이미지처럼 용량을 더 줄이고 싶은 상황에서는 WebP를 선택합니다. WebP는 손실 압축과 무손실 압축, 투명도를 모두 지원하는 포맷으로, JPG나 PNG 대비 더 높은 압축 효율을 보이는 경우가 많습니다. 쉽게 말해 같은 화질을 더 작은 파일 크기로 저장할 수 있다는 뜻입니다.

도구는 작업 목적에 따라 다르게 씁니다. 중요한 뷰티 캠페인 이미지의 최적 압축률을 찾을 때는 Squoosh를 씁니다. Squoosh는 이미지를 외부 서버로 보내지 않고 기기 안에서 로컬 처리(Local Processing)하는 방식이라 민감한 상업용 이미지를 다룰 때 안심이 됩니다. 또한 압축 설정을 바꾸면서 전후 차이를 화면에서 직접 비교할 수 있어 뷰티 이미지의 그라데이션이나 반사 디테일 변화를 눈으로 확인하기 편합니다. 반면 동일한 캠페인 이미지를 블로그, SNS, 썸네일용으로 여러 사이즈로 만들어야 할 때는 iLoveIMG처럼 압축과 리사이징을 일괄로 처리할 수 있는 도구가 훨씬 효율적입니다.

온라인 압축 도구에서 자주 보이는 표현 중 "화질은 그대로 유지하면서 용량만 줄인다"는 말을 저는 액면 그대로 믿지 않습니다. 손실 압축은 이름 그대로 일부 데이터를 버리는 방식입니다. 차이가 사람 눈에 잘 보이지 않도록 설계하는 것이지, 원본과 동일한 데이터가 유지되는 건 아닙니다. 그래서 제가 던지는 진짜 질문은 "화질 손실이 있는가"가 아니라 "실제 게시 환경에서 문제가 될 만큼 손실됐는가"입니다. 그 판단을 위해 압축 후에는 반드시 그라데이션, 반사, 라벨, 피부를 확대해서 한 번 더 봅니다. 이 네 곳이 괜찮으면 전체 이미지도 실무에 쓸 수 있는 상태라고 판단합니다.

 

JPG·PNG·WebP·AVIF 차이 (어떤 포맷을 써야 할까)
파일 형식마다 적합한 용도가 다릅니다.

JPG
일반적인 사진과 제품 연출 이미지에 사용하기 편합니다.
손실 압축을 사용하기 때문에 파일 크기를 크게 줄일 수 있지만, 압축을 너무 강하게 적용하면 블록 아티팩트와 디테일 손실이 드러날 수 있습니다.
추천 용도
일반 제품 화보인물 사진SNS용 사진호환성이 중요한 작업

PNG
투명 배경이나 정밀한 그래픽 표현이 필요할 때 유용합니다.
사진 전체를 PNG로 저장하면 파일 크기가 상당히 커질 수 있어, 저는 보통 누끼 제품이나 투명 그래픽처럼 PNG가 필요한 경우에 제한적으로 사용합니다.
추천 용도
투명 제품 누끼로고 UI 그래픽선명한 그래픽 요소

WebP
WebP는 손실·무손실 압축과 투명도를 모두 지원합니다. Google의 web.dev는 WebP가 JPEG·PNG 등 기존 형식보다 더 높은 압축 효율을 제공하는 경우가 많다고 설명합니다.
추천 용도
블로그용 제품 이미지웹사이트 배너이미지가 많은 포트폴리오 JPG보다 용량을 더 줄이고 싶은 경우
Google 검색은 현재 WebP 이미지를 지원합니다.

AVIF
AVIF 역시 Google 이미지 검색에서 지원되는 형식입니다.
web.dev에서는 AVIF가 JPEG와 WebP보다 높은 압축 효율을 보일 수 있다고 설명합니다.
다만 제가 실제 운영 플랫폼에 사용할 때는 플랫폼의 업로드·변환 방식까지 먼저 확인하고 사용합니다.
지원 여부와 검색엔진 지원 여부는 같은 문제가 아니기 때문입니다.

이미지 압축 도구 비교 (실무에서는 목적이 다르다)
온라인 이미지 도구를 다시 조사해 보면 각각 강점이 조금 다릅니다.
도구제가 보기 좋은 용도특징 Squoosh품질 비교·세밀한 압축전후 차이 확인, 로컬 처리 TinyPNG 빠른 압축 JPG·PNG·WebP·AVIF 압축 iLoveIMG대량 운영 작업압축·리사이즈·크롭 일괄 처리 Adobe Express콘텐츠 규격 변경SNS 프리셋·커스텀 리사이즈

Squoosh
Squoosh는 압축 전후를 직접 비교하기 편한 도구입니다.
가장 큰 장점은 이미지가 기기 밖으로 전송되지 않고 로컬에서 처리된다는 점입니다. 또한 압축 설정을 바꾸면서 파일 크기와 품질 변화를 직접 확인할 수 있습니다.
Google의 AVIF 가이드에서도 Squoosh를 이용한 AVIF 압축 방법을 공식 예시로 소개하고 있습니다.
그래서 저는 이런 유형의 도구가 최종 압축률을 찾는 테스트 작업에 특히 적합하다고 봅니다.

TinyPNG
TinyPNG는 빠르게 여러 이미지를 압축해야 할 때 접근하기 쉽습니다.
현재 공식 사이트는 AVIF, WebP, JPG와 PNG 압축을 지원하고 있으며 무료 웹 도구에서는 한 번에 최대 20장, 개별 파일 최대 5MB라는 제한을 안내하고 있습니다.
TinyPNG는 손실 압축을 사용하고 색상 정보를 선택적으로 줄여 파일 용량을 낮추는 방식이라고 설명합니다.
빠른 운영 작업에는 편하지만, 중요한 뷰티 캠페인 이미지는 결과를 그대로 믿기보다 한 번 확대해서 확인하는 편이 좋습니다.

iLoveIMG
iLoveIMG는 압축보다 운영 작업 전체를 한 번에 처리할 때 유용합니다.
현재 공식 서비스는 JPG·PNG·SVG·GIF 압축, 픽셀 또는 비율 기반 리사이징, 크롭과 여러 이미지 일괄 처리를 제공합니다.
예를 들어 동일한 캠페인 이미지를
블로그SNS썸네일내부 문서
용으로 여러 장 만들 때 편리합니다.

Adobe Express
Adobe Express는 이미지 크기 변경 이후 바로 디자인 작업을 이어갈 수 있다는 점이 강점입니다.
현재 공식 문서에서는 JPEG·JPG·PNG·WebP·HEIC 파일을 불러와 SNS용 프리셋이나 직접 입력한 크기로 리사이징 할 수 있다고 안내합니다. Quick Action 기준 파일 크기 제한은 40MB입니다.
운영디자인에서 단순 압축보다 비율 변환까지 함께 해야 한다면 편리한 방식입니다.

 

결론

이미지 최적화를 용량을 최대한 작게 만드는 일이라고만 보던 시기가 있었습니다. 지금은 다르게 생각합니다. 가장 잘 만든 웹용 이미지는 가장 작은 파일이 아니라, 실제 게시 환경에서 브랜드 품질을 유지하면서 불필요한 데이터만 제거한 이미지에 가깝습니다.

특히 뷰티 제품컷은 그라데이션 컬러 밴딩, 유광 반사, 라벨 타이포그래피, 피부 질감이라는 네 가지 취약 영역이 한 이미지에 모여 있어 압축 검수가 더 까다롭습니다. 리사이징 → 포맷 결정 → 압축 → 확대 검수라는 순서를 지키고, 압축 후 이 네 곳을 확인하는 습관만 만들어도 실무 결과물의 품질이 달라집니다. 중요한 제품컷이라면 Squoosh처럼 전후 비교가 가능한 도구로 압축 강도를 직접 조절해 가며 기준점을 찾아보는 것을 권합니다.

참고: https://sweetonion1005.tistory.com/entry/사진-크기-줄이기-온라인-도구로-품질-유지하며-용량-줄이는-법

 

 

• Google Search Central, 이미지 SEO 권장사항
• Google web.dev, JPEG·WebP·AVIF 및 이미지 성능 가이드
• Squoosh 공식 서비스
• TinyPNG 공식 이미지 압축 안내
• iLoveIMG 공식 이미지 편집 가이드
• Adobe Express 이미지 리사이즈 공식 문서

 

이어지는 실무 글입니다. 누끼 처리는 AI 누끼 따기 사이트 6종 비교에, 이미지 라이선스는 상업용 이미지 사이트 비교에, 도구 배치는 클로드·피그마·캔바 비교에 정리했습니다.

압축률별로 직접 돌려보며 기준선을 찾은 기록입니다.