이미지 리사이즈로 모바일 최적화하기

2026년 7월 15일 · 7분 읽기

2026년 현재 전 세계 웹 분할의 60% 분리된 장치에서 발생합니다. 하지만 많은 웹사이트는 여전히 남아있는 만족스러운 이미지를 모바일에서도 크기로 제공하고 있습니다. 방법을 상세히 소개합니다.

왜 모바일 이미지 리사이즈가 중요한가?

모바일 장치와 데스크탑의 이미지 요구 사항을 크게 고려하십시오:

• 화면 크기: 모바일은 360~428px, 데스크톱은 1920px 이상
• 네트워크: 모바일은 불안정한 셀룰러, 데스크톱은 안정적인 Wi-Fi
• 처리 능력: 모바일은 제한된 CPU/GPU, 데스크톱은 강력한 하드웨어
• 배터리: 모바일은 배터리 소모가 중요, 데스크톱은 관계없음

360px 화면에 1920px 이미지를 로드하는 것은 불필요한 4.3MB의 데이터를 다운로드하는 것과 같습니다. 적절한 크기로 리사이즈하면 파일 크기를 70~90%까지 줄일 수 있습니다.

반응형 이미지의 기본 원칙

크기의 반응형 이미지는 다양한 크기의 크기와 그에 따라 다른 크기의 이미지를 제공하는 축제입니다. 핵심은

srcset 속성

HTML의 srcset 속성을 사용하면 브라우저가 디바이스에 맞는 이미지를 자동으로 선택합니다.

<img 
  src="image-800.webp"
  srcset="image-400.webp 400w,
          image-800.webp 800w,
          image-1200.webp 1200w,
          image-1920.webp 1920w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  alt="Description"
>

이 코드는 브라우저에게 다른 크기의 이미지를 제공하고, 화면 크기에 따라 최적의 것을 선택하도록 합니다.

sizes 속성

sizes 속성은 이미지가 화면에서 차지하는 크기를 브라우저에게 알려줍니다. 이를 통해 브라우저는 필요한 이미지 크기를 정확히 계산할 수 있습니다.

모바일 이미지 크기 가이드

이미지 리사이즈 실전 가이드

1단계: 현재 이미지 분석

먼저 웹사이트의 이미지가 어떻게사용되고 있는지 파악해야 합니다.

• Chrome DevTools의 Network 탭에서 이미지 파일 크기를 확인합니다
• Lighthouse의 "Properly size images" 항목을 확인합니다
• 각 이미지의 실제 표시 크기와 원본 크기를 비교합니다

2단계: 필요한 크기 결정

디자인에서 이미지가 표시되는 MAX 크기를 확인하고, 2x 디스플레이를 고려하여 2배 크기의 이미지를 준비하세요.

• 표시 크기 400px → 800px 이미지 준비
• 표시 크기 600px → 1200px 이미지 준비
• 표시 크기 800px → 1600px 이미지 준비

3단계: 리사이즈 수행

ZXZX의 리사이즈 도구를 사용하면 여러 크기의 이미지를 한 번에 생성할 수 있습니다.

1. ZXZX 리사이즈 도구에 이미지를 업로드합니다
2. 목표 너비를 입력합니다 (예: 400, 800, 1200)
3. 비율 유지 옵션을 활성화합니다
4. "리사이즈"를 클릭합니다
5. 결과를 다운로드합니다

4단계: HTML 적용

생성된 이미지를 srcset과 크기 속성으로 적용합니다. 위의 코드 예시를 참고하세요.

고급 리사이즈 기법

아트 디렉션 (Art Direction)

예를 들어, 휴식 공간에서는 넓은 주변 사진을 사용하고 모바일에서는 중앙 부분만 사용하여 사용할 수 있습니다.

<picture>
  <source media="(max-width: 600px)" srcset="image-mobile.webp">
  <source media="(max-width: 1200px)" srcset="image-tablet.webp">
  <img src="image-desktop.webp" alt="Description">
</picture>

픽셀 밀도 처리

Retina 디스플레이와 같은 고해상도 디스플레이를 지원하려면 2x 또는 3x 크기의 이미지를제공해야 합니다.

<img 
  srcset="image-400.webp 1x,
          image-800.webp 2x"
  src="image-400.webp"
  alt="Description"
>

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

• ☐ 모든 이미지가 적절한 크기로 리사이즈됨
• ☐ srcset과 sizes 속성이 적용됨
• ☐ loading="lazy"가 폴딩 아래 이미지에 적용됨
• ☐ width, height 속성이 지정됨 (CLS 방지)
• ☐ WebP 포맷으로 변환됨
• ☐ 품질 75~85%로 압축됨

성능 측정 도구

• Google PageSpeed Insights: 모바일 성능 점수와 이미지 관련 제안을 확인합니다
• Chrome DevTools: 모바일 에뮬레이션으로 실제 모바일 환경을 시뮬레이션합니다
• WebPageTest: 실제 모바일 디바이스에서의 성능을 측정합니다

실제 사례: 모바일 이미지 최적화

한 블로그 사이트에서 모바일 이미지를 최적화한 결과입니다.

결론

모바일 이미지 리사이즈는 성능 개선 중 가장 효과적인 조치입니다. 복잡한 설정 없이 ZXZX의 리사이즈 도구로 시작할 수 있습니다. 적절한 크기의 이미지를 제공하면 사용자 경험과 검색 순위 모두 개선됩니다.