HTML5中提供了很多有用的標簽和功能，其中之一就是縮小圖片的功能。這一功能十分重要，因為在網頁上展示高分辨率的圖片可能會導致加載速度過慢和占用過多的帶寬。下面我們來看一下如何在HTML5中使用代碼縮小圖片。 首先，我們需要一個img標簽來展示圖片。比如說：

這是原始圖片：

接下來，我們可以使用HTML5中的canvas標簽來縮小圖片。我們需要使用JavaScript來操作canvas，可以在pre標簽中寫入以下代碼：

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
var width = img.width / 2;
var height = img.height / 2;
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
var newImage = canvas.toDataURL('image/jpeg', 0.7);
document.write('
這是縮小后的圖片：
');
document.write('');
}
img.src = './image.jpg';

上述代碼首先創建了一個canvas標簽和一個2D繪圖上下文對象。然后加載我們要縮小的圖片并在onload回調中進行縮小和繪制操作。我們把繪制好的新圖片轉成Base64格式，并用document.write來展示在網頁上。 在上述代碼中，我們縮小了原始圖片的一半，并將縮小后的圖片質量設置為0.7。這些值可以根據具體情況進行調整。 總的來說，HTML5中縮小圖片的功能對于網頁的性能和效果非常有幫助。上述代碼可以幫助我們輕松地實現圖片縮小功能。