<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
</style>
</head>
<body>
<p>Convert the image to grayscale:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>
</body>
</html>