Kompresja obrazów w witrynie lub w aplikacji może radykalnie poprawić wydajność. Sharp wykonuje ciężkie prace.
Niepotrzebnie duże obrazy mogą powodować wydłużenie czasu reakcji, nadmierne wykorzystanie przepustowości i spowolnienie działania użytkowników, szczególnie tych korzystających z wolniejszych połączeń. Może to skutkować wyższym współczynnikiem odrzuceń lub mniejszą liczbą konwersji.
Kompresja obrazów przed ich przesłaniem może złagodzić te problemy i zapewnić lepszą obsługę. Moduł Sharp sprawia, że proces ten jest szybki i łatwy.
Konfigurowanie środowiska programistycznego
Aby zademonstrować proces kompresji obrazów, zacznij od konfigurowanie usługi przesyłania obrazów za pomocą multera. Możesz przyspieszyć proces poprzez klonowanie tego repozytorium GitHub.
Po sklonowaniu repozytorium GitHub uruchom to polecenie, aby zainstalować zależności dla usługi przesyłania obrazów:
npm install
Następnie zainstaluj Sharp, uruchamiając to polecenie:
npm install sharp
The Ostry moduł to wysokowydajna biblioteka Node.js do przetwarzania i manipulowania obrazami. Za pomocą Sharp możesz efektywnie zmieniać rozmiar, przycinać, obracać i wykonywać różne inne operacje na obrazach. Sharp ma również doskonałe wsparcie dla kompresji obrazów.
Techniki kompresji dla różnych formatów obrazów
Różne formaty obrazów mają różne techniki kompresji. Dzieje się tak dlatego, że każdy z nich jest przeznaczony do konkretnych zastosowań i wymagań, a także nadaje priorytet różnym czynnikom, w tym jakości, rozmiarowi pliku i funkcjom takim jak przezroczystość i animacje.
JPG/JPEG
JPEG to standard kompresji obrazu opracowany przez Joint Photographic Experts Group w celu kompresji zdjęć i realistycznych obrazów z ciągłymi tonami i gradientami kolorów. To używa algorytm kompresji stratnej, generując mniejsze pliki poprzez odrzucenie niektórych danych obrazu.
Aby skompresować obraz JPEG za pomocą programu Sharp, zaimportuj moduł Sharp i przekaż filePath lub bufor obrazu jako argument. Następnie zadzwoń do .jpeg metoda na Ostry instancja. Następnie przekaż obiekt konfiguracyjny za pomocą a jakość właściwość, która przyjmuje liczbę pomiędzy 0 I 100 jako wartość. Gdzie 0 zwraca najmniejszą kompresję o najniższej jakości i 100 zwraca największą kompresję z najwyższą jakością.
Możesz ustawić wartość w zależności od potrzeb. Aby uzyskać najlepsze wyniki kompresji, zachowaj wartość pomiędzy 50-80 aby osiągnąć równowagę pomiędzy rozmiarem i jakością.
Zakończ, zapisując skompresowany obraz w systemie plików za pomocą .do pliku metoda. Jako argument podaj ścieżkę pliku, do którego chcesz pisać.
Na przykład:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Domyślna wartość dla jakość Jest 80.
PNG
PNG (Portable Network Graphics) to format pliku obrazu znany z bezstratnej kompresji i obsługi przezroczystego tła.
Kompresja obrazu PNG za pomocą programu Sharp jest podobna do kompresji obrazu JPEG za pomocą programu Sharp. Jeśli jednak obraz jest w formacie PNG, należy wprowadzić dwie zmiany.
- Sharp przetwarza obrazy PNG przy użyciu formatu PNG metoda zamiast .jpeg metoda.
- The PNG metoda wykorzystuje poziom kompresji, która jest liczbą pomiędzy 0 I 9 zamiast jakość w swoim obiekcie konfiguracyjnym. 0 zapewnia najszybszą i największą możliwą kompresję, podczas gdy 9 zapewnia najwolniejszą i najmniejszą możliwą kompresję.
Na przykład:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Domyślna wartość dla Poziom kompresji Jest 6.
Inne formaty
Sharps obsługuje kompresję w różnych innych formatach obrazu, w tym:
- WebP: Kompresja obrazu WebP przy użyciu oprogramowania Sharp przebiega według tego samego procesu, co JPG. Jedyna różnica polega na tym, że musisz zadzwonić do strona internetowa metoda zamiast .jpeg metoda w instancji Sharp.
- SPRZECZKA: Kompresja obrazu TIFF (Tag Image File Format) w programie Sharp przebiega według tego samego procesu, co JPG. Jedyna różnica polega na tym, że musisz zadzwonić do sprzeczka metoda zamiast .jpeg metoda w instancji Sharp.
- AVIF: Kompresja obrazu AVIF (AV1 Image File Format) przy użyciu oprogramowania Sharp przebiega według tego samego procesu co JPG. Jedyna różnica polega na tym, że musisz zadzwonić do avif metoda zamiast .jpeg metoda w instancji Sharp. Domyślna wartość AVIF dla jakość Jest 50.
- HEIF: Kompresja obrazu HEIF (High Efficiency Image File Format) za pomocą oprogramowania Sharp przebiega według tego samego procesu co JPG. Jedyna różnica polega na tym, że musisz zadzwonić do heif metoda zamiast .jpeg metoda w instancji Sharp. Domyślna wartość AVIF dla jakość Jest 50.
Kompresja obrazów z ostrością
Jeśli sklonowałeś repozytorium GitHub, otwórz plik aplikacja.js plik i dodaj następujące importy.
const sharp = require("sharp");
const { exec } = require("child_process");
wykonawczy jest funkcją udostępnianą przez proces_dziecko moduł umożliwiający wykonywanie poleceń powłoki lub procesów zewnętrznych z poziomu aplikacji Node.js.
Możesz użyć tej funkcji, aby uruchomić polecenie porównujące rozmiary plików przed i po kompresji.
Następnie zamień POST „/single’ z poniższym blokiem kodu:
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);
}
});
Powyższy blok kodu implementuje technikę kompresji obrazów JPEG i porównuje rozmiary przed i po użyciu du Komenda.
The du polecenie to narzędzie uniksowe, które oznacza „wykorzystanie dysku”. Szacuje wykorzystanie przestrzeni plików i analizuje wykorzystanie dysku w katalogu lub zestawie katalogów. Kiedy uruchomisz du polecenie za pomocą -H flaga, wyświetla przestrzeń plików wykorzystywaną przez każdy podkatalog i jego zawartość w formie czytelnej dla człowieka.
Uruchom usługę przesyłania, uruchamiając to polecenie:
node app.js
Następnie przetestuj swoją aplikację wysyłając obraz JPG na trasę Lokalny Gospodarz:
Powinieneś zobaczyć odpowiedź podobną do tej:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Inne zastosowania modułu Sharp
Oprócz kompresji obrazów moduł Sharp może również zmieniać rozmiar, przycinać, obracać i odwracać obrazy zgodnie z żądanymi specyfikacjami. Obsługuje także regulację przestrzeni kolorów, operacje na kanałach alfa i konwersje formatów.
