웹 이미지는 어떻게 넣어야 하나요?

픽셀 크기와 파일 용량을 줄이는 것부터 alt, 파일명, width·height, 반응형 소스, LCP 우선순위까지 한 번에 점검합니다.

08 / 10 · 16분 · 난이도: 초급 · 도구: Meta Checker · WOW Converter

좋은 이미지는 선명하기만 한 이미지가 아닙니다. 필요한 화면 크기에 맞고, 전송량이 작고, 의미를 텍스트로 설명하며, 페이지 레이아웃을 흔들지 않아야 합니다.

먼저 기억할 이미지 6원칙

항목좋은 기준나쁜 예
픽셀 크기표시하는 기기의 화면에 맞는 알맞은 이미지 크기300px 카드에 4000px 원본
포맷사진은 WebP/AVIF, 투명 그래픽은 필요에 맞게 선택사진을 거대한 PNG로 제공
용량눈에 띄는 품질 저하 없이 충분히 압축작은 썸네일이 수 MB
alt이미지의 목적을 맥락에 맞게 설명누락 또는 키워드 나열
파일명짧고 설명적인 영문 파일명IMG_9382_final_final.jpg
로딩아래쪽 이미지는 lazy, LCP 이미지는 우선 로딩첫 화면 대표 이미지를 lazy 처리

alt=""는 항상 오류가 아닙니다. 장식용 이미지처럼 읽을 필요가 없을 때는 빈 alt가 올바릅니다. 반대로 정보성 이미지에서 alt 속성 자체가 빠지면 문제입니다.

Meta Checker 이미지 진단 따라 하기

Meta Checker 이미지 진단에서 전체 이미지 통계와 LCP 후보 문제를 표시한 화면
이미지 탭은 문제 개수만 말하지 않고 원본·렌더링 크기, 용량, 로딩, alt, 반응형 소스를 함께 보여 줍니다.
  1. 1전체 이미지, 문제 이미지, 총 전송 용량, LCP 후보를 먼저 봅니다.
  2. 2LCP 후보는 첫 화면의 주요 콘텐츠일 가능성이 큽니다. lazy 여부와 fetchpriority를 점검합니다.
  3. 3개별 카드에서 렌더링 크기와 원본 크기, 파일 크기, alt, loading, 반응형 소스, 문제 문구를 읽습니다.

이미지 탭을 열고 ‘문제만’을 선택합니다

우선순위를 좁히되, 문제 없음으로 표시된 이미지도 페이지 목적에 맞는지는 사람이 확인해야 합니다.

원본 크기와 렌더링 크기를 비교합니다

원본 가로폭이 렌더링 폭과 기기 배율을 고려한 필요치보다 지나치게 크면 리사이즈합니다.

파일 용량과 포맷을 봅니다

큰 JPG·PNG는 WebP 또는 AVIF 변환 후보입니다. 단, 실제 전후 화질과 용량을 함께 비교하세요.

alt와 크기 속성을 봅니다

정보성 이미지는 구체적인 alt를, 모든 레이아웃 이미지에는 가능한 한 width와 height를 제공합니다.

LCP 후보를 가장 먼저 고칩니다

첫 화면 대표 이미지에 loading="lazy"를 쓰지 말고 필요시 fetchpriority="high"를 검토합니다.

WOW Converter로 포맷·크기 최적화하기

wow-converter.com은 브라우저에서 JPG, PNG, WebP, AVIF 포맷과 크기를 바꾸는 도구입니다. 화면은 업데이트될 수 있지만 작업 흐름은 다음과 같습니다.

WOW Converter 첫 화면의 이미지 업로드 영역을 표시한 모습
1단계. 변환할 이미지를 점선 영역에 끌어 놓거나 눌러 선택합니다.
  1. 1원본 파일을 추가하는 업로드 영역입니다. 변환 전 원본을 별도로 보관하세요.
WOW Converter에 이미지를 추가한 뒤 WebP 포맷과 이미지 변환 버튼을 표시한 화면
2–3단계. 출력 포맷과 품질을 고른 뒤 변환합니다.
  1. 1WebP 또는 AVIF를 선택합니다. 호환성을 넓게 가져가려면 WebP부터 비교해도 좋습니다.
  2. 2품질·세부 옵션을 확인하고 ‘이미지 변환’을 누릅니다.
WOW Converter 변환 완료 후 다운로드 버튼을 표시한 화면
4단계. 변환 결과의 픽셀 크기·파일 용량·미리보기를 확인하고 다운로드합니다.
  1. 3결과가 원본보다 실제로 작고 화질이 충분할 때 다운로드합니다.
포맷만 바꾸면 끝이 아닙니다.4000×3000 이미지를 WebP로 바꿔도 400px 카드에는 여전히 과합니다. 출력 포맷과 함께 픽셀 크기도 용도에 맞게 줄이세요.

HTML 태그까지 개선하기

<picture>
  <source type="image/avif" srcset="guide-640.avif 640w, guide-1280.avif 1280w">
  <source type="image/webp" srcset="guide-640.webp 640w, guide-1280.webp 1280w">
  <img
    src="guide-1280.jpg"
    srcset="guide-640.jpg 640w, guide-1280.jpg 1280w"
    sizes="(max-width: 760px) 100vw, 760px"
    width="1280"
    height="720"
    alt="Meta Checker에서 이미지 용량과 alt 문제를 확인하는 화면"
    loading="lazy"
    decoding="async"
  >
</picture>
  • alt: “이미지”, “사진” 같은 말만 쓰지 말고 이 이미지가 전달하는 정보를 문맥에 맞게 적습니다.
  • 파일명: meta-checker-image-audit.webp처럼 짧고 설명적으로 씁니다. 파일명은 가벼운 단서이며 alt와 주변 문맥을 대체하지 않습니다.
  • width/height: 실제 비율에 맞는 값을 넣어 로딩 전 공간을 확보합니다.
  • srcset/sizes: 브라우저가 화면에 맞는 파일을 고르게 합니다.
  • loading: 아래쪽은 lazy, 첫 화면 주요 이미지는 eager/기본 로딩을 사용합니다.

교체 후 재검사하기

  1. 변환 파일을 업로드하고 HTML/CMS의 이미지 URL을 교체합니다.
  2. 캐시와 CDN이 있다면 새 파일을 제공하는지 확인합니다.
  3. 페이지를 새로고침한 뒤 Meta Checker 이미지 탭을 다시 엽니다.
  4. 문제 이미지 수, 총 전송 용량, 원본 크기, 포맷, alt 상태가 개선됐는지 비교합니다.
  5. PageSpeed Insights를 바로 열어 검사할 페이지 URL을 입력하고 LCP와 실제 성능을 확인합니다.
  • 과도하게 큰 원본 이미지를 리사이즈했다.
  • 용도에 맞는 WebP/AVIF/JPG/PNG를 선택했다.
  • 정보성 이미지에 맥락 있는 alt가 있다.
  • width·height와 반응형 소스를 제공했다.
  • LCP 후보를 lazy 처리하지 않았다.
  • 변환 전후 화질·용량과 Meta Checker 결과를 비교했다.

더 읽기