사회 사이트를 살펴보니'폭 120px의 약도에는 1600px의 이미지가 사용됐다'는 경우가 많았는데 소스 코드를 확인해보니
창 사이즈가 2000px일 때는 800px로, 스마트폰은 120px로 표시된다.
또한 Retina 지원으로 인해 해상도의 2배가 필요합니다.800px@2x그래서 큰 게 어울려요.
이런 모델은 비교적 흔하기 때문에 img의 속성srcset과 sizes을 다시 정리해 봅시다.

큰 이미지의 파일 크기

아마 이 기사를 보는 사람들에게 "무엇이 당연한가"라고 생각할 테니 좀 더 사귀어라.
고양이의 오리지널 그림이 있다.참고로 이 이미지는 가로 1024px이고 파일 크기는 74.0KB입니다.

150px 너비를 축소판 그림으로 표시하면 파일 크기는 4.2KB입니다.1/10 이하.

이 경우 한 장의 이미지가 최적화되면 거의 70KB를 생략할 수 있다.그나저나 항간에 흔히 말하는 고속화 기술인'미니피(Minify)'는 미니피(Minify) 앞에 1만 줄이 넘는 jQuery 3.3.1, 미니피(Minify) 앞에 78.9KB, 미니피(Minify) 뒤에 30.0KB로 48.9KB 차이가 났다.1만 줄이 넘는 JS의 미니피(Minify)는 해당 이미지의 축소판과 거의 동일합니다.
그나저나 웹사이트에서는 한 페이지에 여러 이미지를 자주 사용하기 때문에 이미지 수와 비례해 파일 크기 다이어트를 할 수 있다.

srcset으로 여러 개의 그림을 준비하면 되지 않습니까?

img 라벨은 srcset 속성을 사용할 수 있습니다.간단하게 말하면 img 라벨로 스펀지 패드에 이미지 너비 판정을 하는 속성이다.
예를 들어, 다음과 같은 레이블img이 준비되어 있습니다.

<img srcset="
  https://dp5figrfxl9dq.cloudfront.net/wp-content/uploads/2018/10/DSC_1217-20181001113727.jpg?d=150 150w, 
  https://dp5figrfxl9dq.cloudfront.net/wp-content/uploads/2018/10/DSC_1217-20181001113727.jpg?d=300 300w, 
  https://dp5figrfxl9dq.cloudfront.net/wp-content/uploads/2018/10/DSC_1217-20181001113727.jpg?d=500 500w, 
  https://dp5figrfxl9dq.cloudfront.net/wp-content/uploads/2018/10/DSC_1217-20181001113727.jpg?d=800 800w, 
  https://dp5figrfxl9dq.cloudfront.net/wp-content/uploads/2018/10/DSC_1217-20181001113727.jpg?d=1000 1000w
">

srcset 이미지 URL과 화면 너비(MediaQuery)의 조합에 사용됩니다.그래서

https://dp5figrfxl9dq.cloudfront.net/wp-content/uploads/2018/10/DSC_1217-20181001113727.jpg?d=300 300w,

즉, 전반부画像URL, 후반부150w는 시야 포트 폭으로'시야 포트 폭이 300w 이하인 경우 이 이미지 URL을 이용한다'는 뜻이다.여러 조합을 통해 이미지를 자동으로 스펀지 패드로 바꿀 수 있다.
또한 불일치한 이미지를 읽을 수 없습니다.

보기 포트 너비에 대응한다는 뜻입니다.

나는'시도 포트의 넓이'라는 단어가 익숙하지 않다고 생각한다. 간단하게 말하면 화면의 넓이이다.

@media all and (min-width: 1024px)

구문을 사용합니다.@1x(해상도 1배)의 경우 1024px와1024w의 뜻이 같다.
그러나 @2x(Retina/해상도 2배)의 경우 2048px는 1024w와 일치한다.최근에도 @4x(Retina/해상도 4배)의 단말기가 있는데 이 경우4096px와 1024w가 일치한다.네??
모니터의 고해상도와 일치하는 이미지 읽기가 진행됨에 따라 @4x 150px를 표시하면 600px의 이미지를 호출합니다.어떻게 된 거야?

sizes에서 보기 포트 너비 설정

여기에 나타난 것은 img 라벨의 sizes 속성이다.또한img 라벨에width/height가 설치되어 있지 않으면 사용할 수 없습니다. 주의(WordPress는 기본적으로 자동으로 삽입되기 때문에 괜찮습니다)
sizes에서 vw 이 단위를 사용하면 해상도를 설정할 수 있습니다.100vw 해상도 100%

sizes="50vw"

설정하면 설정된 해상도가 50%가 됩니다.

@1x(해상도 1배)의 경우 512px 및 1024w

