웹사이트 이미지 최적화: 게시 전 페이지 점검

먼저 점검

브라우저가 다운로드하는 것부터 시작

디자인 파일과 미디어 폴더는 실제 사용자에게 전달되는 내용을 보여주지 않습니다. 브라우저가 불러오는 이미지 URL, 크기, 공간 확보 여부, 큰 파일 재사용 여부를 확인하세요.

이미지 계획

변환 전 중요 이미지별 계획 수립

이미지 계획은 이 가이드를 변환기 관련 글과 분리합니다. 각 이미지 영역에 필요한 크기, 로딩 순서, 대체 이미지, 메타데이터 역할, 최종 확인을 기록합니다.

계획에서 새 버전이 필요하면 이미지 변환 가이드으로 다음 단계를 선택하세요. 일반 WebP 작업은 JPG에서 WebP 변환 가이드을, 추가 절감이 필요한 큰 사진은 AVIF 가이드를 사용하세요.

이미지 크기

각 이미지 영역에 명확한 크기 지정

반응형 이미지는 HTML이 레이아웃과 일치할 때만 작동합니다. 영역을 측정하고, 유용한 너비를 선택하며, 종횡비를 확보하고, 원본이 있다고 해서 큰 파일을 보내지 마세요.

간단 점검: 360px 카드가 2400px 파일을 다운로드하면 압축 문제가 아니라 작은 이미지 버전이 필요하거나 HTML이 잘못된 파일을 가리키는 것입니다.

로딩 순서

첫 이미지는 의도적으로 로딩하세요

첫 화면을 구성하는 이미지는 하단 이미지와 다른 규칙이 필요합니다. 예상 LCP 이미지를 찾아 실수로 지연 로딩하지 말고, 하단 이미지는 필요할 때까지 조용히 유지하세요.

1. 1

   LCP 이미지 이름 지정

   첫 의미 있는 이미지가 Largest Contentful Paint가 될 가능성이 있으면 실수로 지연 로딩하지 마세요.

2. 2

   하단 이미지는 조용히 유지

   첫 뷰포트 아래 이미지는 일반적으로 지연 로딩과 비동기 디코딩을 사용해야 합니다.

3. 3

   CSS 배경 이미지 점검

   잘린 배경 이미지도 큰 파일을 다운로드할 수 있습니다. 보이는 영역에 맞는 크기의 파일을 사용하세요.

4. 4

   중복 요청 점검

   작은 카드 이미지라도 같은 큰 파일이 여러 번 반복되면 비용이 커집니다.

HTML

측정한 영역에 반응형 HTML 사용

중요 이미지에 대해 브라우저 선택을 명확히 하세요. 아래 예시는 너비 옵션, 크기, 고정 치수, 대체 이미지를 보여줍니다. 습관이 아닌 영역에 따라 로딩 방식을 조정하세요.

<picture>
  <source
    type="image/avif"
    srcset="/images/article/product-640.avif 640w,
            /images/article/product-960.avif 960w,
            /images/article/product-1280.avif 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <source
    type="image/webp"
    srcset="/images/article/product-640.webp 640w,
            /images/article/product-960.webp 960w,
            /images/article/product-1280.webp 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <img
    src="/images/article/product-960.jpg"
    alt="업로드 흐름을 보여주는 대시보드 스크린샷"
    width="960"
    height="540"
    loading="lazy"
    decoding="async" />
</picture>

검색 및 공유

이미지, 대체 텍스트, 메타데이터가 하나의 이야기를 전달하도록 하세요

이미지 SEO는 단순 키워드 추가가 아닙니다. 보이는 이미지, 인근 텍스트, 유용한 대체 텍스트, Open Graph 태그, JSON-LD 이미지 링크가 동일한 페이지를 명확히 설명해야 하며, 장식용 이미지는 장식용으로 유지하세요.

점검에서 소셜 미리보기가 약하면 오픈그래프 이미지 가이드을, 스키마와 메타 태그가 문제면 Blazor 메타데이터 가이드을 사용해 JSON-LD와 페이지 메타데이터를 일치시키세요.

단계

페이지별 간단한 이미지 점검

1. 1

   실제 페이지 열기

   자산 폴더가 아닌 현재 URL에서 시작해 실제 로드되는 이미지를 기록하세요.

2. 2

   이미지 계획 수립

   중요 이미지마다 목표 너비, 종횡비, 로딩 순서, 대체 이미지, 메타데이터 역할을 기록하세요.

3. 3

   변경된 파일만 변환

   전체 미디어 폴더를 다시 내보내지 말고, 점검에서 찾은 파일만 변환 도구로 처리하세요.

4. 4

   HTML과 메타데이터 업데이트

   srcset, sizes, 치수, Open Graph, JSON-LD 이미지 링크를 준비된 파일로 지정하세요.

5. 5

   브라우저 출력 확인

   페이지, 네트워크 요청, 소셜 메타데이터, 구조화 데이터, 모바일 레이아웃을 점검하세요.

6. 6

   다음을 위해 규칙을 유지

   이미지 결정 사항을 문서화해 추후 업데이트 시 추측을 줄이세요.

체크리스트

게시 전 이미지 점검 목록

기사, 랜딩 페이지, 상품 페이지 공개 전에 이 목록을 사용하세요. 변환만으로는 놓칠 수 있는 문제를 잡아냅니다.