전 세계 웹 트래픽의 60% 이상이 모바일 기기에서 발생합니다. 그럼에도 이미지는 여전히 느린 모바일 페이지의 가장 큰 원인입니다 — 용량이 크고, 화면보다 훨씬 큰 크기로 제공되는 경우가 많으며, 오래된 포맷으로 전달되기 일쑤입니다. Google의 연구에 따르면 모바일 페이지 로드 시간이 1초 지연될 때마다 전환율이 7% 감소합니다. 웹 개발자와 콘텐츠 제작자에게 이미지 최적화는 가장 큰 효과를 낼 수 있는 개선 작업 중 하나입니다.

이 가이드는 모바일 성능에 영향을 주는 모든 기법을 다룹니다: 크기 조정, 포맷 선택, 압축 목표값, 지연 로딩, 반응형 이미지 마크업. 각 섹션에는 구체적인 수치가 포함되어 있어 무엇을 목표로 해야 하는지 정확히 알 수 있습니다.

1. 모바일 화면에 맞게 이미지 크기 조정

대부분의 스마트폰 화면은 CSS 픽셀 기준으로 360px에서 428px 사이입니다. 고DPI(Retina) 디스플레이를 고려해 물리적 픽셀 밀도를 두 배로 계산해도, 콘텐츠 이미지가 오늘날 사용되는 모든 모바일 화면에서 선명하게 보이려면 800px 이상의 너비가 필요하지 않습니다.

문제는 카메라와 디자인 툴이 3000~6000px 너비의 이미지를 생성한다는 점입니다. 800px 칼럼에 넣기 위해 4000px 짜리 사진을 업로드하면 브라우저는 필요한 것보다 25배 많은 픽셀 데이터를 다운로드한 후 CSS로 크기를 줄입니다. 사용자의 모바일 데이터 요금제가 불필요한 모든 바이트에 대한 비용을 부담하게 됩니다.

콘텐츠 이미지(블로그, 상품): 업로드 전 최대 너비 800px로 크기 조정
히어로 이미지: 대형 폰과 태블릿의 전체 화면 레이아웃에는 1200~1600px 너비로 충분
썸네일 및 아바타: 200~300px 너비를 초과할 필요가 거의 없음
원본 카메라 파일을 웹 페이지에 직접 업로드하지 마세요

업로드 전에 Picovert 이미지 크기 조정 도구를 사용하여 올바른 크기로 조정하세요. 여러 파일을 한 번에 일괄 처리할 수 있습니다.

2. 올바른 포맷 선택

포맷 선택은 파일 크기에 큰 영향을 미칩니다. 알아야 할 두 가지 최신 포맷은 WebP와 AVIF입니다:

WebP: 동일한 시각적 품질에서 JPEG보다 25~35% 작습니다. 2020년부터 Chrome, Firefox, Safari, Edge 등 모든 주요 브라우저에서 지원됩니다. 폭넓은 호환성을 위한 가장 안전한 최신 포맷입니다.
AVIF: JPEG보다 40~50% 작습니다. Chrome, Firefox, Safari(iOS 16+)에서 지원됩니다. 2025년에 전 세계적으로 브라우저 지원율이 약 90%에 달했습니다. 일부 구형 브라우저가 WebP 또는 JPEG 버전으로 폴백하는 것을 허용할 수 있을 때 사용하세요.
JPEG: WebP를 사용할 수 없는 경우 사진에는 여전히 사용 가능하지만, 업로드 전 반드시 압축하세요. 텍스트나 날카로운 기하학적 테두리가 있는 이미지에는 절대 사용하지 마세요 — 블록 아티팩트가 눈에 띕니다.
PNG: 로고, 아이콘, 스크린샷, 투명도가 필요한 이미지에만 사용하세요. PNG는 무손실이므로 사진 스타일의 PNG 파일은 동일한 WebP 파일보다 3~5배 큽니다. 사진에 PNG를 사용하는 것은 모바일 사이트에서 가장 흔하고 비용이 많이 드는 실수 중 하나입니다.

