서버가 <picture> 태그에 2개 이상의 이미지를 보내고 대체됩니까?

Question

이렇게 구현된 이미지 태그가 궁금합니다.

으아아아

클라이언트의 경우, 브라우저가 webp를 처리할 수 있으면 서버에서 전송된 webp 이미지가 표시되고, 그렇지 않으면 서버에서 전송된 jpg 이미지도 표시된다는 것을 이해합니다.

서버가 두 이미지를 모두 클라이언트에 보내야 하는지, 아니면 내 목표가 서버 대역폭 최적화이기 때문에 서버가 클라이언트가 처리할 수 있는 하나의 이미지만 보내는지 알고 싶습니다.

Answer 1

"게으른" 접근 방식이 필요합니다. source 元素“可用”之前，它不会请求 source 요소에 지정된 파일입니다.

"사용 가능"은 다음 중 하나를 의미할 수 있습니다.

• 브라우저는 이 파일 형식을 지원합니다
• 미디어 문의 완료

demo를 예로 들어보세요 https://www.w3schools.com/tags/tag_picture.asp" rel="nofollow noreferrer">W3Schools:
(아래 데모 사본)

으아아아