웹 사이트를위한 자동 Retina 이미지

레티 나 디스플레이가 장착 된 새로운 Apple MacBook Pro에서 웹 사이트에 "표준"이미지를 제공하면 약간 흐릿해질 것입니다. 따라서 망막 이미지를 제공해야합니다.

@2xiOS (Objective-C 포함)처럼 자동으로 이미지로 전환하는 방법 이 있습니까? 내가 찾은 것은 모바일 및 레티 나 디스플레이의 고해상도 이미지 용 CSS 이지만 CSS 또는 JavaScript없이 모든 이미지에 대한 자동 프로세스를 찾을 수 있기를 바랍니다 .

가능할까요?

업데이트
나는 @Paul D. Waite가 제안한 이 흥미로운 기사 와 Sebastian 이 링크 한 흥미로운 토론을 강조 하고 싶습니다 .

retina src 속성, 즉 srcset을 추가 할 수있는 img 태그에 대한 새 속성이 있습니다. 자바 스크립트 나 CSS가 필요하지 않으며 이미지를 두 번로드하지 않아도됩니다.

<img src="low-res.jpg" srcset="high-res.jpg 2x">

브라우저 지원 : http://caniuse.com/#search=srcset

기타 리소스 :

• WebKit 릴리스 게시물
• srcset에 대한 W3C 문서
• srcset을 사용하는 이유와 방법에 대한 좋은 설명
• 더 많은 좋은 정보를위한 Chris Coyer의 포스트

각각 장단점이있는 다양한 솔루션이 있습니다. 어느 것이 가장 적합한지는 웹 사이트 디자인 방식, 일반적인 방문자가 사용하는 기술의 종류 등과 같은 다양한 요인에 따라 달라집니다. Retina 디스플레이는 Macbook Pro Retina 및 향후 iMac에만 국한되지 않고 다음도 포함됩니다. 자신의 필요가있을 수있는 모바일 장치.

문제는 일반적으로 반응 형 디자인의 이미지와도 밀접한 관련이 있습니다. 실제로 특정 장치 용으로 디자인하는 대신 일반적인 반응 형 디자인 기술을 활용하는 것이 가장 좋습니다. 결국 기술은 앞으로도 계속 변할 것입니다.

내가 언급 한 몇 가지 해결책 / 토론 :

• CSS 기술 (그라데이션, 둥근 모서리 등), SVG 및 아이콘 글꼴을 포함한 가능한 모든 벡터.
• 고해상도 ( 'retina') 이미지를 제공하지만 Yoav Weiss가 제안한대로 더 많이 압축 (JPEG 품질) 하거나 Paul Boag가 제안한대로 모바일 네트워크가 실제로 필요할 때 (예 : 모바일 일 때) 압축하도록합니다 .
• Adaptive Images , (대부분) 서버 측 솔루션입니다. 화면 해상도를 저장하는 쿠키, PHP 스크립트의 이미지를 제공하도록 구성된 웹 서버, 쿠키를 읽고 적절한 이미지를 제공하는 명명 된 스크립트를 기반으로합니다.
• Smashing Magazine 에서 잘 설명되고 논의 된 다양한 가능성 .
• Paul Boag 의 비디오에서 제안한대로 약간 더 높은 해상도를 제공하여 망막 묘사를 약간 부드럽게 합니다.
• 에서 @ 1.5 기술 에 대한 목록이 외에도 기본적으로 같은 생각이다.
• 가까운 장래에이 <picture>태그 는 W3C 워킹 그룹 과 심지어 Apple에서도 지원하는 솔루션이 될 수 있습니다 .
• 자바 스크립트 기술 에 의해 제안 된 제이크 Archebald .
• Smashing Magazine 의 다양한 기술 과 일반적인 문제에 대한 광범위한 토론 .

다른 답변에서 알 수 있듯이 더 많은 기술이 있지만 아직 모범 사례는 없습니다.

한 가지 궁금한 점은 각 장치를 사용하지 않고 이러한 기술 중 일부를 테스트하고 디버깅하는 방법입니다.

아직 아무도 명백한 것을 언급하지 않았기 때문에 나는 그것을 떠날 것입니다. 가능하면 SVG를 사용하십시오. 아무런 노력없이 아름다운 망막 해상도로 나타납니다.

IE8이 걱정해야 할 주요 공룡이므로 지원이 좋습니다. Gzip으로 압축 된 파일 크기는 종종 비트 맵 (png / jpg) 형식보다 좋고 이미지가 더 유연합니다. 다른 해상도에서 재사용하고 필요한 경우 스타일을 다시 지정할 수 있으므로 개발 시간과 다운로드 대역폭이 모두 절약됩니다.

다음은 배경 이미지를 위해 사용하는 믹스 인이 적습니다. retina.js는 dotLess를 사용하는 경우 배경 이미지에서 작동하지 않습니다. 자체적으로 dotLess에서 지원되지 않는 스크립트 평가를 사용하는 자체 믹스 인이 필요하기 때문입니다.

이 모든 것의 비결은 IE8 지원을받는 것입니다. 배경 크기를 쉽게 할 수 없으므로 기본 케이스 (모바일 미디어 쿼리가 아님)는 단순하고 크기가 조정되지 않은 아이콘이어야합니다. 그런 다음 미디어 쿼리는 retina의 경우를 처리하고 retina는 IE8에서 사용되지 않으므로 background-size 클래스를 자유롭게 사용할 수 있습니다.