@1x(해상도 1배)의 경우 1024px 및 1024w

일치따라서 예를 들어@2x,@3x도 무시하고 이미지를 준비할 때 다음과 같다.resolution: 2dppx는 해상도의 2배를 나타내는 MediaQuery)입니다.

sizes="(resolution: 2dppx) 50vw, (resolution: 3dppx) 34vw"

그래서 "@2x이면 해상도 2배는 필요 없지만 1.2배죠. @3x 그럼 1.4배로 준비하세요."이렇게 설정하면 된다.

sizes="(resolution: 2dppx) 60vw, (resolution: 3dppx) 47vw"

보기 포트 너비는 이미지 너비가 아닙니다. 이미지에 맞추십시오.

그리고
말하자면, 보기 포트의 폭은 그림의 폭이 아니다.200px의 그림을 표시하려면 보기 포트 1024px에서 1024w를 표시하십시오. 그러면 본말이 뒤바뀐 것입니다.
어떻게 해야 좋을지 말하자면, 시청각 포트의 넓이에 대응하는 이미지의 비율을 계산해야 한다.
예를 들어 시야 포트의 폭이 1000px 이하이고 해상도가 1배일 때 200px의 미리 보기 그림을 표시하려면 그림의 가로 폭이 시야 포트의 20%이다.이 설정은 다음과 같습니다.

<img 
 srcset="https://dp5figrfxl9dq.cloudfront.net/wp-content/uploads/2018/10/DSC_1217-20181001113727.jpg?d=200 200w"
 sizes="(max-width: 1000px) and (resolution: 1dppx) 20vw"
>

해상도가 2배일 때 300px를 표시하고 싶을 때 이렇습니다.

<img 
 srcset="https://dp5figrfxl9dq.cloudfront.net/wp-content/uploads/2018/10/DSC_1217-20181001113727.jpg?d=200 200w, 
         https://dp5figrfxl9dq.cloudfront.net/wp-content/uploads/2018/10/DSC_1217-20181001113727.jpg?d=300 300w"
 sizes="(max-width: 1000px) and (resolution: 1dppx) 20vw, (max-width: 1000px) and (resolution: 2dppx) 30vw"
>

간단한 설치 방법

정리를 위해 복잡한 것이 무엇인지 감안하면 다음과 같은 3가지가 있다.

srcset에서 관찰점 너비에 대응하는 이미지를 준비해야 한다

2배, 3배

해상도

각 폭발점에 대해 창 너비에 대한 그림의 너비를 설정해야 한다

여러 번 시도해 봤는데 변수를 최대한 줄였어요. 준비srcset할 때 이미지의 넓이(px)와 시야점의 넓이가 일치했어요. 이것도 변경하기 시작하면 끝이 없어요.
이렇게 하면 해상도와 창 너비에 대한 계산 공식만 기계적으로 생성할 수 있다sizes.구체적으로 순간 득점과 해상도에 따라 준비했기 때문에 다음과 같은 방법으로 제작할 수 있다.

(max-width: 1000px) and (resolution: 1dppx) 20vw, 
(max-width: 1000px) and (resolution: 2dppx) 12vw, // 20/2*1.2
(max-width: 1000px) and (resolution: 3dppx) 9vw,  // 20/3*1.2
(max-width: 1000px) and (resolution: 4dppx) 6vw   // 20/4*1.2

각 보기 포트의 폭에 따라 설정하면 의도와 같은 스펀지 패드를 실현할 수 있습니다!특히 @3x@4x는 거의 이동전화였다며 "이동전화라 디스플레이 속도가 중요한데 해상도가 너무 높아 이미지가 안 나온다. 하지만 해상도 1배보다 더 좋은 이미지를 만들고 싶다"고 말했다.

자동화하도록 하겠습니다.

그렇게 생각하지만 할 수도 없고, 다른 사람에게 더 많은 계산 부탁을 할 수도 없기 때문에 매 순간 사이즈 제안을 하는 Generation을 만들었습니다.
이미지 표시 어려움이 개선되었습니다.rabify CDN

CDN으로 그림을 전송하고 끝에서 끝낼까요?rabify CDN과 함께 사용할 수 있다면 d=300 등 매개 변수를 입력하면 클라우드를 통해 자동으로 크기를 조절할 수 있습니다.(rabify CDN을 사용하지 않더라도 sizes 계산에 사용할 수 있습니다. 따로 사용하십시오.)
단점은 "CSS에서 설정한 단점이 아니라 스펀지 모양의 폭발점에서 이미지 크기가 가장 클 때"입니다.대부분의 경우 CSS에서 설정한 폭발점 1px 이하로 내려가지 않을까요?
그럼 안녕히 계세요!