웹사이트에서 많은 수의 이미지를 렌더링하려면 더 나은 압축을 제공하는 webp 형식을 사용하는 것이 좋습니다.
지원되지 않는 브라우저에 대한 대체를 제공하기 위해
<picture> <source srcset="filename.webp" type="image/webp"> <source srcset=" filename.jpg" type="image/jpeg"> <img src=" filename.jpg"> </picture>
다음 예는 이러한 대체를 보여줍니다.
예시
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 2%;
}
</style>
</head>
<body>
<picture>
<source srcset="sky.webp">
<img src="sky.jpg" />
</picture>
</body>
</html> 출력
이것은 다음과 같은 결과를 생성합니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 10px;
}
</style>
</head>
<body>
<picture>
<source srcset="tree.webp" type="image/webp" />
<source srcset="tree.jpg" type="image/jpeg" />
<img src="tree.jpg" />
</picture>
</body>
</html> 출력
이것은 다음과 같은 결과를 생성합니다 -
