Day1_VSCODE_HTML 이미지 확장자 + 이미지 태그

✔비트맵 이미지

-픽셀이 모여서 만들어진 정보의 집합
-레스터 이미지라고도 불림
-픽셀 단위로 화면에 렌더링함
-그림판, 포토샵 등의 툴로 편집

✔백터 이미지
-수학적 정보의 형태들이 만들어내는 결과물
-이미지가 가지고 있는 점,선,면의 위치 색상정보를 가지고 있음
-확대 및 축소를 해도 이미지가 깨지지 않음
-일러스트 같은 툴로 편집

 

이미지 확장자별 특징

1) JPG(JPEG)

- 압축률이 훌륭하여 사진이나 예술분야에 많이 사용
- 가장 널리 쓰이는 이미지 포맷
- 손실 압축
- 표현할수 있는 색상 (24bit 약 1600만 색상표현 가능)
- 고해상도 표시장치의 적합

2) GIF

- 이미지 파일내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
- 여러장의 이미지를 한 개의 파일에 저장할 수 있음(애니메이션,움짤)
- 8bit 256개 컬러만 지원
- 비손실 압축

3) PNG

- gif 대체 포맷으로 개발
- 8bit,24bit 컬러 이미지 처리
- 알파 채널 지원(도트안에 3가지 색상 정보 + 투명도 정보 가지고 있음)
- W3C 권장 포맷

 

4) WEBP

- jpg,png,gif를 모두 대체 할 수 있는 구글이 개발한 이미지 포맷
- gif 같은 애니메이션 지원 - 알파채널 지원 (손실,비손실)
- 가장 완벽한 포맷
- 잘 사용하지 않는 이유 ? 지원화는 브라우저가 상대적으로 적음 (호환성 문제)

 

 

---

이미지 태그

 

이미지를 브라우저에 출력
인라인 태그 (가로 출력)

 

    <img src = '이미지가 위치하는 주소 또는 파일경로' alt = '이미지를 대신할 문장'>