이미지 data uri 만들기

 

 

Data-URI란?

RFC 2397에 정의

이미지 등의 외부 바이너리 파일을 웹페이지에 인라인으로 넣기 위해 사용.

 

바이너리 파일?

=> 컴퓨터 파일로 컴퓨터 저장과 처리 목적을 위해 이진 형식으로 인코딩된 데이터파일 ( 이미지를 메모장으로 열었을때)

 

 

형식은 data:[<MIME-type>][;charset=<encoding>][;base64],<data>

<img src=”data:image/png:base64,iBief02@fs….” />

 

 

이미지 URI

외부 데이터를 별도의 파일로 두지 않고 하나의 HTML파일로 관리할수 있음

리퀘스트 수를 줄여 빠른 전송효과 볼 수 있음

 

[단점]

HTML파일에 포함이다 보니 캐시가 되지 않음.

데이터가 base-64로 인코딩 되면서 크기가 1/3정도 증가.

IE7이하버전은 지원하지 않음.

 

=> 사용할수 있는 환경이 아주 많지는 않지만 경우에 따라서 아주 유용할수 있음

   ( 작은 아이콘이 아주 많을 경우)

 

 

font파일을 Data-URI로 생성하기

Font Squirrel에서 제공하는 Webfont Generator를 사용하면 쉽게 data-uri로 만들어 낼 수 있다.

@font-face {
  font-family: 'action_manregular';
  src: url('fonts/Action_Man-webfont.eot?#iefix') format('embedded-opentype'),
      url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAA...중략...7vRb/kAAAABVSpW6QAA) format('woff');
      url('fonts/Action_Man-webfont.ttf') format('truetype'),
      url('fonts/Action_Man-webfont.svg#action_manregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

 

Data-URI를 사용했을 때의 특징

• css를 받은 다음 font를 가져오는 요청 대신 css를 받을때 한꺼번에 받도록 한 것

• FOUC(웹폰트 다운전 기본폰트 보여지는것)현상 해결?

• => Data-URI는 css다운시 한꺼번에 해석이 되므로 이러한 현상 줄일수 있음(대신 로딩속도 느릴수도 있을것 같음..)

• font파일은 브라우저가 캐싱하지만 data-uri는 별도 캐싱하지 않음. 

• data-uri를 사용한 파일(css)에 캐싱 정책을 주어야 함.

• data-uri 처리시간이 느린데 현재 아직 줄이는 방법은 없음.

• HTTP요청을 줄이는게 좋을지, Data-uri를 처리시간을 없애는게 좋을지 판단해야함

• 모바일에서는 이 처리가 바이너리 파일보다 6배 느리다

 

 

크롬 개발자도구에서 이미지 url 추출하기

 

사용방법

<img src="data:image/png;base64, + data-uri " /> 

 

 

 

 

SCSS에서 사용하기

 

* gulp.js

const imageDataURI = require('gulp-image-data-uri');

const concat = require('gulp-concat');

function datauri(done) {

    gulp.src (paths.images.input+'dataURI/*')

    .pipe(imageDataURI({

            template: {

                file:'./_datauri-tempate.css'

            }

        })

    )

    .pipe(concat('_dataURI.scss'))

    .pipe(gulp.dest(paths.styles.input+'vendor/'))

    .pipe(browserSync.stream({ match: "**/*.css" }))

    done();

}

 

* _datauri-tempate.css

@mixin {{className}}($width,$height) {

    width:$width + px;

    height:$height + px;

    background:url("{{dataURISchema}}") no-repeat 0 0;

    background-size: contain;  

}

 

사용법

1. paths.images.input+'dataURI' 폴더에 uri만들 파일을 넣는다

2. sass에서

@include datauriFileName(width, height)

(1)번에 넣은 이미지 파일이름과 동일하기 @include 파일이름(파일width, 파일height) 

이렇게 사용하면 자동으로 datauri 형식으로 변경된다.

 

장점 : 이미지 원본 유지 가능, 간-편 :)