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

HTML 강좌

작성일 2026-09-27 최근 수정일 2026-11-02

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

img로 이미지 넣기

img는 이미지를 삽입하는 요소이며 종료 태그가 없습니다. 호수와 나무 예제 이미지 파일을 사용해 다음 코드를 확인해 보세요. 파일의 위치를 기준으로 주소를 계산하는 방법은 링크(link)의 상대경로 예제와 같습니다.

<img src="html-image-sample-lake-tree-1600-v1.webp"

     alt="호수 가운데 작은 섬의 나무와 먼 산"

     width="1600" height="900">

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

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

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

alt에는 무엇을 써야 할까?

alt는 이미지의 대체 텍스트입니다. 이미지를 볼 수 없거나 불러오지 못한 독자에게, 그 이미지가 문맥에서 전달하는 정보를 알려 줍니다. ‘이미지’처럼 모호한 말이나 검색 키워드 목록보다 실제 내용과 역할을 짧게 적는 편이 좋습니다. 모든 독자에게 보이는 캡션이 필요하면 figure와 figcaption으로 그림과 설명 묶기의 설명과 비교하세요.

<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"은 브라우저가 가로세로 비율을 미리 계산하는 데 도움이 됩니다. 두 값만 적는다고 파일의 용량이나 픽셀 수가 줄어드는 것은 아닙니다. 크기별 파일 선택은 반응형 이미지: srcset, sizes, picture에서 구도 변경과 나누어 시험합니다.

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

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

독립 HTML 파일에서 이 CSS는 head 안의 style 요소에 넣거나 연결된 스타일시트에 저장합니다. img의 width·height는 파일의 비율을 알려 주고, CSS는 현재 화면에서 표시될 크기를 조절합니다.

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

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

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

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

HTML 강좌