웹사이트 최적화에 대한 이미지를 망막 표시

StackOverflow https://stackoverflow.com//questions/22008502

문제

내가 찾으려고 노력했습니다 좋은 해결 방식을 매우 commmon 문제가에서 망막 시대입니다.

고 말할 수 있습니다 다음은 주어진다:

  • 웹사이트를 만들과 함께 반응성 이미지
  • 아 CSS 배경 이미지
  • 웹사이트를 기본 기능을 작동해야 합니다없이 JS
  • 웹사이트 이해야 최적화된 망막이 표시됩니다.

하는 쉬운 방법이 될 수 있는 무언가 이것을 좋아한다:

<img src="img.jpg" data-highres="img@2x.jpg" />

고 쓰는 어떤 종류의 js 교체 img.jpg 가 img@2x.jpg 면 망막 장치가 탐지됩니다.이 작업,그러나 내가 입력하는 경우 웹사이트에 망막 두 장치 img.jpg 고 img@2x.jpg 로드 할 것이다.매우 친절한 대역폭:(

은 그것을 가능하게 차단하고 변경 src 의 이미지기 전에 원본 src 로드?

거나 당신은 또 다른 방식에서 문제를 해결?

도움이 되었습니까?

해결책

미래에,당신이 사용할 수 있습니다 사진 요소.그러는 동안에만 접근이 보았을 수 있는 일이다:

  1. 어 div 또는 시간은 당신이 원하는 이미지입니다.스타일 그것을 차원 및 레이아웃의 이미지입니다.추가 어떤 종류의 식별 표시하여 그것은 그래서 당신은 그것을 찾을 수 있습니다(예: class="retina-image")
  2. 저장에 대한 정보를 다른 크기의 이미지가 요소에(예를들면용 data-something 특성)
  3. 어 <noscript><img src="..." alt="..."></script> 내부 div
  4. 에 DOM 사용:
    1. 사용 JS 을 찾아 모든 요소를 식별자로서 1 단계
    2. 의 모형을 검출하는 원하는 이미지
    3. 찾 속성을 알려주는 어떤 URL 을 사용하는 것이 이미지
    4. 이미지 추가 DOM 컨테이너 내에서 1 단계

이 방법을 사용하여 이 picturefill 라이브러리.

다른 팁

이것은 아마 불꽃 미끼 일 것입니다. 그러나 여기에는 두 가지 센트가 있습니다 :

대역폭에 대한 우려는 대부분 모바일 플랫폼 문제입니다.가장 현대적인 모바일 플랫폼이 이제 높은 픽셀 밀도 디스플레이를 채택한다는 점을 고려하면 이러한 장치의 고해상도 이미지에 대한 수요가 꽤 높을 것입니다.시간의 해상도를 2 배로 서버로 2 배로 설정할 때 이미지 해상도 90 %의 이미지 해상도 90 %를 봉사하는 이유는 무엇입니까?

일부 시나리오에서는 더 높은 해상도 이미지 (너비 / 높이 스타일을 반으로 줄이기)를 쉽게 사용할 수 있으며 그로 인해 쉽게 그대로 둘 수 있습니다.다른 곳에서는 (비싼) 시간과 에너지를 절약합니다.모든 것이 타협적 인 것처럼 보이는 산업에서,이 가끔은 은 가장 의미가 가장 의미가 있습니다.

내 생각엔 본질적 질문에 답변합니다.

내가 무엇을 추가할 수 있는 하는 동안 데 img 요소 없이 src 그것은 기술적으로 불당 spec,생략하면 그것을 끊지 않을 것이 당신의 코드고 당신은 피 pre-니다.다음을 할 수 있습니다 <img data-src="" data-src2=""> 와 스왑 이미지를 사용하여 자바 스크립트.이 <noscript> 요소입니다 아마 올바른 방법으로 이 일을 하지만 그것은 코드는 정말 자세한 정보고 들었어요 일부 브라우저 pre-드 <noscript> 이미지뿐만 아니라.

하나의 서비스가 어떤 이미지를 만드 반응(망막을 포함한 표시)은 Pixtulate.그들은 또한 제공을 자바스크립트가 제대로의 크기와 대체 img.src url 을하기 전에 이 페이지 로딩이 완료.는 것은 매우 간단하여 드롭습니다.

window.devicePixelRatio로 뭔가를 수행하고 data-highres 속성이있는 이미지를 통해 루프를 수행하면

이것은 아주 거칠 것이지만, 당신은 내 드리프트를 얻습니다. 

 $(document).ready(function() {
     if (window.devicePixelRatio > 1) {
         // retina
     } else {
         // default
     }
 });
.

빈 / 지우기 1px GIF 사용 

<img src="clear.gif" data-basesrc="img1" />
. 그런 다음

은 basesrc attrabute를 사용하고 JS에 적절한 파일 이름을 추가합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top