표시되는 폭의 두 배. 기준은 이 한 줄이고, 나머지는 쓰임새별로 그 숫자가 얼마인지입니다.
사진을 웹에 올리기 전에 줄여야 한다는 것은 다들 압니다. 문제는 얼마로 줄이냐입니다. 여기에 대한 답은 하나뿐입니다 — 그 이미지가 화면에 실제로 보이는 폭의 두 배. 아래는 그 숫자가 쓰임새별로 얼마인지, 그리고 왜 두 배인지에 대한 설명입니다.
요즘 휴대폰 사진은 긴 변이 4000픽셀을 넘고 한 장에 3~8MB 입니다. 그런데 블로그 본문에서 그 사진이 실제로 차지하는 폭은 800픽셀 남짓입니다. 남는 3200픽셀은 화면에 그려지지 않습니다.
브라우저가 알아서 줄여 보여주기 때문에 화면상으로는 아무 문제가 없습니다. 그래서 대부분 그대로 둡니다. 비용은 다른 곳에서 나옵니다 — 방문자가 3200픽셀 몫의 데이터를 받은 다음에야 사진이 뜨고, 휴대폰 데이터로 들어온 사람은 그만큼을 실제로 씁니다. 사진 열 장이 들어간 글이면 40MB 를 받게 하는 셈입니다.
검색 순위에 쓰이는 지표 중에 화면에서 가장 큰 요소가 언제 그려지는지를 재는 값이 있습니다. 본문 맨 위 사진이 대개 그 요소라, 사진 한 장이 늦으면 그 값이 통째로 늦어집니다.
화면의 1픽셀과 이미지의 1픽셀은 같지 않습니다. 요즘 휴대폰과 노트북은 화면 1픽셀 자리에 실제 점을 두 개씩 찍습니다. 그래서 800픽셀 폭으로 보이는 자리에 800픽셀짜리 이미지를 넣으면 그 화면에서는 흐리게 보입니다. 두 배인 1600픽셀을 넣으면 선명합니다.
두 배까지만 하면 됩니다. 세 배로 올려도 눈으로 구분되지 않고 용량만 2.25배가 됩니다. 점을 세 개씩 찍는 화면이 있긴 하지만, 그 화면에서 두 배짜리와 세 배짜리를 나란히 놓고 구분하는 사람은 거의 없습니다.
여기서 「긴 변」은 가로 사진이면 가로, 세로 사진이면 세로를 말합니다.
| 쓰임 | 화면에 보이는 폭 | 저장할 긴 변 |
|---|---|---|
| 블로그 본문 사진 | 700~800px | 1600px |
| 목록 썸네일 | 200~300px | 600px |
| 프로필·아바타 | 100px 안팎 | 300px |
| 화면 전체 폭 배경 | 1200~1600px | 2400px |
| OG 이미지(공유 미리보기) | — | 1200 × 630 고정 |
OG 이미지만 성격이 다릅니다. 이건 화면에 보이는 크기를 따라가는 값이 아니라 규격입니다. 카카오톡·슬랙·엑스에 링크를 붙였을 때 뜨는 그 미리보기 그림인데, 가로세로 비율이 어긋나면 서비스마다 제멋대로 잘라냅니다. 1200 × 630 에 정확히 맞추고, 중요한 글자는 가장자리에서 충분히 떨어뜨려 두세요.
크기를 「가로 1600 × 세로 1200」처럼 양쪽 다 고정하면 세로 사진이 들어왔을 때 찌그러지거나 잘립니다. 「긴 변 1600」으로 잡으면 가로 사진은 1600×1200 이 되고 세로 사진은 1200×1600 이 되어, 비율이 그대로 유지된 채 둘 다 적당한 크기가 됩니다.
정사각형으로 맞춰야 하는 경우(프로필 사진처럼)는 줄이기 전에 잘라내는 것이 먼저입니다. 줄이는 단계에서 정사각형을 강제하면 어디를 남길지 도구가 임의로 정하게 됩니다.
추측하지 않고 직접 잴 수 있습니다. 브라우저에서 그 사진을 오른쪽 클릭하고 「검사」를 누르면 개발자 도구가 열립니다. 목록에서 그 이미지 줄에 마우스를 올리면 두 숫자가 같이 뜹니다.
원본 크기가 표시 크기의 두 배보다 크다면 그만큼은 버려지는 데이터입니다. 네 배, 다섯 배로 나오는 경우가 흔합니다.
이미지 일괄 리사이즈를 열고 사진을 전부 끌어다 놓으세요. 크기 칸에서 긴 변을 고르고 위 표의 숫자를 넣으면 됩니다. 원본보다 크게 만들지 않는 것이 기본값이라, 이미 작은 사진이 섞여 있어도 억지로 늘리지 않습니다.
포맷은 사진이면 WebP, 품질은 0.8 정도가 무난합니다. 스크린샷이나 로고처럼 선과 글자로 된 그림은 PNG 가 맞습니다 — 이런 그림을 WebP 나 JPEG 로 바꾸면 용량이 오히려 늘고 글자 가장자리가 지저분해집니다.
결과는 zip 하나로 받습니다. 파일은 브라우저 밖으로 나가지 않으므로 장수나 용량에 제한이 없습니다.
한 번 줄인 사진은 되돌릴 수 없습니다. 다음은 원본을 그대로 두셔야 합니다.
이 도구는 원본 파일을 건드리지 않고 새 파일을 만들어 주지만, 원본을 이미 덮어썼다면 그건 되돌릴 수 없습니다. 중요한 사진은 원본 폴더를 따로 두고 작업하세요.