Jak przekonwertować rozmyte tło .png na skompresowane tło .jpg bez wprowadzania artefaktów?

Obecnie mam do czynienia z problemem jakości obrazu mojego tła witryny.

Mam duży zamazany obraz tła, którego chciałbym użyć, ale chciałbym, aby był tak mały, jak to możliwe, dla strony internetowej.

Aby mieć go w najwyższej jakości (png), ma około 200 KB.

Mogę sprowadzić go do około 100 KB jako JPG, ale jakość jest obniżona, co jest spodziewane, ale wokół linii są okropnie wyglądające linie, które sprawiają, że wygląda okropnie.

Czy istnieje sposób na specjalny sposób konwersji tego pliku png na plik jpg, ale nie pozwala obrazowi mieć tych wad?

Oto zdjęcia:

PNG:

Jakość JPG (100%):

JPEG nie jest kompresją bezstratną

Kompresja JPEG jest uważana za kompresję stratną, nawet jeśli jest ustawiona na 100% jakości , traci się na jakości. Dlatego w przypadku prostych grafik, takich jak interfejsy i tła interfejsu użytkownika, ogólnie lepiej jest używać formatu bezstratnego, takiego jak PNG.

200kb nie jest aż tak duże w 2014/2015

Wprawdzie warto byłoby maksymalnie zmniejszyć rozmiar tła, ale należy pamiętać, że 200 kb nie jest aż tak duże dla większości połączeń szerokopasmowych. Możesz podać inną wersję dla telefonów komórkowych i tabletów, używając zapytań o media css .

Czynienie pliku png jeszcze mniejszym

Photoshop i inne pakiety farb korzystają ze standardowej kompresji PNG, prawdopodobnie możesz zmniejszyć to 200 KB do jeszcze mniejszych za pomocą PngOptimizer lub usługi online Yahoo Smush It . Zmniejszenie rozmiaru pliku jeszcze niżej nie obniży jakości, ponieważ jest to format bezstratny ... po prostu optymalizuje kod, zmniejszając go dalej, porównując go do pliku ZIP lub RAR, te pliki kompresują, ale nie obniżają jakości treści.

Rozważenie zastosowania gradientu paskowego

Innym możliwym rozwiązaniem może być użycie cienkiego gradientu PNG o wielkości 1 piksela, a następnie wysokości strony, a następnie zduplikowanie go za pomocą background-repeat, możesz nawet rozważyć użycie CSS do wygenerowania gradientu dla Ciebie, ale oczywiście jesteś ograniczony możliwość korzystania z cieni i innych poprawek.

To prawdopodobnie nie odpowiada na twoje pytanie. Niektóre możliwe alternatywy ...

Czy zamiast tego rozważałeś CSS:

background: linear-gradient(45deg, #3d667c, #1d283e);

A może możesz użyć techniki SVG base64 ( tutaj narzędzie generatora ):

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="g932" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%"><stop stop-color="#3D667C" offset="0"/><stop stop-color="#1D283E" offset="1"/></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#g932)" /></svg>

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzNENjY3QyIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzFEMjgzRSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzkzMikiIC8+Cjwvc3ZnPg==);

Czy próbowałeś użyć jeszcze mniejszego PNG i pozwolić na powiększenie go przez natywny algorytm skalowania przeglądarki? Może to zmniejszyć rozmiar pliku, a także wyeliminować artefakty JPG.

Sugeruję sprawdzenie Kraken.io , mają one optymalizator obrazu. Obrazy w twoim temacie zmniejszają się o 45%, bez widoczności dla oka!

Możesz także użyć css, colorzilla ma ładne narzędzie do tworzenia odpowiedniego css dla wszystkich przeglądarek.

Jeśli czujesz się komfortowo z obrazem gradientowym, upuść kolor, ustaw go jako czarno-biały, a następnie nadaj elementowi div / body / element tło w następujący sposób:

background: blue url('images/gradient.png')

Niektóre edytory obrazów, takie jak GIMP, umożliwiają stosowanie wygładzania, a także kontrolę kompresji podczas zapisywania JPEG.

Wygładzanie: Ustawienie opcji wygładzania na wartość niezerową spowoduje nieznaczne wygładzenie obrazu. Zmniejsza to rozmyte artefakty z kompresji i pomaga w kompresji. Ustawienie 0,10-0,15 usuwa znaczną część artefaktów bez rozmazywania krawędzi.

http://en.wikibooks.org/wiki/GIMP/Saving_as_JPEG

Możesz także być w stanie zmniejszyć artefakty, kontrolując podpróbkowanie

Podczas gdy standardowe podpróbkowanie jest zwykle odpowiednie dla większości obrazów, zapewniając dobry stosunek jakości obrazu do rozmiaru pliku, istnieją pewne sytuacje, w których brak podpróbkowania (4: 4: 4) zapewnia zauważalny wzrost jakości obrazu, nawet jeśli użyj wyższego współczynnika kompresji, aby zachować rozmiar pliku. Najbardziej znaczącymi przypadkami są sytuacje, gdy obraz zawiera fragmenty z drobnymi szczegółami, takie jak tekst na jednolitym tle i obrazy, które mają prawie płaskie kolory.

http://www.ampsoft.net/webdesign-l/jpeg-compression.html

Spróbuj dodać szum, aby zminimalizować pasy:

Photoshop:

1. Utwórz nową warstwę.
2. Przejdź do: Image > Fill... >i użyj tych wartości:

3. Zmień tryb mieszania warstwy na Overlay
4. Przejdź do: Filter > Noise > Add Noise... >. Te wartości działały dla mnie dobrze:

5. Dostosuj krycie warstwy do własnych upodobań. 22% było w porządku, a wynikowy JPG to:

Więc nie ma nieprzyjemnych pasków, mniejszy rozmiar, ale kosztem hałasu. Pliki są znacznie cięższe w porównaniu z wersją bez hałasu (około 100 kb), ale stanowią połowę oryginalnego PNG. Właściwie jestem trochę zaskoczony, że twój PNG był tak duży.

Jeszcze jedna sugestia:

Jeśli nie chcesz dodawać szumu, upewnij się, że pracujesz wszędzie w przestrzeni kolorów sRGB, która zapewnia najbogatszą gamę ekranów monitorów (mniej pasm).