빠른로드를위한 가장 작은 크기의 이미지 선택과 망막 디스플레이의 높은 데프 이미지 선택

Question

이미지를 필요한 너비 (srcset 사용)로만 제공하거나 이미지를 두 배로 크게 게재하기로 결정할 때 약간의 수수께끼가 있습니다. 그것은 망막 디스플레이에서 잘 보일 것입니다.

우리 모두는 우리 웹 페이지가 최고로 보이기를 바랍니다. 특히 그래픽이나 사진을 다루는 사람들을 위해. 그럼에도 불구하고 우리는 트래픽 대역폭에 대해 현명해야합니다. 우리는 WiFi 만 사용하는 사람들에 대해 배려하고 싶습니다. 그들이 더 오랫동안 그것을 기다려야한다면, 그들은 떠날 것입니다. 또한 순위가 가벼운 Google 선호 웹 페이지를 읽었습니다.

그러나 Retina 또는 HD 기기에서 웹 페이지가 흐리게 보이는 것을 보는 것보다 더 나쁜 것은 없습니다. 최근에는 점점 더 많은 사람들이 휴대 전화와 업계에서 정보에 액세스하는 요즘 대부분이 Macbook 사용자입니다. 는 지금 내 srcset은 다음과 같습니다

내 축소판

<img 
    srcset="img/large-image-1920w.jpg 1920w, 
      img/medium-image-1600w.jpg 1600w, 
      img/small-image-1024w.jpg 1024w" 
    sizes="100vw" 
    src="img/small-image-1024w.jpg" /> 

그리고 코드 (나는 768w에서, 나는 그것이 휴대폰에 더 잘 볼 것이라고 생각하고 960w 이미지 선택 이유 부트 스트랩 사용하고 있습니다) :

을

<div class="col-xs-12 col-sm-4">  
<img 
    srcset="img/thumbnail-960w.jpg 1920w, 
      img/thumbnail-640w.jpg 1200w, 
      img/thumbnail-960w.jpg 768w" 
    sizes="100vw" 
    src="img/thumbnail-328w.jpg" /> 
</div> 

이미지는 브라우저의 전체 너비를 100 % 채우도록 설정됩니다. 각 행에 세 개의 미리보기 이미지가 나타납니다.

Retina 디스플레이에서 적절한 크기로 표시하려면 2 배 픽셀 밀도가 필요합니다 (예 : 400x400 픽셀 이미지는 200x200 픽셀로 표시됨). 내 웹 페이지는 960w 브라우저에서만 잘 보이게됩니까? 그것은 엄청나게 작습니다.

iPhone의 경우 실제 크기가 작기 때문에 필요할 경우 중간 이미지 -1600w에 액세스 할 수 있습니다.

제안 사항?

Answer 1

위의 코드는 여러 화면에서 잘 보입니다.

태그로 시도해 볼 수있는 것과 마찬가지로 해상도 확인을위한 미디어 속성이 있습니다.

<picture> 
    <source media="(min-width: 650px)" srcset="img_650.jpg"> 
    <source media="(min-width: 465px)" srcset="img_465.jpg"> 
    <img src="img_default.jpg" alt="something" style="max-width:auto; width: auto"> 
</picture> 

희망이 도움이 될 것입니다.