배너 이미지는 단순히 <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>
광고임을 독자가 알아볼 수 있도록 명확하게 표시하고, 본문 메뉴나 다운로드 버튼처럼 오해하게 배치하지 않습니다. 새 창을 열면 사용자에게 그 사실을 알리는 접근성도 고려하세요.
공식 참고자료
관련 글
내용 검토 및 업데이트: 2026년 8월 27일