현재 JPEG 또는 PNG 이미지를 사용 중이라면 업로드 전에 Picovert 이미지 변환 도구를 사용하여 WebP로 변환하세요. 크기 절감만으로도 페이지 용량을 30% 줄일 수 있습니다.

3. 모바일을 위한 적극적인 이미지 압축

올바른 포맷을 선택한 후에도 대부분의 이미지는 모바일 친화적인 파일 크기에 맞추기 위해 명시적인 압축이 필요합니다. WebP에서 품질 95와 품질 75의 차이는 일반적인 화면 크기에서 사람의 눈으로 거의 구분하기 어렵지만, 파일 크기 차이는 3배 이상이 될 수 있습니다.

모바일을 위한 파일 크기 목표:

일반 콘텐츠 이미지(블로그, 상품 상세): 100KB 미만
히어로 이미지: 150~200KB 미만
썸네일(그리드, 캐러셀): 30KB 미만
파비콘 및 소형 아이콘: 5KB 미만

WebP 품질 설정 70~80은 대부분의 사진에서 시각적 품질과 파일 크기 사이의 최적점을 찾을 수 있습니다. 세밀한 텍스트나 기술적 다이어그램이 있는 이미지는 80~85에 가깝게 유지하세요.

Picovert 이미지 압축 도구를 사용하여 이러한 목표치에 맞게 이미지를 압축하세요. 다운로드 전에 품질을 조정하고 결과를 미리 볼 수 있습니다.

4. 업로드 전에 크기 조정하기

흔한 워크플로 실수는 고해상도 이미지를 업로드하고 CSS max-width: 100%로 시각적으로 크기를 줄이는 것입니다. CSS 스케일링은 표시 전용입니다 — 브라우저는 여전히 원본 파일의 모든 바이트를 다운로드합니다. 해결책은 이미지가 서버나 CDN에 도달하기 전에 실제 표시 너비로 크기를 조정하는 것입니다.

기본 원칙: 이미지 파일 너비(픽셀)는 Retina 디스플레이를 고려하여 화면에 표시될 최대 크기의 2배와 일치해야 합니다. 표준 레이아웃에서 800px 칼럼의 경우 1600px보다 넓지 않은 이미지를 업로드해야 합니다. 400px 썸네일의 경우 800px보다 넓지 않아야 합니다.

Picovert 이미지 크기 조정 도구를 사용하면 정확한 목표 너비를 설정하고 종횡비를 자동으로 유지할 수 있습니다. 한 번의 세션에서 여러 이미지를 일괄 처리할 수도 있습니다.

5. 지연 로딩 활성화

<img> 태그의 loading="lazy" 속성은 이미지가 뷰포트에 가까워질 때까지 다운로드를 지연하도록 브라우저에 지시합니다. 이미지가 많은 긴 페이지에서 초기 페이지 로드 용량을 50~80% 줄일 수 있습니다 — 사용자는 실제로 스크롤한 이미지만 다운로드합니다.

<img
  src="product-photo.webp"
  alt="상품명 및 설명"
  width="800"
  height="600"
  loading="lazy"
>

페이지의 첫 번째 이미지(히어로 이미지, 폴드 위 배너)에는 loading="lazy"를 사용하지 마세요. LCP 요소를 지연 로딩하면 Largest Contentful Paint 점수가 지연되어 Core Web Vitals에 부정적인 영향을 줍니다.
폴드 아래의 모든 이미지에는 사용하세요: 본문 이미지, 상품 그리드, 작성자 아바타, 관련 기사 썸네일.
대부분의 최신 CMS 플랫폼(WordPress 5.5+, Shopify, Squarespace)은 자동으로 loading="lazy"를 추가합니다. 사용 중인 플랫폼이 지원하는지 확인하세요.

6. srcset을 사용한 반응형 이미지

