data URL 사용하기

# 모던 브라우저들은 data 프로토콜(data: 로 시작하는 URL)을 사용해
# 이미지같은 데이터를 로링할 수 있다.
# URL 에 데이터가 명시되어 있어 네트워크 요청이 필요없지만
# 32kb 제한으로 이미지 썸네일등의 작은 데이터에 로딩에 사용한다.
# 참고 https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

# 형식은 다음과 같다.
# data: 데이터 프로토콜
# image/jpeg 미디어 타입으로 MIMETYPE 으로 명시한다.
# ;base64 인코딩 타입
# ,/aaaa 인코딩된 데이터값
data:image/jpeg;base64,/aaaaa

# 실제 이미지 데이터를 가진 data URL, chrome 으로 열 수 있다.
data:image/jpeg;base64,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

comments:

댓글 쓰기