.retina-background-image( @path, @filename,@extension, @size )
{
     .background-size( cover );
     background-image: url( "@{path}@{filename}@{extension}" );
         @media only screen and ( -webkit-min-device-pixel-ratio: 2 ),
                only screen and ( -moz-min-device-pixel-ratio: 2 ),
                only screen and ( -o-min-device-pixel-ratio: 2/1 ),
                only screen and ( min-device-pixel-ratio: 2 )
         {
             background-image:url( "@{path}@{filename}@x2@{extension}" );
             background-size:@size @size;
         }
}

사용 샘플 :

.retina-background-image( "../references/Images/", "start_grey-97_12", ".png", 12px );

Ths에는 두 개의 파일이 필요합니다.

• start_grey-97_12.png
• start_grey-97_12@2x.png

어디 2x파일은 망막 이중 해상도입니다.

모든 사람에게 레티 나 이미지를 제공하고 이미지 요소 내에서 이미지를 원래 크기의 절반으로 압축하면됩니다. 이미지가 400px넓고 길 다고 가정 200px해 보겠습니다. 다음과 같이 선명하게 보이도록 이미지 너비를 지정하면됩니다 .

<img src="img.jpg" width="200px" height="200px" />

이미지가 사진 인 경우 이미지가 표시 될 때 JPG 압축 아티팩트가 표시되지 않을 수 있으므로 더 나빠 보이게하지 않고 JPG 압축을 늘릴 수 있습니다 2x. http://blog.netvlies.nl/ 참조 디자인-인터랙 티 / 망막-혁명 /

배경 이미지의 경우이를 수행하는 간단한 방법은 다음과 같습니다.

    #image { background: url(image.png); }

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
           #image { background: url(image@2x.png); background-size: 50%; }
}

또 다른 간단한 방법은이 방법을 사용하는 것입니다.

다음을 교체하십시오.

<img src="image.jpg" alt="" width="200" height="100" />

와

<img src="image@2x.jpg" alt="" width="200" height="100" />

여러 해상도 이미지를 제공하는 흥미로운 방법을 발견했습니다.
실제로 피하고 싶었던 CSS를 사용하며 Safari와 Chrome에서만 작동합니다.
나는에 대해 이야기하고있다 image-set.

다음 은 Apple에서 제공 한 예입니다 ( 여기 ).

header {
    background: -webkit-image-set( url(images/header.jpg)    1x,
                                   url(images/header_2x.jpg) 2x);
    height: 150px; /* height in CSS pixels */
    width: 800px; /* width in CSS pixels */
}

이 두 링크도 공유하고 싶습니다.

• Safari 6 및 Chrome 21은 레티 나 이미지를 지원하기 위해 이미지 세트를 추가합니다.
• image-set()표기 @ W3C

JSF를 사용하면 각 이미지 에 추가해야하는 번거 로움을 줄이기 위해 사용자 지정 Facelets 태그 를 만들 수 있습니다 srcset.

당신에 taglib.xml당신이 뭔가를 같이 할 수 :

<tag>
  <tag-name>img</tag-name>
  <source>tags/img.xhtml</source>
  <attribute>
    <name>src2x</name>
    <required>true</required>
    <type>java.lang.String</type>
  </attribute>
</tag>

태그는 다음과 같이 보일 수 있습니다.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

  <img src="#{fn:replace(src2x, '@2x', '')}"
       srcset="#{src2x} 2x"/>

</ui:composition>

다음과 같이 사용할 수 있습니다.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:myTag="http://your.com/namespace-of-taglib">
  <myTag:src2x="image@2x.jpg"/>
</html>

그리고 다음을 렌더링합니다.

<img src="image.jpg"
     srcset="image@2x.jpg 2x"/>

이 문제는 브라우저 크기에 따라 이미지 너비가 다를 수있는 반응 형 사이트에서 특히 까다 롭습니다. 또한 여러 편집자가 잠재적으로 1000 개의 이미지를 업로드하는 CMS를 다룰 때 사람들에게 특별히 압축 된 이미지를 업로드하도록 요청하는 것은 비현실적으로 보였습니다.

그래서 이것을 고려하는 스크립트를 작성했습니다. 페이지 하단과 크기 조정 완료시 실행됩니다. 픽셀 밀도와 이미지가 차지하는 크기를 고려할 때마다.

http://caracaldigital.com/retina-handling-code/

자바 스크립트 사용에 대한 두려움에 실망하지 않는다면 여기에 좋은 기사가 있습니다. http://www.highrobotics.com/articles/web/ready-for-retina.aspx . 매우 간단한 해결책이 있습니다.

그리고 JSFiddle 의 예제 는 천 단어의 가치가 있습니다.

사용 :

<img onload="getImgSrc(this,'image_x1.png')" width="100" height="100" />

JS :

/* RETINA READY IMG SRC */
function getImgSrc(img, src) {
    var srcResult = src;
    // if high-res screen then change _x1 on _x2
    if (window.devicePixelRatio > 1 && 
        src.indexOf("_x1.")>=0) {
          srcResult = src.replace("_x1.", "_x2.");
    }
    img.onload = null; //protect from second rasing
    img.src = srcResult;    
}

$(document).ready(function(){
  // fire onload trigger on IMG tags that have empty SRC attribute
  var images = $('img:not([src=""])');
    images.each(function(i) {
        $(this).trigger('onload');            
    });
});