隨著網絡技術的不斷進步，圖片已經成為了網頁設計的重要組成部分，但是高質量的圖片文件大小也導致了網頁打開速度的減慢。解決這個問題的一種方法就是使用javascript技術來壓縮圖片大小。

下面介紹幾種常用的javascript壓縮圖片大小的方法。

1. 使用HTML5的canvas

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
var quality = 0.7; // 壓縮質量
var newDataUrl = canvas.toDataURL('image/jpeg', quality);
console.log(newDataUrl);
};
img.src = 'test.jpg';

2. 使用第三方庫compress.js

var compress = new Compress();
var files = document.getElementById('file-input').files;
compress.compress(files, {
size: 4, // 最大允許壓縮的文件大小，單位MB
quality: .6, // 壓縮質量
maxWidth: 800, // 最大圖片寬度
maxHeight: 800 // 最大圖片高度
}).then(function(data){
console.log(data);
});

3. 使用第三方庫pica

var img = new Image();
img.onload = function() {
var canvas = document.createElement('canvas');
// 壓縮的圖片寬度和高度
var width = img.width * 0.5;
var height = img.height * 0.5;
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
// 使用pica庫進行圖片壓縮
pica.resize(img, canvas, {
unsharpAmount: 80,
unsharpRadius: 0.6,
unsharpThreshold: 2
}, function(err) {
if (err) {
console.log(err);
} else {
var newDataUrl = canvas.toDataURL('image/jpeg',0.6);
console.log(newDataUrl);
}
});
};
img.src = 'test.jpg';

注意：使用javascript壓縮圖片大小可能會造成一定的圖片質量損失，因此需要根據實際需求在圖片質量和文件大小之間取得平衡。

以上介紹了三種常用的javascript壓縮圖片大小的方法，可以根據實際需求選擇適合自己的方法來優化網頁性能。