웹페이지를 구성할 때 텍스트만으로는 전달하기 어려운 정보를 보완하기 위해 이미지를 많이 사용합니다.
HTML에서 이미지를 삽입할 때 사용하는 태그가 바로 img 태그입니다.
img 태그는 매우 간단해 보이지만, 실제로는 속성 설정 방법과 SEO 및 접근성과도 깊은 관련이 있습니다.
특히 alt 속성은 검색엔진과 사용자 경험 모두에 중요한 영향을 미칩니다.
이번 글에서는 HTML img 태그의 기본 사용법, 주요 속성, 그리고 실무에서의 활용 방법까지 자세히 정리해보겠습니다.
img 태그란 무엇인가?
img 태그는 HTML 문서에 이미지를 삽입할 때 사용하는 태그입니다.
다른 태그와 달리 닫는 태그가 없는 단일 태그입니다.
<img src="image.jpg" alt="이미지 설명">
이 코드만으로도 웹페이지에 이미지를 표시할 수 있습니다.
img 태그의 기본 속성
src 속성
src는 이미지의 경로를 지정하는 속성입니다.
어떤 이미지를 불러올지 결정하는 가장 중요한 요소입니다.
<img src="image.jpg" alt="이미지">
src에는 다음과 같은 경로를 사용할 수 있습니다.
- 상대 경로 (./images/photo.jpg)
- 절대 경로 (/images/photo.jpg)
- 외부 URL (https://example.com/image.jpg)
alt 속성
alt는 이미지가 표시되지 않을 때 대신 보여주는 텍스트입니다.
또한 스크린리더가 이미지를 설명할 때 사용됩니다.
<img src="dog.jpg" alt="강아지 사진">
alt 속성은 SEO와 접근성 측면에서 매우 중요하기 때문에 반드시 작성하는 것이 좋습니다.
이미지 크기 조절 방법
width, height 속성 사용
img 태그에서 width와 height 속성을 사용하면 이미지 크기를 조절할 수 있습니다.
<img src="image.jpg" alt="이미지" width="300" height="200">
CSS로 조절하기
실무에서는 CSS를 사용하여 이미지 크기를 조절하는 경우가 많습니다.
img {
width: 100%;
height: auto;
}
이 방법은 반응형 웹사이트에서 특히 유용합니다.
이미지 경로 설정 방법
이미지 경로 설정은 img 태그에서 매우 중요한 부분입니다.
상대 경로
<img src="./images/photo.jpg" alt="이미지">
현재 파일 기준으로 경로를 설정합니다.
절대 경로
<img src="/images/photo.jpg" alt="이미지">
루트 기준으로 경로를 설정합니다.
외부 이미지
<img src="https://example.com/photo.jpg" alt="이미지">
외부 서버의 이미지를 불러올 수 있습니다.
img 태그 사용 시 주의할 점
alt 속성 반드시 작성하기
alt 속성이 없으면 검색엔진이 이미지를 이해하기 어렵고, 접근성에도 문제가 발생합니다.
이미지 용량 최적화
이미지 용량이 크면 페이지 로딩 속도가 느려질 수 있습니다. 웹용으로 최적화된 이미지를 사용하는 것이 중요합니다.
의미 있는 파일명 사용
image1.jpg보다 dog-running.jpg처럼 의미 있는 파일명을 사용하는 것이 SEO에 유리합니다.
img 태그 활용 예시
<img src="profile.jpg" alt="프로필 사진" width="150">
<img src="banner.jpg" alt="이벤트 배너">
이처럼 다양한 상황에서 img 태그를 활용할 수 있습니다.
img 태그와 SEO의 관계
이미지는 검색엔진이 직접 내용을 이해하기 어렵기 때문에 alt 속성이 중요합니다.
또한 다음 요소들도 SEO에 영향을 줍니다.
- alt 텍스트
- 파일명
- 이미지 크기
- 로딩 속도
이미지를 잘 활용하면 검색 결과에서도 더 좋은 성과를 얻을 수 있습니다.
마무리
HTML img 태그는 웹페이지에서 이미지를 표시하는 가장 기본적인 요소입니다.
단순한 태그처럼 보이지만 SEO와 접근성까지 고려해야 하는 중요한 요소입니다.
정리하면 다음과 같습니다.
- img 태그는 이미지를 표시하는 태그이다
- src로 경로를 지정하고 alt로 설명을 제공한다
- 크기 조절은 CSS로 하는 것이 좋다
웹페이지를 제작할 때 img 태그를 올바르게 활용하면 더 완성도 높은 사이트를 만들 수 있습니다.