HTML 강좌 / 이미지 넣기: img, alt, 크기

HTML 문서에 이미지를 넣을 때는 img 요소의 src에 이미지 파일 주소를, alt에 이미지가 전달하는 내용을 적습니다. 실제 이미지 크기에 맞는 width와 height도 지정하면 파일을 불러오기 전 브라우저가 필요한 공간을 확보할 수 있습니다.

img로 이미지 넣기

img는 이미지를 삽입하는 요소이며 종료 태그가 없습니다. 호수와 나무 예제 이미지 파일을 사용해 다음 코드를 확인해 보세요.

<img src="html-image-sample-lake-tree-1600-v1.webp"
     alt="호수 가운데 작은 섬의 나무와 먼 산"
     width="1600" height="900">

1. 예제 이미지를 내려받아 작업 중인 HTML 파일(예: index.html)과 같은 폴더에 저장합니다.
2. HTML 파일의 body 안에 위 코드를 넣고 저장합니다.
3. HTML 파일을 브라우저에서 열거나 새로고침해 아래와 같은 호수 사진이 나타나는지 확인합니다.

src는 HTML 파일의 위치를 기준으로 브라우저가 불러올 파일을 가리킵니다. 위 코드는 같은 폴더에서 이미지를 찾습니다. 이미지를 images라는 하위 폴더에 저장했다면 src="images/html-image-sample-lake-tree-1600-v1.webp"로 바꾸세요. 파일명과 확장자도 실제 파일과 일치해야 합니다.

이미지를 클릭하면 이 예제에 사용한 원본 파일이 열립니다. 문서에 이미지를 삽입하는 것과 이미지를 링크로 감싸 클릭할 수 있게 만드는 것은 별개의 기능입니다.

alt에는 무엇을 써야 할까?

alt는 이미지의 대체 텍스트입니다. 이미지를 볼 수 없거나 불러오지 못한 독자에게, 그 이미지가 문맥에서 전달하는 정보를 알려 줍니다. ‘이미지’처럼 모호한 말이나 검색 키워드 목록보다 실제 내용과 역할을 짧게 적는 편이 좋습니다.

<img src="html-image-sample-lake-tree-1600-v1.webp"
     alt="호수 가운데 작은 섬의 나무와 먼 산"
     width="1600" height="900">

이미지가 주변 글의 내용을 반복할 뿐인 장식이라면 alt=""로 비워 두는 것이 적절할 수 있습니다. 빈 값은 장식 이미지라는 뜻을 전달하지만, alt 속성을 아예 생략하면 그 뜻을 전달하지 못합니다. 반대로 이미지 안의 정보가 글에 꼭 필요하다면 그 핵심을 대체 텍스트나 가까운 본문에서 설명해야 합니다. 판단이 어려울 때는 W3C WAI의 대체 텍스트 결정표를 참고하세요.

width와 height의 역할

예제 파일의 실제 크기는 1600×900픽셀입니다. width="1600"과 height="900"은 브라우저가 가로세로 비율을 미리 계산하는 데 도움이 됩니다. 두 값만 적는다고 파일의 용량이나 픽셀 수가 줄어드는 것은 아닙니다.

본문 너비보다 이미지가 크다면 다음처럼 CSS로 표시 너비를 제한할 수 있습니다. height: auto는 표시 크기가 바뀔 때 비율을 유지합니다.

img {
  max-width: 100%;
  height: auto;
}

실제로 더 작은 이미지 파일을 전달하려면 크기가 다른 파일을 준비해야 합니다. 브라우저가 화면 조건에 따라 파일을 고르게 하는 srcset과 sizes는 반응형 이미지 강좌에서 다룹니다.

이미지가 보이지 않을 때 확인하기

• src에 적은 파일명과 확장자가 실제 파일과 일치하는지 확인합니다.
• HTML 파일을 기준으로 이미지가 같은 폴더에 있는지, 아니면 경로에 폴더 이름이 필요한지 확인합니다.
• 이미지 파일 주소를 브라우저에서 직접 열어 파일을 받을 수 있는지 확인합니다.
• 화면 크기만 조절하려고 실제 픽셀보다 작은 width와 height를 적었다면 파일 용량은 그대로인지 확인합니다.

이미지 요소의 속성과 동작은 MDN의 img 요소 문서에서 자세히 확인할 수 있습니다.