आपकी वेबसाइट के लिए या आपके ऐप के भीतर छवियों को संपीड़ित करने से प्रदर्शन में मौलिक सुधार हो सकता है। शार्प भारी सामान उठाने का काम करता है।

अनावश्यक रूप से बड़ी छवियां प्रतिक्रिया समय को धीमा कर सकती हैं, अत्यधिक बैंडविड्थ का उपभोग कर सकती हैं, और उपयोगकर्ताओं के लिए सुस्त अनुभव प्रदान कर सकती हैं, विशेष रूप से धीमे कनेक्शन वाले उपयोगकर्ताओं के लिए। इसके परिणामस्वरूप उच्च बाउंस दर या कम रूपांतरण हो सकते हैं।

छवियों को अपलोड करने से पहले उन्हें संपीड़ित करने से ये समस्याएं कम हो सकती हैं और बेहतर उपयोगकर्ता अनुभव मिल सकता है। शार्प मॉड्यूल इस प्रक्रिया को त्वरित और आसान बनाता है।

अपना विकास परिवेश स्थापित करना

छवियों को संपीड़ित करने की प्रक्रिया को प्रदर्शित करने के लिए प्रारंभ करें मल्टर का उपयोग करके एक छवि अपलोड सेवा स्थापित करना. आप क्लोनिंग द्वारा प्रक्रिया को तेज़ कर सकते हैं यह GitHub रिपॉजिटरी.

GitHub रिपॉजिटरी को क्लोन करने के बाद, छवि अपलोड सेवा के लिए निर्भरता स्थापित करने के लिए इस कमांड को चलाएँ:

npm install

इसके बाद, इस कमांड को चलाकर शार्प इंस्टॉल करें:

npm install sharp

तीखा

instagram viewer
मॉड्यूल छवियों को संसाधित करने और हेरफेर करने के लिए एक उच्च प्रदर्शन वाली Node.js लाइब्रेरी है। आप छवियों का आकार बदलने, क्रॉप करने, घुमाने और उन पर विभिन्न अन्य ऑपरेशन कुशलतापूर्वक करने के लिए शार्प का उपयोग कर सकते हैं। छवियों को संपीड़ित करने के लिए शार्प के पास उत्कृष्ट समर्थन भी है।

विभिन्न छवि प्रारूपों के लिए संपीड़न तकनीकें

विभिन्न छवि प्रारूप विशिष्ट संपीड़न तकनीकें हैं। ऐसा इसलिए है क्योंकि उनमें से प्रत्येक विशिष्ट उपयोग और आवश्यकताओं को पूरा करता है, और वे गुणवत्ता, फ़ाइल आकार और पारदर्शिता और एनिमेशन जैसी सुविधाओं सहित विभिन्न कारकों को प्राथमिकता देते हैं।

जेपीजी/जेपीईजी

जेपीईजी एक छवि संपीड़न मानक है जिसे संयुक्त फोटोग्राफिक विशेषज्ञ समूह द्वारा तस्वीरों और यथार्थवादी छवियों को निरंतर टोन और रंग ग्रेडिएंट के साथ संपीड़ित करने के लिए विकसित किया गया है। यह उपयोगकर्ता है एक हानिपूर्ण संपीड़न एल्गोरिदम, कुछ छवि डेटा को त्यागकर छोटी फ़ाइलें उत्पन्न करना।

शार्प के साथ जेपीईजी छवि को संपीड़ित करने के लिए, शार्प मॉड्यूल आयात करें और फाइलपाथ या छवि के बफर को तर्क के रूप में पास करें। इसके बाद, कॉल करें .jpeg पर विधि तीखा उदाहरण। फिर, एक कॉन्फ़िगरेशन ऑब्जेक्ट को a के साथ पास करें गुणवत्ता वह संपत्ति जिसके बीच में एक संख्या आती है 0 और 100 एक मूल्य के रूप में. कहाँ 0 सबसे कम गुणवत्ता के साथ सबसे छोटा संपीड़न लौटाता है और 100 उच्चतम गुणवत्ता के साथ सबसे बड़ा संपीड़न लौटाता है।

आप अपनी आवश्यकताओं के आधार पर मूल्य निर्धारित कर सकते हैं। सर्वोत्तम संपीड़न परिणामों के लिए, मान को बीच में रखें 50-80 आकार और गुणवत्ता के बीच संतुलन बनाना।

का उपयोग करके संपीड़ित छवि को फ़ाइल सिस्टम में सहेजकर समाप्त करें ।दायर करना तरीका। जिस फ़ाइल पर आप लिखना चाहते हैं उसका पथ तर्क के रूप में पास करें।

उदाहरण के लिए:

await sharp(req.file.path)
 .jpeg({ quality: 60 })
 .toFile(`./images/compressed-${req.file.filename}`)
 .then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
 });

के लिए डिफ़ॉल्ट मान गुणवत्ता है 80.

पीएनजी

पीएनजी (पोर्टेबल नेटवर्क ग्राफिक्स) एक छवि फ़ाइल प्रारूप है जो अपने दोषरहित संपीड़न और पारदर्शी पृष्ठभूमि के लिए समर्थन के लिए जाना जाता है।

