kiransiluveru/webp-images.html

## webp-images.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEBP images </title>
    <script type="text/javascript">
        function getDimensions() {
            let width = window.innerWidth
                || document.documentElement.clientWidth
                || document.body.clientWidth;

            let height = window.innerHeight
                || document.documentElement.clientHeight
                || document.body.clientHeight;
            document.getElementById('width').innerHTML = width;
            document.getElementById('height').innerHTML = height;
        }
        window.onresize = getDimensions;
        window.onload = getDimensions;
    </script>
</head>

<body>
    <div style="text-align: center;">
        <p>
            Window Width: <span id="width"></span>
        </p>
        <p>
            Widow Height: <span id="height"></span>
        </p>
    </div>
    <picture style="text-align: center;display: block;">
        <!-- min width  > = 600 -->
        <source media="(min-width:1200px)" srcset="./red-car-1200.webp" />
        <source media="(min-width:1000px)" srcset="./black-red-1000.webp" />
        <source media="(min-width:900px)" srcset="./pink-900.webp" />
        <img src="./car.jpg" alt="Car Image" />
    </picture>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>WEBP images </title>
	<script type="text/javascript">
	function getDimensions() {
	let width = window.innerWidth
	\|\| document.documentElement.clientWidth
	\|\| document.body.clientWidth;

	let height = window.innerHeight
	\|\| document.documentElement.clientHeight
	\|\| document.body.clientHeight;
	document.getElementById('width').innerHTML = width;
	document.getElementById('height').innerHTML = height;
	}
	window.onresize = getDimensions;
	window.onload = getDimensions;
	</script>
	</head>

	<body>
	<div style="text-align: center;">
	<p>
	Window Width: <span id="width"></span>
	</p>
	<p>
	Widow Height: <span id="height"></span>
	</p>
	</div>
	<picture style="text-align: center;display: block;">
	<!-- min width > = 600 -->
	<source media="(min-width:1200px)" srcset="./red-car-1200.webp" />
	<source media="(min-width:1000px)" srcset="./black-red-1000.webp" />
	<source media="(min-width:900px)" srcset="./pink-900.webp" />
	<img src="./car.jpg" alt="Car Image" />
	</picture>
	</body>

	</html>