이미지와 대체 텍스트

img 요소가 제 구실을 하려면 속성 두 개가 필요합니다. 그림이 어디 있는지 알려 주는 src와, 그림을 볼 수 없을 때 무엇을 보여 주는지 알려 주는 alt입니다.

img 요소

그림은 HTML 파일 안에 들어 있지 않습니다. 페이지는 그림의 위치만 가리키고, 브라우저가 그림을 하나씩 따로 받아옵니다. 가리키는 일은 <img> 요소가 합니다. 빈 요소라서 닫는 태그가 없고, src 속성에 그림 주소를 씁니다. 링크의 href처럼 절대 주소도 상대 주소도 됩니다. 이미지는 대체 요소(replaced element)입니다. 브라우저가 요소 자리를 그림으로 바꿔 끼우고, 따로 정하지 않으면 그림의 크기가 그대로 요소의 크기가 됩니다.

<img src="images/sourdough.jpg"
     alt="A round sourdough loaf with a dark, cracked crust"
     width="400" height="300">

width와 height 속성은 그림 크기를 단위 없이 픽셀 수로 알려 줍니다. 파일의 실제 크기를 적으세요. HTML은 보통 그림보다 먼저 도착하므로, 이 숫자가 없으면 브라우저는 글부터 배치했다가 그림이 하나씩 도착할 때마다 글을 아래로 밀어냅니다. 읽기 시작한 사람에게는 꽤 성가신 일입니다. 숫자가 있으면 브라우저가 처음부터 알맞은 자리를 비워 둡니다. 화면에서 더 작게나 크게 보여 주고 싶다면 이 숫자가 아니라 CSS를 바꿉니다.

대체 텍스트 쓰기

alt 속성에는 대체 텍스트를 씁니다. 화면 낭독기는 이를 소리 내어 읽고, 파일을 불러오지 못하면 브라우저가 대신 보여 주며, 검색 엔진은 그림을 이해하는 데 씁니다. MDN은 간단한 기준을 권합니다. 그림이 안 보이면 무엇을 잃게 될까요? 그것을 짧게 쓰면 됩니다. 상품 사진이라면 고르는 데 필요한 정보를, 그래프라면 「막대그래프」가 아니라 「1월에서 3월 사이 매출이 세 배로 늘었습니다」처럼 그래프가 말하는 내용을 씁니다.

• 「~의 이미지」, 「~의 사진」으로 시작하지 마세요. 화면 낭독기가 이미 이미지라고 알려 줍니다.
• 물결 모양 구분선처럼 꾸밈용 그림에는 빈 alt=""을 줍니다. 그러면 화면 낭독기가 건너뜁니다. alt를 아예 빼면 사정이 다릅니다. 어떤 화면 낭독기는 대신 파일 이름을 읽습니다.
• 그림이 링크의 유일한 내용이라면 alt가 그대로 링크 글자가 됩니다. 그림(빵 로고)이 아니라 갈 곳(홈)을 씁니다.
• 같은 내용이 이미 그림 옆 글에 있다면 alt=""로 두 번 말하지 않게 합니다.

그림과 설명

그림에 설명이 붙는다면 둘을 <figure>로 감싸고 설명은 <figcaption>에 넣습니다. 그러면 보조 기술이 설명과 그림을 한 묶음으로 알아봅니다. 그림 아래에 평범한 문단을 두면 이렇게 되지 않습니다. 설명과 alt는 하는 일이 다릅니다. 설명은 모두가 읽고, alt는 그림이 없을 때 그림을 대신합니다. 그러니 같은 말을 반복하지 않는 것이 좋습니다. figure에 꼭 그림만 들어가는 것은 아닙니다. 코드 예시, 표, 시도 figure가 될 수 있습니다.

파일 형식, 데이터 URL, 인라인 SVG

사진은 보통 JPEG나 WebP, 경계가 또렷한 단색 그래픽은 PNG, 도형으로 그린 그림은 SVG를 많이 씁니다. SVG는 텍스트 형식이라 아무리 키워도 또렷합니다. 작은 그림은 data:image/svg+xml,로 시작하는 데이터 URL로 src에 바로 적을 수도 있습니다. 아래 실습은 다른 사이트에서 아무것도 불러오지 않도록 이 방법을 씁니다. SVG는 <svg> 요소로 HTML 안에 직접 쓸 수도 있습니다. 이때 role="img"와 자식 요소 <title>을 넣어 화면 낭독기가 부를 이름을 줍니다. 끝으로 긴 페이지 아래쪽 그림에 loading="lazy"를 붙이면 독자가 근처까지 내려올 때까지 불러오기를 미룹니다.

MDN의 규칙 하나를 더 적습니다. 쓸 권리가 있는 그림만 씁니다. 인터넷에서 찾은 그림은 라이선스에 따로 적혀 있지 않는 한 저작권의 보호를 받습니다. 허락 없이 남의 서버에 있는 그림을 src로 가리키는 것(핫링크)은 내 방문자가 쓰는 트래픽 비용까지 그쪽에 떠넘기는 일입니다.