이미지

파일 확장자

https://velog.io/@gil0127/svg-vs-png-vs-jpg

svg
단순한 이미지라면 상관없지만 이미지가 복잡하면 용량도 커지고 속도 저하를 일으킴
단순하고 심플한 이미지에 주로 사용
구버전 IE가 지원을 안하기도 함

Data URIs

https://css-tricks.com/data-uris/

HTML에서 요소를 사용하거나 CSS에서 배경 이미지를 선언할 때 외부 이미지 파일에 링크할 필요가 없다는 것을 알고 있었나요? 데이터 URI를 사용하여 이미지 데이터를 문서에 직접 포함할 수 있습니다.
Data URLs를 왜 사용하는가?
HTTP 요청을 줄일 수 있다. 순수 document 사이즈를 제외하면 페이지가 얼마나 빨리 읽히는지에 관한 가장 중요한 요소이다.
인코딩 사이트
: https://yoksel.github.io/url-encoder/
: https://websemantics.uk/tools/image-to-data-uri-converter/
: https://jpillora.com/base64-encoder/
base64가 Data URLs의 유일한 형식은 아니며 때로는 좋은 생각도 아니다. ASCII가 또 다른 방법?

32kb보다 작아야 함

이메일에서 사용 가능 여부 (환경에 따라 다르기때문에 사용 x)

• Seems that some popular email clients such as Gmail etc do not display inline data (b64) URI images while others do such as Outlook.
• https://stackoverflow.com/questions/6070196/what-is-data-uri-support-like-in-major-email-client-software
• https://stackoverflow.com/questions/8580355/can-you-send-images-in-datauri-format-to-gmail
• https://www.campaignmonitor.com/css/