이미지 업로드에서 가장 자주 보는 장면은 카메라나 디자인 툴의 원본을 그대로 올리는 것입니다. 화면에는 정상으로 보입니다 — 브라우저가 알아서 줄여서 그리기 때문입니다. 그래서 문제가 늦게 드러나고, 드러날 때는 이미 수백 장이 쌓인 뒤입니다.
원본을 그대로 올리면 벌어지는 일
워드프레스는 업로드된 이미지를 그냥 저장하지 않습니다. 등록된 크기마다 파일을 하나씩 더 만들고, 원본이 아주 클 경우에는 표시용 기준 크기로 축소한 버전을 따로 만들어 그것을 기본 이미지로 씁니다. 원본은 지워지지 않고 함께 남습니다.
즉 큰 원본 한 장은 디스크에서 여러 장이 됩니다. 이 구조 자체는 좋은 설계입니다 — 방문자에게 맞는 크기를 골라 보내기 위한 재료이기 때문입니다. 다만 재료가 필요 이상으로 크면 만들어지는 사본도 함께 커집니다. 백업 용량, 이전 시간, 스토리지 비용이 조용히 따라 올라갑니다.
화면에서 실제로 필요한 폭
기준은 기기 해상도가 아니라 그 이미지가 실제로 차지하는 최대 폭입니다. 본문 안에 들어가는 이미지는 본문 측정폭을 넘을 일이 없고, 카드 썸네일은 카드 폭이 상한입니다. 화면 전체를 덮는 히어로 이미지만 뷰포트 폭 기준이 필요합니다.
여기에 고밀도 화면(레티나) 몫으로 2배 정도의 여유를 둡니다. 3배까지 올리면 파일은 눈에 띄게 커지는데 사람 눈이 알아보는 차이는 급격히 줄어듭니다. 실무에서는 2배가 좋은 타협점입니다.
업로드 전 3단계
디자인 툴에서 내보낼 때 순서를 고정해 두면 매번 고민하지 않아도 됩니다. 첫째, 쓰임새에 맞는 픽셀 폭으로 리사이즈합니다. 둘째, 지난 회차의 기준으로 포맷을 고릅니다. 셋째, 화면에서 100% 크기로 한 번 확인합니다 — 압축 정도는 숫자가 아니라 눈으로 정합니다.
여기에 하나만 더합니다. 파일 이름을 내용을 설명하는 영문 소문자로 정리하세요. 한글이나 공백이 섞인 이름은 주소에서 인코딩되어 길어지고, 나중에 정리 작업에서 찾기도 어려워집니다.
업로드 규칙을 팀 안에서 공유해 두면 이후 회차의 모든 최적화가 훨씬 쉬워집니다. 배경 원리는 성능 최적화 아카이브에 있고, 이미 쌓인 이미지를 정리하는 작업은 최적화 지원 사업의 범위에 들어갑니다.
다음 회차
업로드 기준이 생겼으니, 이제 업로드된 뒤에 벌어지는 일을 봅니다. 다음 회차는 워드프레스가 자동으로 만드는 이미지 크기들 — 그중 아무도 쓰지 않는 것들을 찾아내는 이야기입니다.