세상에.'그림에 어떻게 응답하는가'라는 문장이 또 있습니까?응, 아니야, 난 원해.

배경 이야기: 모든 것은 하나의 라벨에서 시작된다

그래서 제 동료예요.

WTF Dude, Firefox is loading some bunch of huge images even though I provided a proper srcset and sizes attribute.

20년 동안의 프로그래밍 경험에서도 현대에 나와 팀은 이곳과 그곳에서 이상한 브라우저 오류를 보았기 때문에 나는 즉시 문제가 컴퓨터 앞의 문제라고 가정하지 않을 것이다.
그러나 이런 상황에서 이렇게 중요하고 상당히 간단한 일에 대해 나는 이것이 브라우저 문제라는 것을 정말 믿을 수 없다.특히 사파리도 그랬을 때
다음과 같습니다.

<img src="raw.jpg"  
srcset="360w.jpg 360w, 800w.jpg 800w, 1080w.jpg 1080w" 
sizes="
  (max-width: 360px) 360px,
  (max-width: 800px) 800px,
  (max-width: 1080px) 1080px
">

360x740가 있는 삼성 갤럭시 S9의 경우 1080px 하나를 로드합니다.우리는 모두 약간 곤혹스럽다.
나는 절벽을 만들고 싶지 않기 때문에 즉시 문제로 넘어갈 것이다. S9은 4x 밀도가 하나 있는데, 왜냐하면 실제 해상도가 상술한 것보다 훨씬 높기 때문이다.그것은 1440x2960 (h x w)이다.네, 그것을 4로 나누어 얻습니다360x740.
현재 브라우저는 매우 똑똑하게 행동하고 있다.

Yo Dog, I know you wanted 360w image on 360px screen but this equals 100% width on this mobile phone which is actually 1440px to have a sharp view so I will choose the closest that fits that image size which is 1080px

이것은 직접적인'직관'은 아니지만, 일리가 있다

네가 그것을 생각할 때, 그것은 일리가 있다.그러나 img 라벨이 브라우저 옵션을 제공하는 곳이라는 사실을 받아들여야 한다.너는 반드시 이 장면의 감독이 아니다.주어진 정보에 따라 브라우저가 srcset 에서 제공하는 이미지에 가장 적합한 이미지를 선택하면 해당 이미지가 선택됩니다.

그렇다면 현재의 해결 방안은 무엇입니까?

우리는 지금 무슨 일이 일어났는지, 왜 일어났는지 알고 있다. 나는 당신들에게 해결 방안을 알려주고 싶다. 그러나 이것은 정말 당신들이 무엇을 실현하고자 하는지에 달려 있다.
이런 상황에서 그는 설비의 너비에 따라 특정한 이미지를 제공하기를 희망한다.그래서 그는 진정으로 원하는 이미지를 전달하기 위해 할 수 있었다.
이전:

<img src="raw.jpg"  
srcset="360w.jpg 360w, 800w.jpg 800w, 1080w.jpg 1080w" 
sizes="
  (max-width: 360px) 360px,
  (max-width: 800px) 800px,
  (max-width: 1080px) 1080px
">

다음:

<img src="raw.jpg"  
srcset="360w.jpg 360w, 800w.jpg 800w, 1080w.jpg 1080w" 
sizes="
  ((max-width: 360px) and (-webkit-min-device-pixel-ratio: 4)) 90px,
  ...
  (max-width: 800px) 800px,
  (max-width: 1080px) 1080px
">

그래서 srcset 브라우저가 현재 가장 적합한 이미지를 검색할 때 "좋습니다. 360/4 = 90px보다 4배 큰 그림이 필요합니다. 즉, 90px 그래서 360w.jpg를 사용하겠습니다."
이것은 듣기에 깨끗한 해결 방안 같지 않습니까?특히 이런 사실을 고려하면 품질이 적당하지 않은 이미지를 고의로 제공할 수도 있다. (정확히 말하면 품질의 4배)
그러나 다음 5x 또는 6x DPI 장치가 출시될 때 360px 속성을 조회할 때 점점 더 조정해야 합니다.

데이비드, 이 문제들에 대해 너는 많은 이야기를 했지만, 너는 무슨 건의가 있니?

