img

img

<img 
	src="nature.jpg" 
	alt="A beautiful nature scene" // 대체 텍스트(로드 실패시, 스크린리더, SEO)
	width="800" height="600"
>

요약

• <img> 태그는 웹 페이지에서 이미지를 표시하기 위해 사용됩니다.

• src는 필수, alt는 필수로 권장되는 속성입니다.

• width, height까지 layout shift 현상 방지를 위해 권장됨.

• srcset, sizes 는 반응형 이미지를 지원하여 다양한 화면 크기에서 적절한 이미지를 로드하게 해줍니다.

주요 속성

1. src (필수)
• 이미지의 경로를 지정합니다. 경로는 로컬 경로 또는 URL일 수 있습니다.
• 예: <img src="image.jpg" alt="A beautiful sunset">

2. alt (필수로 권장됨)
• alt 속성은 이미지의 내용을 설명하는 중요한 역할을 하며, 접근성 측면에서 매우 중요합니다.
• 이미지가 로드되지 않거나 사용자가 이미지를 볼 수 없을 때 alt 텍스트가 대신 사용됩니다.
• 이는 스크린 리더 사용자에게 유용하고, 검색 엔진 최적화(SEO)에도 도움이 됩니다.

3. width와 height (layout shift 방지 위해 권장됨)
• 이미지의 고정 크기를 지정할 수 있습니다.
• 페이지 로딩 중 레이아웃 변화를 방지하려면 이 두 속성을 사용하는 것이 좋습니다.
• 예: <img src="image.jpg" alt="A beautiful landscape" width="600" height="400">
 

4. srcset (반응형 이미지)
• 서로 다른 화면 해상도에 맞게 여러 이미지를 제공할 수 있도록 도와주는 속성입니다.
• 예: <img src="image.jpg" alt="A beautiful landscape" srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 2000w">
• 이 속성은 화면의 크기나 해상도에 맞는 이미지를 자동으로 선택합니다.

5. sizes
• srcset 속성과 함께 사용되어 이미지를 표시할 크기를 지정할 수 있습니다.
• 예: <img src="image.jpg" alt="A beautiful landscape" srcset="image-small.jpg 500w, image-medium.jpg 1000w" sizes="(max-width: 600px) 500px, 1000px">
• 이 속성은 이미지가 표시될 크기를 설정하여 최적화된 이미지를 선택합니다.

6. crossorigin
• 이미지가 다른 출처에서 로드될 때의 CORS(Cross-Origin Resource Sharing) 정책을 설정합니다.
• 예: <img src="image.jpg" alt="A beautiful sunset" crossorigin="anonymous">

7. referrerpolicy
• 이미지가 로드될 때 리퍼러(Referer) 헤더를 제어하는 속성입니다.
• 예: <img src="image.jpg" alt="A beautiful sunset" referrerpolicy="no-referrer">

반응형을 위한 추가 정리

<img 
  src="image.jpg" 
  alt="A beautiful landscape" 
  srcset="image-small.jpg 500w, image-medium.jpg 1000w" 
  sizes="(max-width: 600px) 500px, 1000px"
  >

• (max-width: 600px) 500px:
화면 너비가 600px 이하일 때는 500px 크기의 이미지를 로드 즉, 작은 화면에서 로드할 이미지는 500w인 image-small.jpg

• 1000px:
화면 너비가 600px을 초과하면 1000px 너비의 이미지를 로드 이 경우, image-medium.jpg가 선택됨.

요약:

• srcset은 다양한 이미지 크기를 제공하고,

• sizes는 어떤 크기의 이미지가 필요한지 브라우저에 알려줍니다.