EN한국어

가이드 / Finipix / 공개하기

웹페이지 이미지 용량 줄이기: 화질은 그대로, 파일은 가볍게

Qorlize 팀 작성 · 마지막 검토

Finipix 가이드 · 웹용 이미지 줄이기 · 크기 바꾸기. Finipix 열기

페이지를 다 만들고 휴대폰으로 열었더니 사진이 위에서부터 한 줄씩 느릿느릿 그려집니다. 확인해 보면 페이지 전체가 9MB이고, 그중 거의 전부가 사진 다섯 장입니다. 이럴 때 흔히 품질 슬라이더부터 한참 내리는데, 그러면 파일은 작아져도 사진이 뭉개집니다. 작업 순서만 바꾸면 대부분 용량을 80~95% 줄이면서도 페이지에서 보는 사람은 차이를 알아채지 못합니다.

이미지를 무겁게 만드는 것

이미지 파일 용량을 정하는 요소는 세 가지이고, 영향이 큰 순서는 대체로 이렇습니다.

  • 픽셀 크기: 휴대폰 사진 4000×3000은 화소가 1,200만 개입니다. 가로 700픽셀 칸에 넣는다면 고밀도 화면을 감안해 2배로 잡아도 1400×1050, 150만 개가 채 안 됩니다. 압축을 하기도 전에 화소가 8분의 1로 줄어드는 셈입니다. 절약의 대부분이 여기서 나오고, 이 단계를 건너뛰면 품질 값을 아무리 만져도 따라잡을 수 없습니다.
  • 형식: 같은 사진이라도 PNG로 저장하면 화소를 하나도 버리지 않기 때문에 JPEG보다 몇 배씩 커지는 일이 흔합니다. WebP와 AVIF는 눈으로 보기에 비슷한 화질에서 대개 JPEG보다 작습니다. 어떤 그림에 어떤 형식이 맞는지는 웹페이지 이미지 형식과 크기에 정리해 두었습니다.
  • 품질 값: JPEG, WebP, AVIF에서 품질 숫자는 세밀한 정보를 얼마나 버릴지를 정합니다. 사진은 75~85 사이에서는 차이를 알아보기 어렵고, 60 아래로 내려가면 하늘이 계단처럼 끊기고 경계가 번지기 시작합니다.

덧붙여 하나 더 있습니다. 카메라와 휴대폰 사진에는 기종, 촬영 시각, 그리고 많은 경우 찍은 장소의 GPS 좌표 같은 메타데이터(EXIF)가 붙어 있습니다. 용량으로는 몇 KB에 불과하지만, 모르는 사람에게 집 위치를 알려 줄 수 있다는 점이 더 문제입니다. 웹에 올릴 사진에서는 지우는 습관을 들이는 것이 좋습니다.

거의 모든 페이지에 통하는 순서

  1. 보이는 폭을 정합니다. 이미지가 들어갈 자리를 봅니다. 노트북 화면의 전체 폭 배너는 대략 CSS 1400~1900픽셀, 본문 칸 안의 이미지는 600~800픽셀, 세 칸짜리 카드 목록의 이미지는 300~400픽셀로 보입니다.
  2. 그 폭의 약 2배로 줄이되, 적당한 상한을 둡니다. 휴대폰과 노트북 상당수가 고밀도 화면이라 2배면 선명함이 유지됩니다. 실제로는 배너 1920, 본문 이미지 1200~1600, 썸네일 600~800픽셀 정도가 됩니다. 작은 이미지를 키우지는 마십시오. 파일만 커지고 더 흐려집니다.
  3. 형식을 고릅니다. 사진은 WebP나 JPEG(대체 이미지를 둘 수 있다면 AVIF도). 화면 캡처, 도표, 투명 배경 로고는 PNG가 나은 경우가 많습니다. 아래에서 따로 설명합니다.
  4. 품질을 정합니다. 80에서 시작합니다. 100%로 확대해도 차이가 없으면 70으로 내려 보고, 손상이 보이면 85로 올립니다. 이 조정은 파일마다가 아니라 이미지 종류마다 한 번이면 됩니다. 상품 사진 한 장에 맞는 값은 같은 세트의 나머지에도 맞습니다.