나는 네가 보고 싶은 최종 결과를 생각하는 것부터 시작하자고 건의한다.심지어 종이에 그릴 수도 있다.그리고 어떤 해결 방안이 당신을 도울 수 있는지 계속 생각해 보세요. 이 해결 방안은 sizes 라벨이 있는 것이 아니라 img 라벨이 있을 수 있습니다.아래의 설명을 읽어 주십시오.
모든 장치의 이미지가 동일하지만 크기가 다른 경우 srcset 에서 망막 정의를 사용해야 합니다.

<img src="raw.jpg"  
srcset="
  image.jpg,
  [email protected] 2x,
  [email protected] 3x,
  [email protected] 4x,
  [email protected] 5x">

이것은 모두 규격을 이해하는 것에 관한 것이다

그림: srcset+img의 중요한 규범 세부 사항

srcset를 사용하는 경우 (이 미디어 쿼리에서 이미지의 표시 크기는 WHATEVERPx임을 알려 주는 W3C specs 속성을 브라우저에 제공해야 합니다.sizes를 사용하는 경우 srcset="foo.jpg 200w ..." 속성을 제공할 수 없습니다.선택한 이미지만 픽셀 밀도를 통해 암시하기 때문에 브라우저는 이를 무시합니다.
https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element(2020년 9월)에 따라 sizes 태그는 속성srcset="foo.jpg 2x ..."을 지원하지 않습니다sizes.다음 img 및 media 라벨에 대한 단락을 읽으면 이해할 수 있습니다.

강력한 형식 표시 및 이미지 하위 대상

의미상, (W3C 규범 읽기), source 요소는 picture 표시된'유령'용기일 뿐, source 표시에 제공된 이미지를 제어할 수 있습니다.
W3C states :

The picture element is a container which provides multiple sources to its contained img element to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format, and other factors. It represents its children.

MDN describespicture 라벨은 예술 지도 목표의 라벨이다.그들의 뜻은 완전한 유연성이다.img과의 가장 큰 차이점은 브라우저가 장치 크기에 가장 적합한 브라우저를 선택할 수 없다는 것입니다.구체적인 상황에서 어떤 이미지를 재생할지 명확하게 정의했습니다.이것은 당신이 무엇을 원하든지 픽셀 밀도, 화면 비례, 높이를 기반으로 할 수 있다.
그림 요소는 최소한 하나의 img 표시를 포함해야 하며, 실제적으로 유용하기 위해서는 하나 이상의 picture 표시를 포함해야 한다.
예를 들자.

1.img[srcset][size] 태그 망막 이미지

우리는 단지 장치의 픽셀 밀도에 따라 이미지를 확대하고 싶을 뿐이다.

<picture>
 <source srcset="logo.png 1x, logo_x2.png 2x, logo_x3.png 3x">
 <img src="logo.png" alt="Cool Logo 👌">
</picture>

img 및 source 레이블을 제거하지만 보존picture 레이블은 동일한 작업을 수행하므로 이 샘플은 과도한 설계로 간주될 수 있습니다.

<img src="logo.png" alt="Cool Logo 👌" 
  srcset="logo.png 1x, logo_x2.png 2x, logo_x3.png 3x">

2. 배율에 따라 다른 이미지 선택

<picture>
 <source 
  media="(min-aspect-ratio: 21/9)"
  srcset="2100x900px-img.jpg">
<source 
  media="(min-aspect-ratio: 16/9)" 
  srcset="1600x900px-img.jpg">
<source 
  media="(min-aspect-ratio: 1)" 
  srcset="300x300px-img.jpg">
 <img src="fallback_whatever.png" alt="💞">
</picture>

이상은 화면의 종횡비만 고려합니다.따라서 실제 해상도가 picture인 source 화면에 대해서는 일치하는 첫 번째 미디어 조회이기 때문에 img 를 사용합니다.

This is important to note: source tags are matched from top to bottom. If one hits, the following are ignored.

2. 비율에 따라 다른 이미지를 선택하고 적당한 망막 이미지를 제공한다

<picture>
 <source 
  media="(min-aspect-ratio: 21/9)"
  srcset="
   2100x900px-img.jpg 1x, 
   4200x1800px-img.jpg 2x,
   6300x2700px-img.jpg 3x">
<source 
  media="(min-aspect-ratio: 16/9)" 
  srcset="
   1600x900px-img.jpg 1x,
   3200x1800px-img.jpg 2x,
   4800x2700px-img.jpg 3x,">
<source 
  media="(min-aspect-ratio: 1)" 
  srcset="
   300x300px-img.jpg 1x,
   600x600px-img.jpg 2x,
   900x900px-img.jpg 3x">
 <img src="fallback_whatever.png" alt="💞">
</picture>

이전의 예시와 유일하게 다른 것은 브라우저에서 어느 600x600 표시를 가져올지 정확하게 알려주지만, 브라우저는 이 원본 표시에서 가장 좋은 이미지를 선택할 수 있다는 것이다.따라서 망막3000x3000이 사각형 화면이면 마지막 5x 탭을 클릭하고 다음 가장 적합한 300x300px-img.jpg, 즉 source 을 선택합니다.

3. 8x 태그 및 소스 속성을 사용하여 성능 향상

간단한 예시를 예로 들면 3x 속성의 성능만을 위해 이를 조정합니다.
조정 전:

<picture>
 <source 
  media="(min-width: 1024px)"
  srcset="
   big.jpg 1x, 
   big-2x.jpg 2x">
<source 
  media="(min-width: 768px)"
  srcset="
   medium.jpg 1x, 
   medium-2x.jpg 2x">
 <img src="fallback.jpg" 
  srcset="
   fallback.jpg 1x, 
   fallback-2x.jpg 2x" alt="💞">
</picture>

보시다시피 우리는 세 가지 잠재적인 출처가 있습니다.900x900px-img.jpg 라벨 내의 source 에서도 사용할 수 있습니다. 다른 2개의 type 라벨이 일치하지 않을 때만 고려할 수 있기 때문입니다.
W3C says:

The srcset attribute and the src attribute (if width descriptors are not used) contribute the image sources to the source set (if no source element was selected).

조정:

<picture>
 <source 
  media="(min-width: 1024px)"
  type="image/webp"
  srcset="
   big-optimized.webp 1x, 
   big-optimized-2x.webp 2x">
 <source 
  media="(min-width: 1024px)"
  srcset="
   big.jpg 1x, 
   big-2x.jpg 2x">
 <source 
  media="(min-width: 768px)"
  type="image/webp"
  srcset="
   medium-optimized.webp 1x, 
   medium-optimized-2x.webp 2x">
 <source 
  media="(min-width: 768px)"
  srcset="
   medium.jpg 1x, 
   medium-2x.jpg 2x">
 <source 
  type="image/webp"
  srcset="
   fallback-optimized.webp 1x, 
   fallback-optimized-2x.webp 2x">
 <img src="fallback.jpg" 
  srcset="
   fallback.jpg 1x, 
   fallback-2x.jpg 2x" alt="💞">
</picture>

현재 우리는 서로 다른 해상도에 서로 다른 이미지를 제공할 뿐만 아니라 브라우저에 망막 이미지를 촬영할 가능성, 심지어 type 형식이 아니라 srcset 형식의 최적화 버전을 제공한다.

img 태그 결론

picture 탭을 사용하면 다양한 상황에서 다른 이미지를 재생할 수 있습니다.E, g. 만약 당신이 이동 source 파일을 가지고 놀려고 하지만, 1Y를 높이고 싶다면 다음과 같은 일을 할 수 있다.

<picture>
 <source 
  media="(prefers-reduced-motion: reduce)"
  srcset="
   no-motion.jpg 1x, 
   no-motion2x.jpg 2x,
   no-motion3x.jpg 1x 3x">
 <img src="funny_moving_gif.gif" alt="Funny Animals">
</picture>

결론: 그럼 언제 뭘 쓸까요?

webp

복잡한 설정이 있으면 jpg 를 사용하십시오.

사진.

만약 당신의 이미지 비율이 변하지 않지만 인스타그램이나 페이스북에 올라온 실제 사진과 같은 다양한 퀄리티 버전으로 재생되어야 한다면 picture 또는 .gif 을 사용하여 생활을 간소화하기를 원할 수도 있습니다. 구체적인 것은 당신이 이루고 싶은 목표에 달려 있습니다.
질문이 있으면 아래 설명을 사용하십시오.