는

Question

이이 설명 그래서 많은 단어가 다른에 다른 의미하기 때문에이

Preparing the images for retina-ready (web)

아래 링크 후속이다 사람들. 망막과 비 망막 모두에서 좋은 이미지를 보이는 이미지가 하나있는 것 같습니다 :

화면상의 이미지의 최대 너비는 400이고 최대 높이는 300이어야하며 이미지 자체는 800이어야합니다. x 600, ppi는 144입니다. 그런 다음 파일을 압축하여 다운로드 시간을 최소화해야합니다. 이미지를 표시 할 때

,이 같은 CSS/HTML 코드를 사용하여 최대 폭 및 최대 높이로 강제 :

<img src:"imagethatis800x600.jpg" style="width:400px; height:300px;" width="400" height="300" /> 

이 맞습니까? (나는 이미 우리 회사가 responsive.js 또는 cdn을 사용하지 않을 것이라고 결정했습니다.)

Answer 1

더 쉬운 접근 방법은 img이라는 srcset 속성을 사용하는 것입니다. 그런 다음 CSS 픽셀 당 여러 장치 픽셀의 이미지를 가질 수 있습니다. 지원은 여전히 ​​제한된다 http://www.webkit.org/demos/srcset/

을하지만, 아마도 더 나은 곧 지원 될 것입니다 :

봅니다 지원되는 브라우저와 데스크톱 브라우저와 전화 모두에서이 페이지를 엽니 다 http://caniuse.com/srcset

Answer 2

가있다 새로운 반응 형 이미지 HTML5 standard. 2014 년 7 월 현재 beta builds of browsers에만 있습니다. 그러나 Picturefill polyfill은 이미 사용 가능합니다.

This article은 다른 유스 케이스를 아주 잘 설명합니다. 당신은 또한 컨테이너 요소에 CSS 배경 - 이미지를 사용하고 배경을 제어 할 수있는 폭 넓은 브라우저 호환성을 위해

<img srcset="small.jpg 1x, large.jpg 2x" 
    src="small.jpg" 
    alt="A rad wolf" /> 

Answer 3

:하지만 당신이 여기에 원하는 것은 (예를 들어 '망막) 디스플레이 단순히 고해상도의 대체 이미지를 제공하는 것입니다 (특히 IE에서) srcset에 대한 지원이 많이 없기 때문에 media queries/dpi queries

체크 아웃이 fiddle

#container { 
    background-image: url(http://placehold.it/200x200); 
    width: 200px; 
    height: 200px; 

    @media 
     only screen and (-webkit-min-device-pixel-ratio: 2), 
     only screen and (min-resolution: 192dpi) { 
      background-image: url(http://placehold.it/400x400); 
    } 
}