이렇게 하면 대략 배너는 300KB 이하, 본문 사진은 150KB 이하, 썸네일은 50KB 이하가 목표가 됩니다. 4MB로 시작한 휴대폰 사진이 가로 1600픽셀 WebP로 150~250KB 안팎이 되는 경우가 많습니다.

결과를 확인하는 법

가장 흔한 실수는 축소된 미리보기로 화질을 판단하는 것입니다. 1600픽셀 이미지를 작은 창에 줄여 보면 압축 흔적도 함께 줄어들어 다 괜찮아 보입니다. 이미지 1픽셀이 화면 1픽셀이 되는 100% 배율로 보고, 원본의 같은 자리와 비교하십시오.

살펴볼 곳은 세 군데입니다. 하늘, 피부, 단색 배경처럼 색이 부드럽게 이어지는 부분(띠 무늬나 네모난 덩어리가 생기는지), 머리카락, 사진 속 글자, 가는 선처럼 경계가 섬세한 부분(테두리에 번짐이나 얼룩이 생기는지), 그리고 어두운 부분입니다. 품질을 낮추면 어두운 곳에 지저분한 얼룩이 가장 먼저 나타납니다. 이 세 곳이 괜찮으면 나머지도 괜찮습니다.

마지막으로 페이지 자체를 확인합니다. 휴대폰으로 열거나 브라우저 개발자 도구의 기기 모드로, 방문자가 실제로 보게 될 크기에서 이미지를 봅니다. 이것이 진짜 시험이고, 100% 확대는 그보다 엄격한 확인일 뿐입니다.

PNG를 그대로 두어야 할 때

전부 JPEG로 바꾸고 싶어지지만, 그러면 오히려 화질이 나빠지고 파일도 커지는 이미지가 있습니다.

  • 글자가 들어간 화면 캡처와 UI 이미지: JPEG는 글자의 날카로운 경계를 흐리고 주변에 잔 얼룩을 남깁니다. PNG는 글자를 또렷하게 유지하고, 넓은 면이 한 가지 색이라 용량도 크게 늘지 않습니다. WebP도 좋은 대안이 될 수 있으니 둘을 비교해 보십시오.
  • 투명 배경이 있는 로고·아이콘·단색 그래픽: JPEG에는 투명이 없습니다. JPEG로 저장하면 투명한 부분이 한 가지 색(대개 흰색)으로 채워져, 색이 있는 배경 위에 놓으면 네모 상자가 드러납니다. PNG나 WebP로 두거나, 벡터 원본이 있다면 SVG를 쓰십시오.
  • 이미 작은 이미지: 12KB짜리 PNG 아이콘은 바꿀 이유가 없습니다.

판단 기준은 간단합니다. 사진이라면 PNG일 이유가 거의 없습니다. 단색 면, 글자, 날카로운 선으로 이루어진 그림이라면 대개 PNG나 WebP가 JPEG보다 낫습니다.

폴더째 한 번에 처리하기

사이트에는 보통 이미지가 여러 장이고, 한 장씩 처리하다 보면 설정이 제각각이 되기 쉽습니다. 한꺼번에 처리할 때는 먼저 나누어 두면 편합니다. 배너, 본문 사진, 썸네일은 필요한 폭이 다르니 폴더를 따로 만들고, 폴더마다 한 가지 설정으로 처리합니다. 원본은 별도 폴더에 그대로 두고, 결과물 폴더는 web처럼 누가 봐도 알 수 있는 이름을 붙여 둘이 섞이지 않게 합니다.