शार्प के साथ पीएनजी छवि को संपीड़ित करना शार्प के साथ जेपीईजी छवि को संपीड़ित करने के समान है। हालाँकि, जब छवि पीएनजी प्रारूप में हो तो आपको दो बदलाव करने होंगे।

  1. का उपयोग करके पीएनजी छवियों को शार्प प्रोसेस करता है .पीएनजी के बजाय विधि .jpeg तरीका।
  2. .पीएनजी विधि का उपयोग करता है संपीड़नस्तर, जो बीच की एक संख्या है 0 और 9 के बजाय गुणवत्ता इसके कॉन्फ़िगरेशन ऑब्जेक्ट में। 0 जबकि, सबसे तेज़ और सबसे बड़ा संपीड़न संभव देता है 9 सबसे धीमा और सबसे छोटा संपीड़न संभव देता है।

उदाहरण के लिए:

await sharp(req.file.path)
 .png({
 compressionLevel: 5,
 })
 .toFile(`./images/compressed-${req.file.filename}`)
 .then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
 });

के लिए डिफ़ॉल्ट मान संपीड़नस्तर है 6.

अन्य प्रारूप

शार्प विभिन्न अन्य छवि प्रारूपों में संपीड़न का समर्थन करता है जिसमें शामिल हैं:

  • वेबपी: शार्प के साथ वेबपी छवि संपीड़न जेपीजी के समान प्रक्रिया का पालन करता है। फर्क सिर्फ इतना है कि आपको कॉल करना होगा वेब के बजाय विधि .jpeg तीव्र उदाहरण पर विधि.
  • मनमुटाव: टीआईएफएफ (टैग इमेज फाइल फॉर्मेट) शार्प के साथ छवि संपीड़न जेपीजी के समान प्रक्रिया का पालन करता है। फर्क सिर्फ इतना है कि आपको कॉल करना होगा मनमुटाव के बजाय विधि .jpeg तीव्र उदाहरण पर विधि.
  • एवीआईएफ: AVIF (AV1 छवि फ़ाइल स्वरूप) शार्प के साथ छवि संपीड़न JPG जैसी ही प्रक्रिया का अनुसरण करता है। फर्क सिर्फ इतना है कि आपको कॉल करना होगा avif के बजाय विधि .jpeg तीव्र उदाहरण पर विधि. के लिए AVIF डिफ़ॉल्ट मान गुणवत्ता है 50.
  • HEIF: HEIF (उच्च दक्षता छवि फ़ाइल स्वरूप) शार्प के साथ छवि संपीड़न JPG के समान प्रक्रिया का पालन करता है। फर्क सिर्फ इतना है कि आपको कॉल करना होगा बछिया के बजाय विधि .jpeg तीव्र उदाहरण पर विधि. के लिए AVIF डिफ़ॉल्ट मान गुणवत्ता है 50.

छवियों को शार्प से संपीड़ित करना

यदि आपने GitHub रिपॉजिटरी को क्लोन किया है, तो अपना खोलें ऐप.जे.एस फ़ाइल करें और निम्नलिखित आयात जोड़ें।

const sharp = require("sharp");
const { exec } = require("child_process");

कार्यकारी द्वारा प्रदान किया गया एक फ़ंक्शन है child_process मॉड्यूल जो आपको अपने Node.js एप्लिकेशन से शेल कमांड या बाहरी प्रक्रियाओं को निष्पादित करने की अनुमति देता है।

आप इस फ़ंक्शन का उपयोग एक कमांड चलाने के लिए कर सकते हैं जो संपीड़न से पहले और बाद में फ़ाइल आकार की तुलना करता है।

इसके बाद, POST को बदलें'/single' नीचे दिए गए कोड ब्लॉक के साथ हैंडलर:

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);
 }
});

उपरोक्त कोड ब्लॉक JPEG छवियों को संपीड़ित करने की तकनीक को लागू करता है और उपयोग करने से पहले और बाद के आकारों की तुलना करता है ड्यू आज्ञा।

ड्यू कमांड एक यूनिक्स उपयोगिता है जिसका अर्थ है "डिस्क उपयोग।" यह फ़ाइल स्थान उपयोग का अनुमान लगाता है और निर्देशिका या निर्देशिकाओं के सेट में डिस्क उपयोग का विश्लेषण करता है। जब आप चलाते हैं ड्यू के साथ आदेश दें -एच ध्वज, यह प्रत्येक उपनिर्देशिका द्वारा उपयोग किए जाने वाले फ़ाइल स्थान और उसकी सामग्री को मानव-पठनीय रूप में प्रदर्शित करता है।

यह आदेश चलाकर अपनी अपलोड सेवा प्रारंभ करें:

node app.js

इसके बाद, रूट पर एक JPG छवि भेजकर अपने एप्लिकेशन का परीक्षण करें लोकलहोस्ट:/upload-and-compressपोस्टमैन क्लाइंट ऐप का उपयोग करना या कोई भी अन्य एपीआई परीक्षण उपकरण.

आपको इस जैसी ही प्रतिक्रिया दिखनी चाहिए:

{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}

शार्प मॉड्यूल के अन्य उपयोग

छवियों को संपीड़ित करने के अलावा, शार्प मॉड्यूल वांछित विशिष्टताओं के अनुसार छवियों का आकार बदल सकता है, क्रॉप कर सकता है, घुमा सकता है और फ़्लिप भी कर सकता है। यह रंग स्थान समायोजन, अल्फा चैनल संचालन और प्रारूप रूपांतरण का भी समर्थन करता है।