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

웹 사이트를위한 자동 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의 포스트

---

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

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

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

• CSS 기술 (그라데이션, 둥근 모서리 등), SVG 및 아이콘 글꼴을 포함한 가능한 모든 벡터.
• 고해상도 ( '레티 나') 이미지를 제공하지만 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;
         }
}

Usage sample:

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

Ths requires you to have two files:

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

Where the 2x file is double resolution for retina.

---

Just provide retina images to everyone, and squeeze the image to half its native size inside the image element. Like let's say your image is 400px wide and tall - just specify the image width as 200px to make it look sharp like this:

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

If your image is photographic, you can probably increase the JPG compression on it without making it look worse, because the JPG compression artifacts probably won't be visible when the image is displayed at 2x: see http://blog.netvlies.nl/design-interactie/retina-revolution/

---

if its background images a simple way to do this is:

    #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%; }
}

another simple way is to use this method:

Just replace:

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

with

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

---

I've found this interesting way for providing multiple resolution images.
It actually uses CSS, something I wanted to avoid, and works in Safari and Chrome only.
I'm talking about image-set.

Here's an example, provided by Apple (here):

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 */
}

I wanna share also these two links:

• Safari 6 and Chrome 21 add image-set to support retina images
• The image-set() notation @W3C

---

This problem is especially tricky with responsive sites where and image can be of varying width dependant on browser size. Also when dealing with a CMS where multiple editors are potentially uploading 1000s of images it to me seemed unrealistic for me to ask people to upload specially compressed images.

So I wrote a script that takes this into account, it fires at the bottom of the page and on resize finish. Each time taking into account pixel density and the size the image is occupying.

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

---

If you are not frustrated by fear of using java-script then here is a good article http://www.highrobotics.com/articles/web/ready-for-retina.aspx. It has very simple solution.

And the example in JSFiddle is worth a thousand words.

Using:

<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');            
    });
});

참고URL : https://stackoverflow.com/questions/13744542/automatic-retina-images-for-web-sites