img tag
장식 이미지(예 : 버튼의 배경 그라데이션 또는 콘텐츠 섹션 또는 전체 페이지의 배경 이미지) 프레젠테이션용이며 CSS를 사용하여 적용해야 한다. 이미지가 문서에 맥락을 더하는 것은 콘텐츠이며 삽입된다.
<img src="images/eve.png" alt="Eve">이미지를 포함하는 기본 메서드는 src가 포함된 <img> 태그다. 이미지 리소스를 참조하는 속성과 이미지를 설명하는 alt속성.
각 포그라운드 이미지에는 최소한 src 및 alt 속성이 포함되어야 한다.
src 파일은 삽입된 이미지의 경로와 파일 이름이다. src 속성은 이미지의 URL을 제공하는데 사용된다. 그런 후 브라우저가 애셋을 가져와서 페이지에 랜더링한다.
alt 속성은 이미지의 대체 텍스트를 제공하여 이미지를 볼 수 없는 사용자에게 이미지 설명을 제공한다.
alt , src는 포그라운드 이미지 반드시 있어야 하는 필수 속성이다.
상대경로 이미지 리소스 방식
<img src="./../assets/food/icecream.webp" alt="벤앤제리스 파인트 아이스크림 6종" />절대경로 이미지 리소스 방식
절대경로 방식으로 이미지 리로스를 지정하면 Github Pages 호스팅 같은 곳에서는 절대경로를 지원하지 않아 이미지 리소스를 불러올 수가 없다.
<img src="/src/assets/food/icecream.webp" alt="벤앤제리스 파인트 아이스크림 6종" />alt 속성 추가 예시
<img src="path/filename" alt="descriptive text" />이미지가 SVG 파일 형식인 경우 role="img"도 포함한다. VoiceOver 버그로 인해 필요하다.
<img src="switch.svg" alt="light switch" role="img" />✅ 참고사항
<figure>요소는 중첩된<figcaption>요소와 함께 사용하면 연력된 설명이 있는 이미지를 포함할 수 있다. 그림은 이미지만 포함하는 것이 아니다. 콘텐츠 캡션과 이미지, 코드 스티펫, 예시 텍스트 또는 기타 콘텐츠를 단일 단위로 참조하는 의미론적 방법이다.
<figcation>를 포함할 때<figure>내에 중첩된 첫 번째 또는 마지막 하위 요소인지 확인한다.
<!-- figure 요소를 사용하여 이미지 콘텐츠와 이미지 caption 마크업 -->
<figure>
<img src="../assets/drama/culinary-class-wars-narrow.jpg" alt="" />
<figcaption>흑백요리사</figcaption>
</figure>효과적인 alt 이미지 설명 작성하기
alt속성은 이미지를 생략하면서 이미지가 전달하는 모든 관련 정보를 제공하는 짧고 간결한 것을 목표로 한다. 문서의 다른 콘텐츠와 중복되거나 유용하지 않은 정보를 포함 할 수 있다. 텍스트를 작성할 때 어조는 사이트의 분위기를 반영한다.
추가 성능 기능
Lazy Loading (지연 로딩)
loading 속성은 JS 지원 브라우저에 이미지를 로드하는 방법을 알려준다. 기본값 eager은 이미지가 다음과 같음을 의미한다. 이미지가 표시되는 표시 영역 밖에 있더라도 HTML이 파싱될 때 즉시 로드 된다. loading="lazy" 설정 표시 영역에 들어올 가능성이 있을 때까지 이미지 로드가 된다. '높음' 브라우저에서 표시 영역을 난다. 사용자가 스크롤하면 업데이트 된다. 지연 로드를 사용하면 대역폭과 CPU를 절약하고 성능을 개선할 수 있다. 사용할 수 있다. JavaScript가 사용 중지되면 보안을 위해 모든 이미지의 기본값이 eager로 설정된다.
✅ img 태그에 width, height 속성을 지정하면 성능 관점에서 도움이 된다. 성능 관점에서 도움이 되는 이유는 레이아웃 안정성과 렌더링 최적화 때문이다.
width와 height를 지정해 두면, 브라우저는 초기 렌더링 단계에서 미리 크기를 알고 있어 불필요한 재계산을 방지하고, 렌더링 과정을 더 효율적으로 처리한다.
✅ 모든 이미지를 loading 속성을 주는 것은 효과적이지 않다. 예를 들어 가장 상단이미지는 사용자가 웹 사이트를 접속 했을 시 바로 노출이 되어야 한다. 이런 상황에서는 lodaing="lazy" 속성이 필요 없다.
메모 정리
📙 포그라운드 이미지 (Foreground image)
포그라운드 이미지는 시각적으로 화면의 앞부분에 있는 요소로, 중요한 대상이나 물체를 강조하는 데 사용된다. 배경과 대비되어 더 눈에 띄게 되는 부분.
📙 렌더링 (Rendering)
실시간으로 웹사이트가 그려지는 과정, 이 과정을 웹 브라우저의 렌더링 과정이라고 한다.
📙 파싱 (Parsing)
어떤 큰 자료에서 원하는 정보만 가공하고 뽑아서 원하는 때에 불러 올 수 있게 하는 것이라고 한다.
참조 : web.dev
