«   2019/02   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28    
Archives
Today
151
Total
1,199,054
안정적인 DNS서비스 DNSEver
관리 메뉴

Blue Breeze

이미지 최적화.... 뭐가 이래 복잡해.. 본문

FrontEnd

이미지 최적화.... 뭐가 이래 복잡해..

푸른바람 C/H 2018.08.16 08:30

이미지 최적화

이미지 제거 및 바꾸기

  • 불필요한 이미지 리소스 제거
  • 가능한 경우 CSS3 효과 활용
  • 이미지에서 인코딩 텍스트 대신 웹 글꼴 사용

고해상도 화면의 영향

벡터이미지를 추천.
래스터 이미지를 사용해야한다면 srcset 및 picture를 사용하여 각 이미지에 대한 여러 버전을 제공하고 최적화.

<img src="lighthouse-200.jpg" sizes="50vw"
    srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
            lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
            lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
            lighthouse-1800.jpg 1800w" alt="a lighthouse">
<!-- 브라우저 너비와 기기 픽셀 비율에 따라 뷰포트 너비의 절반(sizes="50vw")인 이미지를 렌더링-->
<!-- 브라우저 너비       기기 픽셀 비율      사용된 이미지       유효 해상도
        400px               1                   200.png             1x
        400px               2                   400.png             2x
        320px               2                   400.png             2.5x
        600px               2                   800.png             2.67x
        640px               3                   1000.png            3.125x
        1100px              1                   1400.png            1.27x
-->

<img src="400.png" 
    sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
    srcset="100.png 100w, 200.png 200w, 400.png 400w,
            800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">
<!-- 브라우저 너비가 600px 이상인 경우 이미지는 뷰포트 너비의 25%가 되고, 
        500px - 600px 사이인 경우 이미지는 뷰포트 너비의 50%가 되며, 
        500px 미만인 경우 이미지는 전체 너비가 된다. 
-->


<picture>
    <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
    <!--브라우저 너비가 최소 800px 이상, 기기 해상도에 따라 head.jpg 또는 head-2x.jpg가 사용-->
    <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
    <!--450px 및 800px 사이, 기기 해상도에 따라 head-small.jpg 또는 head-small-2x.jpg가 사용-->
    <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
    <!--450px 미만인 화면 너비는 picture 요소가 지원되지 않는 이전 버전과의 호환성을 위해, img 요소를 렌더링-->
</picture>

압축이미지

압축 이미지 기법은 기기의 실제 성능에 상관없이 높은 압축율의 2x 이미지를 모든 기기에 제공. 이미지 유형과 압축 수준에 따라 파일 크기가 상당히 줄어들지만 화질은 별차이가 없어 보일 수 있다.

Caution

압축 기법 사용 시 메모리가 늘어나고 디코딩 비용이 필요하므로 주의하세요. 작은 화면에 맞게 큰 이미지의 크기를 조정하는 것은 비용이 많이 들고, 메모리와 처리 성능이 모두 제한된 저사양 기기에서는 특히 손해가 클 수 있습니다.

자바스크립트 이미지 대체

자바스크립트 이미지 대체는 기기의 성능을 확인하고 '올바른 작업을 수행합니다'. window.devicePixelRatio를 통해 기기 픽셀 비율을 결정하고, 화면 너비와 높이를 구할 수 있으며, 심지어 navigator.connection을 통해 일부 네트워크 연결 스니핑을 수행하거나 가짜 요청을 발급할 수도 있습니다. 이 모든 정보를 수집한 경우 이제 로드할 이미지를 결정할 수 있습니다.

단점은 js가 payload 이벤트가 실행되지 전까지 이미지가 다운로드조차 되지 않는다.

데이터 URI

<img src="data:image/svg+xml;base64,[data]">

jpillora.com/base64-encoder와 같은 드래그 앤 드롭 도구를 사용하여, 이미지 등의 바이너리 파일을 데이터 URI로 변환할 수 있다.

CSS 이미지

  • 디스플레이 특성에 맞는 최적의 이미지를 사용하고 화면 크기, 기기 해상도 및 페이지 레이아웃을 고려.
  • 미디어 쿼리를 사용하는 높은 DPI 디스플레이의 경우 CSS에서 background-image 속성을 min-resolution 및 -webkit-min-device-pixel-ratio로 변경.
  • 마크업에서 1x 이미지와 함께 고해상도 이미지를 제공하려면 srcset를 사용.
  • 자바스크립트 이미지 대체 기법을 사용하거나 고압축 고해상도 이미지를 저해상도 기기에 제공할 경우에는 성능 비용을 고려.
.example {
    height: 400px;
    background-image: url(small.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
}

@media (min-width: 500px) {
    body {
        background-image: url(body.png);
    }
    .example {
        background-image: url(large.png);
    }
}

image-set을 사용하여 고해상도 이미지 제공

2x 디스플레이에서 2x 이미지를 사용하거나,
제한된 대역폭 네트워크의 경우 2x 기기에서 1x 이미지를 사용

background-image: image-set(
    url(icon1x.jpg) 1x,
    url(icon2x.jpg) 2x
);
/*
    브라우저는 정확한 이미지를 로드할 뿐만 아니라 그에 따라 배율도 조정.
즉, 브라우저는 2x 이미지가 1x 이미지보다 두 배 더 크다고 가정하고 2의 배수 단위로 배율을 조정하므로, 해당 이미지가 동일한 크기로 페이지에 나타나다. */

image-set() 지원은 아직 새로운 기능이며 -webkit 공급업체 접두사가 있는 Chrome 및 Safari에서만 지원.

.sample {
    width: 128px;
    height: 128px;
    background-image: url(icon1x.png);
    background-image: -webkit-image-set(  
        url(icon1x.png) 1x,  
        url(icon2x.png) 2x  
    );  
    background-image: image-set(  
        url(icon1x.png) 1x,  
        url(icon2x.png) 2x  
    );
}
/* 
    위에서는 image-set를 지원하는 브라우저에서 적절한 자산을 로드하며, 그렇지 않을 경우 1x 자산으로 폴백.
    주의할 점은 image-set() 브라우저 지원이 부족한 경우에는 대부분의 브라우저가 1x 자산을 취한다.
*/
.sample {
    width: 128px;
    height: 128px;
    background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */ 
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */ 
{
    .sample {
        background-size: contain;
        background-image: url(icon2x.png);
    }
}
/* 브라우저가 해상도별 미디어 쿼리를 지원하지 않더라도 렌더링이 보장된다 */


'FrontEnd' 카테고리의 다른 글

Vue.js Chrome Extension Example  (0) 2019.01.15
이미지 최적화.... 뭐가 이래 복잡해..  (0) 2018.08.16
Summernote WISWIG Editor  (0) 2018.07.12
Web application TEST  (0) 2012.01.17
IE7 파비콘 설정후 적용되지 않을 경우는?  (0) 2009.01.07
css, javascript 최적화 Tool  (0) 2008.09.11
0 Comments
댓글쓰기 폼