[CSS] data url scheme
어느 날 프로젝트를 하던 중
아이콘 이미지를 변경해야 되서
css파일을 열어보니
해당 아이콘 이미지 파일은
background: url(data:image/png;base64,<data>)이렇게 되어있었고
변경해달라고 받은 파일은 png파일이였다.
당황해서 다른 아이콘이미지를 찾아보니
background: url("@/assets/images/<file>.svg")
내가 알고 있는 방법인 파일경로를 작성해주는 방법이였다.
여기서 궁금증이 생겼다.
보기에 똑같이 이미지를 불러오는건데
위에랑 밑에랑 무슨 차이인지
상대경로
상대경로 : 현재 작성하는 문서를 기준으로 자원의 경로를 지정
background: url("@/assets/images/<file>.svg")파일 시스템에서 해당 경로에 있는 이미지를 참조함
- 이미지 파일 요청시 서버로 부터 따로 요청해야 됨.
데이터 URL 스킴 (Data URL Scheme)
background: url(data:image/png;base64,<data>)접두어가 data: 스키마로 추가된 URL을 통해 문서에 인라인 형태로 포함할 수 있도록 해줌
data:[<mediatype>][;base64],<data>mediatype : MIME type을 말하고(JPEG 이미지의 경우 'image/jpeg'). 만약 생략된다면, 기본 값으로 text/plain;charset=US-ASCII이 사용됨
base64 : 데이터가 텍스트가 아닌 경우 base64 인코딩된 데이터가 필요함
- 이미지 파일을 서버로 요청하지 않고 HTML 문서에 직접 포함시킴 (HTML에 포함됨으로 페이지 크기가 증가 할 수 있음)
- 캐쉬가 되지 않음 (동일한 이미지를 다른페이지에서 사용하더라도 매번 새로운 요청보내야함)
- BASE64로 인코딩하면 원본 데이터 보다 용량이 증가함
내가 프로젝트를 하면서 느꼈던 장단점(이미지 변경으로 코드상에 변경상황을 확인 할 때 - GIT 확인 시 )상대경로 - 데이터 URL 스킴에 비해 짧은 코드로 가독성이 좋아 코드상 변경을 한눈에 알아보기 쉬웠다 데이터 URL 스킴 - 코드가 너무 길어 가독성이 떨어져서 변경이 됬는지 코드만 보고는 한눈에 확인이 힘듬
결론은 이미지 불러올 때 성능 비교해서 큰 차이가 없다면 상대경로가 다 같이 프로젝트 할 때는 좋은 것 같다!