Images 는 태그 이상의 의미

  • 많은 파일 타입 지원
    • JPEG, GIF, PNG
    • SVG 와 BMP 는 추가적인 옵션
    • 파일 확장명은 반드시 포함되어야 함
  • 모든 이미지는 다운로드 되어야 하고 사이즈 요인이 있을 수 있다.
  • 모든 이미지는 브라우저에 로드하기 위해 HTTP 요청을 요구한다.

Image Sizes

  • 이미지를 링크할 때 브라우저는 기본적으로 파일 만큼 디스플레이
    • 이 사이즈는 거의 최적이 아니다.
  • 빠른 해결책 – 파일을 바꾸거나 width, height attributes 사용

이미지 크기 변경

1. 에디터 사용

  • 에디터는 이미지의 크기를 영구적으로 바꾸는 데 사용된다.
    • local 파일에만 동작
  • 기본적으로 설치된 소프트웨어 – Preview(Mac), Paint(Windows)

2. Attributes 사용

  • 항상 스타일을 유지하려고 노력

Default Image Size

<figure>
  <img src = "imgs/Ashtabula.jpg"
       alt = "my house">
  <figcaption> Default image size </figcaption>
</figure>

Width in Pixels

attribute에 하드코딩으로 추가
브라우저가 자동으로 적당한 height 를 적용

<figure>
  <img src = "imgs/Ashtabula.jpg"
       width = "500px" alt = "my house">
  <figcaption> Set image size </figcaption>
</figure>

Percentages

<figure>
  <img src = "imgs/Ashtabula.jpg"
       width = "50%" alt = "my house">
  <figcaption> Relative image size </figcaption>
</figure>

Favicons

  • 브라우저 탭의 title 옆에 보여지는 icon
  • <head> section에 있음
  • icon image 또는 .png 사용 (JPEG 나 GIF는 사용 불가)
Favicon

Alternative Text Attribute

  • non-text content 제공
  • 스크린 리더에 의해 읽음
  • 이미지 위치에 디스플레이
  • 검색 엔진에게 semantic 의미 제공

좋은 alt text 제공

  • 정확
  • 간결
  • 중복하지 마라
  • “pictures of” 포함하지 마라 (당연한 말이라서, 간결하기 위해)

Empty alt text

  • null 값으로 남겨놔도 괜찮음
    • non-informative 목적
  • alt attribute 를 skip 하지 마라
    • 사용자는 잘 모르기 때문

Tips

좋은 alternative text는 예술이다.
많은 사람들이 생각하면서 팁이 있다.

  • 이미지가 전달하는 의미를 결정하라
  • 이미지 정보라면 완전하고 간결하게
  • 정보의 우선순위 지정 (어떤게 중요한 정보인지 도움을 준다)
  • 불필요한 정보는 피해라
  • 복잡한 이미지는 특별한 케이스로 다뤄라

더 알고 싶다면 the W3 alt decision tree site를 참고
https://www.w3.org/WAI/tutorials/images/decision-tree/

Review

  • 파일 확장명, 파일이름, 파일 경로의 잘못하는 것이 종종 문제이다.
  • html 에 width/height 를 스타일

공부 위치 – https://www.coursera.org/learn/html/lecture/NxaOr/02-05-images