HTML 배너 이미지 삽입: 반응형·접근성·성능 최적화

배너 이미지는 단순히 <img>를 넣는 것보다 링크 목적, 화면 크기, 대체 텍스트와 로딩 시점을 함께 설계해야 합니다. 특히 모바일에서 고정 폭 이미지를 사용하면 가로 스크롤이나 큰 레이아웃 이동이 생길 수 있습니다.

가장 단순한 링크 배너

<a href="/event/" aria-label="여름 개발 강좌 자세히 보기">
  <img
    src="/images/course-banner-1200.webp"
    alt="여름 개발 강좌, 8월 31일까지 등록"
    width="1200"
    height="400">
</a>

width와 height는 원본 비율을 브라우저가 미리 계산하게 해 레이아웃 이동을 줄입니다. CSS에서는 최대 너비를 컨테이너에 맞춥니다.

.banner img {
  display: block;
  width: 100%;
  height: auto;
}

화면 크기에 따라 다른 이미지 제공

<picture>
  <source
    media="(max-width: 640px)"
    srcset="/images/banner-mobile.avif"
    type="image/avif">
  <source
    srcset="/images/banner-desktop.avif"
    type="image/avif">
  <img
    src="/images/banner-desktop.webp"
    alt="신규 강좌 일정 확인하기"
    width="1200"
    height="400">
</picture>

모바일과 데스크톱 이미지의 핵심 문구와 링크 목적이 달라지지 않도록 합니다. 단순히 같은 이미지의 해상도만 다르면 srcset과 sizes가 더 적합할 수 있습니다.

alt 텍스트 작성 기준

• 이미지가 링크의 유일한 내용이면 목적지를 이해할 수 있게 작성합니다.
• 이미지 안의 모든 장식 문구를 길게 옮기지 말고 핵심 정보와 행동을 설명합니다.
• 옆에 같은 링크 텍스트가 있고 이미지가 장식용이면 alt=""를 사용할 수 있습니다.
• 파일명이나 “배너 이미지”처럼 의미 없는 표현은 피합니다.

첫 화면 배너와 지연 로딩

첫 화면에서 바로 보이는 핵심 배너에 무조건 loading="lazy"를 넣으면 표시가 늦어질 수 있습니다. 화면 아래쪽 배너는 loading="lazy"와 decoding="async"를 검토할 수 있습니다. 실제 성능은 Lighthouse나 브라우저 개발자 도구로 측정하세요.

광고·제휴 배너라면

<a href="https://advertiser.example/"
   rel="sponsored noopener">
  <img src="/images/ad.webp" alt="광고주 서비스 자세히 보기"
       width="1200" height="400">
</a>

광고임을 독자가 알아볼 수 있도록 명확하게 표시하고, 본문 메뉴나 다운로드 버튼처럼 오해하게 배치하지 않습니다. 새 창을 열면 사용자에게 그 사실을 알리는 접근성도 고려하세요.

공식 참고자료

• MDN: img 요소
• MDN: picture 요소
• Google 이미지 SEO 권장사항

관련 글

• HTML 메타 태그 최적화: title·description·canonical
• 워드프레스 테마 선택 체크리스트: 성능·업데이트·호환성

내용 검토 및 업데이트: 2026년 8월 27일