파일 이름은 유지하십시오. HTML이 이미 images/team.jpg를 가리키고 있는데 WebP로 바꾸면 이름이 team.webp가 되어 src를 전부 고쳐야 합니다. JPEG를 유지하면 그 수고가 없고, WebP로 바꾸면 용량을 더 줄일 수 있습니다. 확장자가 바뀔 때 HTML도 함께 고친다면 어느 쪽이든 괜찮습니다.

Finipix로 줄이기

Finipix는 Qorlize가 만든 무료 이미지 도구로, 브라우저 안에서 동작합니다. 이미지는 내 기기에서 처리되고 어디에도 올라가지 않으며, 가입도 필요 없습니다.

  1. Finipix를 열고 이미지 여러 장을 창에 끌어다 놓거나 파일 선택으로 고릅니다. JPG, PNG, WebP, GIF를 열 수 있고, AVIF는 현재 브라우저 대부분에서 열립니다. GIF는 첫 프레임만 남으므로 움직이는 이미지에는 쓰지 마십시오.
  2. 크기 프리셋을 고릅니다. 본문 이미지(가로 1200px), 히어로 · 배너(가로 1920px), 썸네일(가로 600px), 원래 크기, 최대 가로·세로를 직접 정하는 직접 입력이 있습니다. 이미지는 절대 커지지 않고 비율도 그대로 유지됩니다. 1200×630으로 잘라 주는 공유 이미지 프리셋도 있는데, 미리보기를 눌러 남길 부분을 고를 수 있습니다.
  3. 저장 형식을 고릅니다. 원본 형식 유지, JPEG, WebP, PNG 가운데 하나이고, 브라우저가 AVIF로 저장할 수 있을 때는 AVIF도 나옵니다.
  4. 품질 슬라이더를 정합니다. 40~95, 기본값은 80이며 JPEG, WebP, AVIF에 적용됩니다.
  5. 결과를 확인합니다. 이미지마다 원본과 새 파일의 용량, 픽셀 크기, 줄어든 비율이 나오고, 전후 비교 슬라이더로 두 이미지를 겹쳐 볼 수 있습니다. 앞에서 말한 세 곳을 확대해 본 뒤 결정하십시오.
  6. 한 장씩 내려받거나, 전부 ZIP 파일 하나로 내려받습니다.

몇 가지는 알아서 처리됩니다. GPS 위치를 포함한 EXIF 정보는 지워지고, 사진의 회전 정보가 반영되어 옆으로 누운 채 저장되는 일이 없습니다. JPEG로 저장하면 투명한 부분은 흰색이 됩니다. 같은 크기, 같은 형식인데 결과가 원본보다 커진다면 더 무거운 파일을 내주는 대신 원본을 그대로 둡니다.

다른 도구도 이 일을 잘합니다. Google Chrome Labs의 Squoosh(squoosh.app)도 브라우저 안에서 처리하며 형식별 세부 설정을 꼼꼼하게 조절할 수 있어, 중요한 이미지 한 장을 공들여 맞출 때 쓸 만합니다. 데스크톱 이미지 편집 프로그램의 내보내기 창에도 같은 크기·품질 설정이 있습니다.

Finipix는 크기, 형식, 품질만 바꿉니다. 화소를 직접 고치거나 필터를 입히거나 배경을 지우거나 파일 이름을 한꺼번에 바꾸는 기능은 없습니다. 자르기나 보정이 필요하면 이미지 편집 프로그램에서 먼저 하십시오.

다음에 할 일

가벼워진 파일은 알맞은 width, height, alt 속성과 함께 페이지에 다시 넣어야 합니다. 방법은 웹페이지 이미지 형식과 크기에 있습니다. 브라우저 탭에 보일 아이콘도 필요하다면 로고 이미지로 파비콘 세트 만들기를 보십시오.

내 이미지로 바로 해 보려면 Finipix를 여세요. 브라우저에서 돌아가고 이미지는 내 기기 밖으로 나가지 않습니다.

함께 보면 좋은 글