이미지 최적화를 위한 HTML코드

alt text (alt description) 추가

<!-- 보통 img 태그 -->
<img src="apple.png" />

<!-- alt를 사용한 img 태그 -->
<img src="apple.png" alt="apple image"/>

• 이부분은 성능이 아닌 accessibility 향상을 위함
• 그래픽의 기능과 모양에 대한 정확한 맥락정보를 제공하는 대체 텍스트
• 일반적인 사용자뿐만이 아니라 장애가 있는 사용자들도 콘텐츠에 접근하도록 도움으로 접근성 향샹을 도움.
• 이미지의 순위를 상승히키고 더 많은 사용자를 끌어들이는 요소.
• 이로 인해 이미지 로드가 지연될때 대체 텍스트를 통해 어떤 이미지인지 알 수 있게 된다.
• 콘텐츠의 일부가 아닌 페이지의 외관을 향상시키기 위해서만 존재하는 배경 이미지에는 role 속서응로 "presentation"값을 지정해야한다.

 

 

 

참고 블로그