Web siteniz için veya uygulamanız içindeki görselleri sıkıştırmak performansı önemli ölçüde artırabilir. Ağır yükü Sharp kaldırıyor.
Gereksiz derecede büyük resimler daha yavaş yanıt sürelerine neden olabilir, aşırı bant genişliği tüketebilir ve özellikle yavaş bağlantılara sahip kullanıcılar için yavaş bir deneyim sağlayabilir. Bu, daha yüksek hemen çıkma oranlarına veya daha az dönüşüme neden olabilir.
Resimleri yüklemeden önce sıkıştırmak bu sorunları azaltabilir ve daha iyi bir kullanıcı deneyimi sağlayabilir. Sharp modülü bu süreci hızlı ve kolay hale getirir.
Geliştirme Ortamınızı Kurma
Görüntüleri sıkıştırma işlemini göstermek için şununla başlayın: multer kullanarak bir resim yükleme hizmeti kurma. Klonlayarak süreci hızlandırabilirsiniz bu GitHub deposu.
GitHub deposunu klonladıktan sonra görüntü yükleme hizmetine yönelik bağımlılıkları yüklemek için bu komutu çalıştırın:
npm install
Daha sonra şu komutu çalıştırarak Sharp'ı yükleyin:
npm install sharp
Keskin modül, görüntüleri işlemek ve değiştirmek için kullanılan yüksek performanslı bir Node.js kitaplığıdır. Görüntüleri yeniden boyutlandırmak, kırpmak, döndürmek ve bunlar üzerinde çeşitli işlemleri verimli bir şekilde gerçekleştirmek için Sharp'ı kullanabilirsiniz. Sharp ayrıca görüntüleri sıkıştırmak için mükemmel desteğe sahiptir.
Farklı Görüntü Formatları İçin Sıkıştırma Teknikleri
Farklı görüntü formatları farklı sıkıştırma teknikleri vardır. Bunun nedeni, her birinin belirli kullanımlara ve gereksinimlere hitap etmesi ve kalite, dosya boyutu, şeffaflık ve animasyonlar gibi özellikler gibi farklı faktörlere öncelik vermesidir.
JPG/JPEG
JPEG, fotoğrafları ve gerçekçi görüntüleri sürekli tonlar ve renk geçişleriyle sıkıştırmak için Joint Photographic Experts Group tarafından geliştirilen bir görüntü sıkıştırma standardıdır. Kullanır kayıplı sıkıştırma algoritması, bazı görüntü verilerini atarak daha küçük dosyalar oluşturur.
Bir JPEG görüntüsünü Sharp ile sıkıştırmak için Sharp modülünü içe aktarın ve filePath'i veya görüntünün arabelleğini argüman olarak iletin. Daha sonra şu numarayı arayın: .jpeg konusundaki yöntem Keskin misal. Ardından, bir yapılandırma nesnesini iletin kalite arasında bir sayı alan özellik 0 Ve 100 bir değer olarak. Nerede 0 en düşük kalitede en küçük sıkıştırmayı döndürür ve 100 En büyük sıkıştırmayı en yüksek kalitede döndürür.
Değeri ihtiyaçlarınıza göre ayarlayabilirsiniz. En iyi sıkıştırma sonuçları için değeri arasında tutun. 50-80 boyut ve kalite arasında bir denge kurmak.
Sıkıştırılmış görüntüyü dosya sistemine kaydederek işlemi tamamlayın. .dosyalamak yöntem. Yazmak istediğiniz dosyanın yolunu argüman olarak iletin.
Örneğin:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
için varsayılan değer kalite dır-dir 80.
PNG
PNG (Taşınabilir Ağ Grafikleri), kayıpsız sıkıştırması ve şeffaf arka plan desteğiyle bilinen bir görüntü dosyası formatıdır.
PNG görüntüsünü Sharp ile sıkıştırmak, JPEG görüntüsünü Sharp ile sıkıştırmaya benzer. Ancak görsel PNG formatında olduğunda yapmanız gereken iki değişiklik var.
- Sharp, PNG görüntülerini aşağıdaki aracı kullanarak işler: .png yöntemi yerine .jpeg yöntem.
- .png yöntem kullanımları sıkıştırma Düzeyi, arasında bir sayı olan 0 Ve 9 yerine kalite yapılandırma nesnesinde. 0 mümkün olan en hızlı ve en büyük sıkıştırmayı sağlarken 9 mümkün olan en yavaş ve en küçük sıkıştırmayı sağlar.
Örneğin:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
için varsayılan değer sıkıştırma Düzeyi dır-dir 6.
Diğer Formatlar
Sharps, aşağıdakileri içeren diğer çeşitli görüntü formatlarında sıkıştırmayı destekler:
- WebP: Sharp ile WebP görüntü sıkıştırması, JPG ile aynı süreci izler. Tek fark, aramanız gerekmesidir. webp yöntemi yerine .jpeg Sharp örneğindeki yöntem.
- TIFF: Sharp ile TIFF (Etiket Görüntü Dosyası Formatı) görüntü sıkıştırması, JPG ile aynı süreci izler. Tek fark, aramanız gerekmesidir. çekişme yöntemi yerine .jpeg Sharp örneğindeki yöntem.
- AVIF: Sharp ile AVIF (AV1 Görüntü Dosyası Formatı) görüntü sıkıştırması, JPG ile aynı süreci izler. Tek fark, aramanız gerekmesidir. avif yöntemi yerine .jpeg Sharp örneğindeki yöntem. AVIF varsayılan değeri kalite dır-dir 50.
- HEIF: Sharp ile HEIF (Yüksek Verimli Görüntü Dosyası Formatı) görüntü sıkıştırma, JPG ile aynı süreci izler. Tek fark, aramanız gerekmesidir. sığır yöntemi yerine .jpeg Sharp örneğindeki yöntem. AVIF varsayılan değeri kalite dır-dir 50.
Görüntüleri Sharp ile Sıkıştırma
GitHub deposunu klonladıysanız uygulama.js dosyalayın ve aşağıdaki içe aktarmaları ekleyin.
const sharp = require("sharp");
const { exec } = require("child_process");
yönetici tarafından sağlanan bir fonksiyondur. çocuk_işlemi Node.js uygulamanızdan kabuk komutlarını veya harici işlemleri yürütmenize olanak tanıyan modül.
Sıkıştırmadan önce ve sonra dosya boyutlarını karşılaştıran bir komutu çalıştırmak için bu işlevi kullanabilirsiniz.
Ardından POST'u değiştirin/single' işleyicisini aşağıdaki kod bloğuyla birlikte kullanın:
app.post("/upload-and-compress", upload.single("image"), async (req, res) => {
try {
if (!req.file) {
return res.status(404).send("Please upload a valid image");
}const compressedFileName = req.file.filename.split(".")[0];
const compressedImageFilePath = `./images/${compressedFileName}-compressed.png`;await sharp(req.file.path)
.jpeg({ quality: 50 })
.toFile(compressedImageFilePath)
.then(() => {
let sizeBeforeCompression, sizeAfterCompression;
const sizeBeforeCompressionCommand = `du -h ${req.file.path}`;
const sizeAfterCompressionCommand = `du -h ${compressedImageFilePath}`;exec(sizeBeforeCompressionCommand, (err, stdout, stderr) => {
sizeBeforeCompression = stdout.split("\\t")[0];exec(sizeAfterCompressionCommand, (err, stdout, stderr) => {
sizeAfterCompression = stdout.split("\\t")[0];
res.send({
message: "Image uploaded and compressed successfully",
sizeBeforeCompression,
sizeAfterCompression,
});
});
});
});
} catch (error) {
console.log(error);
}
});
Yukarıdaki kod bloğu, JPEG görüntüleri sıkıştırma tekniğini uygular ve bu yöntemi kullanmadan önceki ve sonraki boyutları karşılaştırır. du emretmek.
du komutu, "disk kullanımı" anlamına gelen bir Unix yardımcı programıdır. Dosya alanı kullanımını tahmin eder ve bir dizindeki veya dizinler kümesindeki disk kullanımını analiz eder. Çalıştırdığınızda du ile komut -H flag, her alt dizinin kullandığı dosya alanını ve içeriğini insan tarafından okunabilir biçimde görüntüler.
Bu komutu çalıştırarak yükleme hizmetinizi başlatın:
node app.js
Daha sonra rotaya bir JPG resmi göndererek uygulamanızı test edin. yerel ana bilgisayar:
Buna benzer bir yanıt görmelisiniz:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Sharp Modülünün Diğer Kullanımları
Sharp modülü, görüntüleri sıkıştırmanın yanı sıra görüntüleri istenen özelliklere göre yeniden boyutlandırabilir, kırpabilir, döndürebilir ve çevirebilir. Ayrıca renk alanı ayarlamalarını, alfa kanalı işlemlerini ve format dönüştürmelerini de destekler.
