왜 이미지가 페이지 무게를 좌우하는가
CSS와 JavaScript를 동반한 전형적인 HTML 문서는 200500 KB를 전송할 수 있습니다. 최적화되지 않은 사진 한 장은 515 MB일 수 있습니다. 평균 1020 Mbps의 모바일 연결에서 10 MB 이미지는 다운로드에 48초가 걸립니다. 대부분의 방문자는 기다리지 않습니다.
이미지는 Core Web Vitals — 검색 순위에 영향을 주는 페이지 경험에 대한 Google의 지표 — 에도 영향을 줍니다. Largest Contentful Paint(LCP)는 가장 큰 가시 요소가 렌더링되는 데 걸리는 시간을 측정합니다. 그 요소가 히어로 이미지라면, 그 다운로드 시간이 당신의 LCP 점수를 직접 결정합니다. 느린 LCP는 사용자 경험과 검색 순위 둘 다를 해칩니다.
흔한 용의자들, 그리고 각각의 해결
이미지의 느린 로딩은 거의 항상 이것들 중 하나로 귀결됩니다. 각각 빠른 해결과 의미 있는 보답이 있습니다:
| 원인 | 해결 | 일반적 절감 |
|---|---|---|
| 잘못된 형식(PNG 사진) | WebP나 JPG로 변환 | 80% 이상 |
| 전체 해상도 업로드 | 표시 너비의 약 2배로 크기 조정 | 70~80% |
| 약하거나 건너뛴 압축 | 품질 75~85로 내보내기 | 품질 95 대비 3~5배 |
| 지연 로딩 없음 | 접힘 아래에 loading=lazy 추가 | 첫 로드 데이터 감소 |
| HEIC를 변환 없이 제공 | 먼저 WebP나 JPG로 변환 | 깨진 이미지 방지 |
내용 유형에 잘못된 형식
사진에 PNG를 쓰는 것은 웹에서 가장 흔한 이미지 실수 중 하나입니다. PNG는 무손실이고 모든 픽셀을 보존하며, 이는 로고와 스크린샷에는 중요하지만 사진에는 아닙니다. PNG로 저장된 사진은 1525 MB일 수 있습니다. 같은 사진을 고품질 JPEG로 하면 25 MB입니다. WebP로는 동일한 보이는 품질로 2 MB 미만일 수 있습니다.
반대도 실수입니다: 스크린샷, 도표, 텍스트가 있는 이미지에 JPEG를 쓰는 것. JPEG는 딱딱한 가장자리와 평면 색 영역에 보이는 결함을 넣어, 큰 파일을 만드는 높은 품질 설정을 요구합니다. PNG나 WebP는 이 내용을 더 작고 깨끗하게 다룹니다.
카메라 전체 해상도로 이미지 업로드하기
현대 스마트폰의 사진은 1250 메가픽셀에 너비 30008000 픽셀입니다. 대부분의 웹 페이지는 내용 이미지를 너비 600~1600 픽셀로 표시합니다. 전체 해상도 카메라 파일을 사이트에 업로드하면, 브라우저는 8000 픽셀 전부를 다운로드하고 표시를 위해 800 픽셀로 스케일합니다. 필요한 것의 10배 데이터를 전송하는 것입니다.
이미지를 표시될 최대 너비 — 고밀도 화면에서는 CSS 표시 너비의 약 두 배 — 로 업로드 전에 크기 조정하는 것은 흔히 사용 가능한 단일 최대의 크기 감소입니다. 4000 픽셀 이미지를 1600 픽셀로 크기 조정하면 어떤 품질 압축을 적용하기 전에 보통 70~80% 작아집니다.
압축을 건너뛰거나 잘못된 품질 설정을 쓰기
많은 콘텐츠 관리 시스템이 업로드된 이미지를 압축 없이 받아 저장합니다. WordPress, Squarespace, Shopify와 비슷한 플랫폼은 기본으로 약간의 압축을 적용할 수 있지만, 설정은 다양하고 흔히 보수적입니다. 업로드된 원본은 필요보다 훨씬 클 수 있습니다.
JPEG와 WebP에는 웹 페이지에 표시되는 대부분의 사진에 품질 7585가 적절합니다. 75 미만에서는 압축 결함이 보입니다. 85 초과에서는 파일 크기가 크게 늘면서 시각적 개선은 줄어듭니다. 많은 개발자가 기본으로 품질 95나 100을 쓰는데, 이는 품질 80 대비 35배 큰 파일을 정상 보기 크기에서 보이는 차이 없이 만듭니다.
접힘 아래 이미지에 지연 로딩이 없음
기본으로 브라우저는 초기 렌더링 동안 페이지의 모든 이미지를 로드하려 하며, 가시 영역(접힘)보다 훨씬 아래의 이미지도 포함합니다. 이미지 10장이 있는 긴 기사 페이지에서, 독자가 대부분을 보려고 스크롤하지 않을 수도 있는데도 브라우저는 10장 전부를 동시에 다운로드하려 합니다.
<img> 태그의 loading="lazy" 속성은 이미지가 뷰포트에 들어오기 직전까지 로딩을 미루도록 브라우저에 지시하며, 초기 페이지 로드에서 전송되는 데이터를 크게 줄입니다. 첫 뷰포트에 보이지 않는 모든 이미지에 적용하세요. 히어로 이미지나 접힘 위의 어떤 이미지에도 적용하지 마세요 — 그것들은 좋은 LCP 점수를 위해 가능한 한 빨리 로드되어야 합니다.
히어로 이미지에는 특히 fetchpriority="high"를 추가해 브라우저가 스크립트와 다른 이미지보다 먼저 가져오게 하세요. 페이지당 한 이미지 — LCP 요소 — 에만 쓰고 나머지는 기본값으로 두세요.
<img src="photo.webp" loading="lazy" alt="description" /><img src="hero.webp" fetchpriority="high" width="1200" height="675" alt="hero" />
width와 height 속성 누락
브라우저가 페이지를 렌더링하기 시작할 때, 아직 다운로드하지 않은 이미지의 치수를 아직 모릅니다. HTML에 명시적인 width와 height 속성이 없으면, 브라우저는 올바른 공간을 예약할 수 없고, 이미지가 로드되면서 페이지 레이아웃이 이동합니다 — Cumulative Layout Shift(CLS)로 알려진 거슬리는 시각적 점프입니다. 명시적 치수를 추가하면 레이아웃 이동을 막고 브라우저가 이미지 다운로드를 기다리지 않고 레이아웃을 시작할 수 있습니다:
<img src="photo.webp" width="800" height="533" alt="description" />
HEIC나 특이한 형식을 직접 업로드
iPhone은 기본으로 HEIC로 촬영합니다. HEIC 파일이 웹사이트에 업로드되어 변환 없이 제공되면, Chrome, Firefox, Edge에서 표시에 실패합니다. Windows와 Android의 방문자는 깨진 이미지 아이콘을 봅니다. 게시 전에 항상 HEIC를 JPEG나 WebP로 변환하세요.
실용적인 최적화 체크리스트
PhotoTools는 아무것도 서버에 업로드하지 않고 브라우저에서 형식 변환, 크기 조정, 압축 단계를 처리합니다. 페이지를 빠르게 유지하려면 업로드 전에 이미지를 처리하고, 이 체크리스트를 거치세요:
- 사진과 대부분의 웹 이미지에는 WebP를 쓰세요. 텍스트나 투명도가 있는 그래픽에는 PNG를 쓰세요.
- 이미지를 실제로 표시될 최대 너비 — 레티나 화면에서는 CSS 표시 너비의 약 2배 — 로 크기 조정하세요.
- 표준 웹 이미지에는 JPEG와 WebP를 품질 75~85로 압축하세요.
- 접힘 아래의 모든 이미지에 loading="lazy"를 추가하세요.
- 모든 이미지에 명시적인 width와 height 속성을 추가하세요.
- 업로드 전에 HEIC 파일을 JPEG나 WebP로 변환하세요.
- 최종 파일 크기를 확인하세요：800 CSS 픽셀 너비로 표시되는 웹 이미지는 대부분의 경우 200 KB 미만이어야 합니다.