srcset 속성을 사용하면 여러 이미지 크기를 제공하고 브라우저가 기기의 화면 너비와 픽셀 밀도에 따라 가장 적합한 것을 선택하도록 할 수 있습니다. 모바일 폰은 작은 버전을 다운로드하고, 데스크탑 모니터는 큰 버전을 다운로드합니다. 아무도 필요 이상으로 다운로드하지 않습니다.

<img
  src="hero-800w.webp"
  srcset="
    hero-400w.webp  400w,
    hero-800w.webp  800w,
    hero-1200w.webp 1200w
  "
  sizes="(max-width: 480px) 400px, (max-width: 900px) 800px, 1200px"
  alt="히어로 이미지 설명"
  width="1200"
  height="800"
  loading="eager"
>

sizes 속성은 각 중단점에서 이미지가 얼마나 넓게 렌더링될지 브라우저에 알려주어, CSS가 로드되기 전에 어떤 소스를 가져올지 계산할 수 있게 합니다. 항상 srcset과 sizes를 함께 사용하세요 — sizes가 없으면 브라우저는 100vw로 가정하여 필요 이상으로 큰 이미지를 다운로드할 수 있습니다.

Picovert 이미지 크기 조정 도구로 크기 변형을 생성한 다음, 이미지 압축 도구로 각 변형을 압축하세요.

7. 흔한 실수 피하기

사진에 PNG 사용: PNG로 저장된 사진은 일반적으로 동일한 WebP 사진보다 3~5배 큽니다. 사진 콘텐츠에는 항상 WebP 또는 JPEG를 사용하세요.
히어로 이미지를 압축하지 않음: 히어로 이미지는 종종 폴드 위에 있으며 LCP 요소입니다. 2MB짜리 히어로 이미지는 모바일 페이지에서 가장 나쁜 것 중 하나입니다. 히어로는 150KB 이하로 압축하세요.
400px 컨테이너에 2000px 이미지 삽입: CSS는 표시를 스케일링하지만 다운로드는 스케일링하지 않습니다. 항상 이미지 크기를 컨테이너 크기에 맞추세요.
width와 height 속성 누락: 명시적인 크기가 없으면 브라우저가 이미지 로드 전에 공간을 예약할 수 없어 레이아웃 이동(CLS)이 발생합니다. 항상 두 속성을 모두 지정하세요.
폴드 위 이미지에 지연 로딩 적용: LCP 이벤트가 지연되어 Core Web Vitals 점수가 떨어집니다. 히어로 이미지에는 loading="eager"를 사용하거나 속성을 생략하세요.
썸네일 압축 무시: 200KB짜리 썸네일 20개를 로드하는 페이지는 4MB의 이미지를 다운로드합니다. 각 썸네일은 30KB 미만이어야 합니다.

모바일 이미지 최적화 체크리스트

포맷이 WebP(권장) 또는 AVIF — 필요한 경우가 아니라면 JPEG나 PNG 아님
콘텐츠 이미지는 100KB 미만, 썸네일은 30KB 미만, 히어로는 150KB 미만
이미지 너비가 표시 너비와 일치 (콘텐츠 최대 800px, 히어로 최대 1600px)
폴드 아래의 모든 이미지에 loading="lazy" 설정
폴드 위 히어로 이미지에는 loading="lazy"가 없음
모든 이미지에 width와 height 속성 설정
다양한 중단점에서 다양한 크기를 제공하기 위해 srcset과 sizes 사용
PNG는 로고, 아이콘, 투명도가 필요한 이미지에만 사용
원본 카메라 파일은 절대 직접 업로드하지 않음 — 항상 크기 조정 및 압축 먼저
Chrome DevTools 기기 에뮬레이션에서 스로틀링된 모바일 네트워크로 페이지 테스트

가장 빠른 개선 경로는 가장 무거운 이미지부터 시작하는 것입니다. Picovert 이미지 압축 도구를 사용하여 파일 크기를 100KB 미만으로 줄이고, 이미지 크기 조정 도구로 레이아웃에 맞게 크기를 맞추세요 — 두 도구 모두 브라우저에서 완전히 실행되며 업로드가 필요 없습니다.