E. <Image /> + sizes

sizes 지정으로 브라우저가 더 적절한 후보 이미지를 고르게 해 전송량을 줄이는지 확인

sizes: (max-width: 768px) 100vw, 33vw 를 명시해 responsive 선택 정확도를 높인다

sample-1

sample-2

sample-3

sample-4

sample-5

sample-6

sample-7

sample-8

아래 영역은 viewport 밖 이미지 요청 확인용 구간

sample-9

sample-10

sample-11

sample-12

sample-13

sample-14

sample-15

sample-16

sample-17

sample-18

sample-19

sample-20

sample-21

sample-22

sample-23

sample-24