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는 사용 불가)

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
Leave A Comment