큰 이미지가 페이지가 느리게 로드되는 첫째 이유다. 해결책은 거의 항상 두 단계다. 이미지를 올바른 치수로 만든 뒤, 남은 것을 압축한다. 둘 다 하면 4MB 사진이 화면에서 똑같아 보이는 150KB 사진이 된다.
실제 숫자를 붙여보자.
목표로 삼을 크기
추측할 필요 없다. 페이지를 빠르게 유지하는 실용적 무게 예산이 여기 있다:
- 히어로 / 전체 너비 배너: 200KB 미만, 이상적으로는 약 100~150KB.
- 본문 내 사진: 각 80~150KB.
- 썸네일 / 아바타: 10~30KB.
- 로고나 아이콘(PNG/SVG): 30KB 미만; 종종 훨씬 적게.
그리고 치수:
- 전체 너비 히어로: 대부분의 레이아웃에 가로 1600~2000px면 충분하다(레티나를 겨냥하고 바이트를 감당할 수 있을 때만 두 배로).
- 칼럼 내 사진: 콘텐츠 너비에 맞춰라 — 종종 800~1200px.
- 썸네일: 실제 표시되는 크기, 예컨대 300~400px.
페이지의 단일 이미지가 약 300KB를 넘으면 보통 고칠 만한 실수다.
1단계: 실제 표시 너비로 리사이즈
이것이 사람들이 건너뛰는 단계이고, 가장 큰 지렛대다. 휴대폰에서 막 나온 사진은 종종 가로 4000픽셀 이상이다. 800픽셀 칼럼에 표시된다면 화면이 보여주는 것보다 25배 많은 픽셀을 보내는 것이고 — 픽셀 수가 무엇보다 파일 크기를 좌우한다.
이미지 리사이저로 이미지를 실제로 나타나는 너비까지 줄여라. 픽셀이나 퍼센트로 리사이즈하고, 가로세로 비율을 잠그고, 고품질 축소기가 가장자리를 깨끗하게 유지하게 하라.
올바른 크기 조정만으로도 단 한 바이트도 압축하기 전에 파일 크기를 흔히 80~90% 줄인다.
2단계: 남은 것을 압축
이제 그 올바른 치수 안의 데이터를 줄인다.
- 사진(JPG/WebP): 품질 슬라이더를 75~85로 설정하라. 대부분의 이미지에서 시각적으로 무손실이면서 크기를 크게 줄인다.
- PNG(스크린샷, 그래픽): 이미지 압축기가 256색 팔레트로 줄여, 보통 눈에 보이는 변화 없이 60~80%를 절약하고 투명도를 유지한다.
압축기는 또한 출력을 원본 크기로 제한한다 — 더 큰 것을 절대 돌려주지 않는다 — 그리고 선택적 너비 상한이 있어, 실제로 두 단계를 한 번에 할 수 있다. 상한을 목표 너비로 설정하고 한 번에 압축하라. 폴더 전체를 일괄 처리해 ZIP으로 내려받아라.
하는 김에 올바른 포맷 고르기
이미지가 현대 브라우저에 제공될 것이라면, 사진을 WebP로 변환하는 것이 같은 품질에서 JPEG보다 25~35% 더 이긴다. 단색 그래픽은 PNG(또는 WebP)로 남겨라. 사진을 PNG로 저장하지 마라 — 그것이 고전적인 부풀림 실수이고, 쉽게 5~10배 벌금이다.
현실적 작업 흐름
사진 다섯 장이 있는 블로그 글의 경우:
- 각각을 칼럼 너비(가령 1200px)로 리사이즈한다.
- 품질 80으로 압축하거나 WebP로 변환한다.
- 각각이 약 150KB 미만에 착지하는지 확인한다.
- 이미지 하나의 100% 크롭을 확인해 품질이 유지됐는지 본다.
합계 20MB로 시작한 사진 다섯 장이 약 600KB에 착지한다 — 멈칫하는 대신 눈 깜짝할 새 로드되는 페이지.
비공개이고 오프라인
위의 모든 것이 Canvas와 WebAssembly를 써서 전적으로 브라우저에서 돌아간다. 어떤 이미지도 서버로 업로드되지 않고, 첫 방문 이후 도구가 캐시되어 오프라인에서 작동한다. 연결 없이, 아무것도 기기를 떠나지 않은 채 글 하나 분량의 이미지를 전부 최적화할 수 있다.