Jak zmniejszyć rozmiar zdjęcia nie tracąc jakości?

Cześć,

W mojej aplikacji jest możliwość dodania zdjęć przez użytkownika, które następnie zapisywane są w bazie danych.

Wiadomo chcę żeby te zdjęcia miały jak najmniejszy rozmiar (KB), przy zachowaniu możliwie jak najlepszej jakości.

W tym celu używam biblioteki bam.tech/react-native-image-resizer. Jednakże nie spełnia ona moich oczekiwań, gdyż zdjęcia zajmują dużo KB (około 120), a gdy ustawie odpowiednio mniejszą jakość zdjęcia zajmują mniej ale są niewyraźne.

Tak wygląda kod który optymalizuje zdjęcia. Parametr 40 to quality, a 500 to rozmiar zdjęcia.

const response = await ImageResizer.createResizedImage(
    request.uri,
    500,
    500,
    'JPEG',
    40,
    undefined,
    undefined,
    undefined,
    {
        mode: 'contain'
    }
);

Czy ktoś z was wie może jak poprawnie zmniejszyć rozmiar zdjęcia, nie tracąc zbyt wiele na jego jakości?

Moje API to .net więc może tam byłoby lepiej to zrobić?

Z góry dzięki za pomysły.

Jest mnóstwo API, które to już robią, np. Cloudinary.
Z bibliotek to ImageSharp. I uważam, że lepiej, żeby się serwer tym zajął, a nie klient.

jeszcze teraz różne AI są, co mogą robić upscale obrazka.

Zmień obraz rastrowy na vektorowy jeśli idzie wtedy, możesz dowolnie skalować obraz bez zmiany jego wielkości.

Zmniejszając obraz rastrowy(downscaling) to tracisz trochę danych, w końcu miałeś 3x3, a zrobiłeś 2x2 to zgubiłeś 5 pixeli 3x3=9, 2x2=4, 9-4=5, w pewnym momencie będzie niewyraźne.
Upscaling to musisz wypełnić brakujące pixele wykorzystując jakieś metody jak uśrednianie czy sieci neuronowe to aproxymacji brakujących pixeli, bo takie proste metody są przeciętne.

Wraz ze zmniejszaniem jakości rastrowego obrazu to zawsze musisz się liczyć ze zmniejszeniem ilości szczegółów.
Później jeszcze format kompresji też wpływa na utratę jakości, lub nie zależy co zastosujesz.
Wiele algorytmów pozwala tak skompresować, że dla ludzkiego oka utracone dane są niezauważalne i dzięki temu mniej ważą.

1. Nie jestem fanem tego formatu, ale podobno zamiast JPEG więcej miejsca zaoszczędzisz zapisując w WEBP => https://sellingo.pl/blog/czy-sa-pliki-webp-i-dlaczego-warto-z-nich-korzystac/
2. W GIMPie przy skalowaniu jest kilka opcji interpolacji. Przeczytaj sobie na czym one polegają i użyj biblioteki, która ma zaimplementowane takie szczegóły:
   
3. Zobacz sobie artykuł ImageMagick: https://imagemagick.org/Usage/filter/
   Możesz z niego wyciągnąć wartościowe z przykłady. A może nawet użyjesz go w swoim projekcie.
   Z tego co patrzę, to można go używać w przeróżnych językach, więc może uda Ci się go wdrożyć też do mobilnego projektu: https://imagemagick.org/script/develop.php

RideorDie napisał(a):

Wiadomo chcę żeby te zdjęcia miały jak najmniejszy rozmiar (KB), przy zachowaniu możliwie jak najlepszej jakości.

Podziel zdjęcia na segmenty i heurystycznie skompresuj z różnymi ustawieniami parametru quality a następnie zrób porównanie pomiędzy segmentem przed i po kompresji żeby dobrać optymalną wartość. W wersji trudniejszej możesz zastosować segmentację z nierównymi segmentami wspomagając się np. detekcją obszarów o małym zróżnicowaniu koloru.

A jeśli chcesz wersję najprostszą w implementacji to po prostu zmień format na HEIC.

Najpierw bym zobaczył w już istniejących narzędziach czy one potrafią zmniejszyć wagę (co nazywasz KB) zdjęcia bez utraty jakości, np. https://www.freecodecamp.org/news/how-to-resize-an-image-without-losing-quality/.

Bo prawdopodobnie wiele nie zyskasz a narobisz się jak osioł.

Możliwe że prościej jest zrobić tak że duże zdjęcia nie będą bolały twojej infry.

Najprościej będzie użyć formatu lepszego niż jpg, np heic albo webp. W webp nawet bezstratna kompresja jest lepsza od jpeg, a z moich doświadczeń wynika, że nawet przy stratnej kompresji można spokojnie zaoszczędzić około 30 - 40%

A tak btw, ty zapisujesz zdjęcia fizyczne w bazie danych? To raczej zły pomysł a rozmiar rzędu 120 kB to nie jest dużo. Jak ma zdjęcie to jest nic