[HTML/CSS] img 이미지 태그 - 이미지 삽입 방법

HTML 이미지 태그: 웹 페이지에서 이미지 표시하기

웹 페이지에서 이미지를 표시하기 위해 HTML에서는 <img> 태그를 사용합니다. 이 태그는 웹 페이지에 그래픽 콘텐츠를 삽입하고, 사용자에게 시각적인 정보를 전달하는 데 주로 활용됩니다. 또한, 검색 엔진 최적화(SEO) 측면에서도 중요한 역할을 합니다.

이미지 태그의 기본 구조와 속성

<img> 태그: 이미지 삽입

<img> 태그는 HTML 문서에 이미지를 삽입하는 데 사용됩니다. src 속성은 이미지 파일의 경로나 URL을 지정하고, alt 속성은 대체 텍스트로서 해당 이미지가 로드되지 못할 경우 대신 보여집니다.

<div class='image-container'> <img src="/path/to/image.jpg" alt="A description of the image"> </div>

width와 height 속성: 크기 조절

width와 height 속성을 사용하여 이미지의 가로 너비와 세로 높이를 지정할 수 있습니다.

<div class='image-container'> <img src="/path/to/image.jpg" alt="A description of the image" width='500' height='300'> </div>

title 속성: 추가 정보 제공

"title" 속성은 마우스 오버 시 나타나는 툴팁으로, 추가적인 정보나 설명을 제공할 수 있습니다.

<div class='image-container'> <img src="/path/to/image.jpg" alt="A description of the image" title= "Additional information about the image"> </div>

이미지 최적화 방법

대체 텍스트 (alt attribute)

"alt" 속성은 검색 엔진이 웹 페이지의 내용을 이해하는 데 도움을 주며, 시각 장애인과 같은 접근성 요구사항도 충족합니다. 올바른 대체 텍스트를 제공하여 해당 이미지에 대한 설명과 관련된 핵심 단어를 포함시키세요.

<div class='image-container'> <img src="/path/to/image.jpg" alt="A description of the image containing important keywords"> </div>

이미지 파일 이름 및 경로 최적화

검색 엔진은 파일 이름과 경로도 고려하여 웹 페이지 내용을 평가합니다. 의미 있는 이름으로 파일을 저장하고, 디렉터리 구조를 구분짓는 데 유용한 단어들을 활용하세요.

<div class='image-container'> <img src="/images/products/red-rose.jpg" alt="Red rose bouquet"> </div>

이미지 크기 최적화

이미지의 파일 크기를 최적화하여 웹 페이지의 로딩 속도를 향상시키세요. 이미지 편집 도구를 사용하여 필요 이상으로 큰 이미지를 조정하거나, 이미지 압축 도구를 사용하여 파일 크기를 줄일 수 있습니다.

<div class='image-container'> <img src="/optimized/path/to/image.jpg" alt="A description of the image" width='500' height='300'> </div>