Come faccio a convertire uno sfondo sfocato .png in uno .jpg compresso senza introdurre artefatti?

Attualmente sto affrontando un problema di qualità dell'immagine per l'immagine di sfondo del mio sito Web.

Ho una grande immagine di sfondo sfocata che mi piacerebbe usare ma vorrei che fosse il più piccolo possibile nelle dimensioni del sito web.

Per averlo nella sua massima qualità (png), è di circa 200kb.

Posso ridurlo a circa 100kb come JPG, ma la qualità è ridotta, cosa che ci si aspetta, ma ci sono linee orribili che guardano attorno al lineare che lo rendono terribile.

C'è un modo speciale per convertire questo png in un jpg ma impedire all'immagine di avere questi difetti?

Ecco le immagini:

PNG:

Qualità JPG (100%):

JPEG non è una compressione senza perdita

La compressione JPEG è considerata una compressione con perdita anche se impostata al 100% di qualità si perde una certa qualità. Ecco perché per una grafica semplice come interfacce e sfondi dell'interfaccia utente è generalmente meglio utilizzare un formato senza perdita di dati come PNG.

200kb non è così grande nel 2014/2015

Mentre sarebbe un'idea per ridurre il più possibile le dimensioni dello sfondo, è importante notare che 200kb non è così grande per la maggior parte delle connessioni a banda larga. Potresti servire una versione diversa per cellulari e tablet utilizzando le query multimediali CSS .

Rendere un file png ancora più piccolo

Photoshop e altri pacchetti di vernici utilizzano la compressione PNG standard, probabilmente è possibile ridurre i 200kb a un valore ancora inferiore utilizzando PngOptimizer o Smush It del servizio online di Yahoo . Ridurre la dimensione del file anche più in basso non ridurrà la qualità in quanto è un formato senza perdita ... ottimizza in modo basilare il codice riducendolo ulteriormente, confrontandolo con un file ZIP o RAR, questi file compressi ma non riducono la qualità del contenuto.

Considerando l'utilizzo di una sfumatura a strisce

Un'altra possibile soluzione potrebbe essere quella di utilizzare un gradiente PNG sottile di 1px e quindi l'altezza della pagina, quindi duplicarlo usando background-repeat, potresti anche considerare di usare CSS per generare il Gradiente per te, ma ovviamente il tuo limite di non essere in grado di usare ombre e altre modifiche.

Questo probabilmente non risponde alla tua domanda. Alcune possibili alternative ...

Hai invece considerato CSS:

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

O forse potresti usare la tecnica SVG base64 ( strumento generatore qui ):

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

Hai provato a utilizzare un PNG ancora più piccolo e a consentire all'algoritmo di upscaling nativo del browser di ingrandirlo? Ciò potrebbe ridurre le dimensioni del file ed eliminare gli artefatti JPG.

Ti suggerisco di dare un'occhiata a Kraken.io , hanno un ottimizzatore di immagini. Le immagini nel tuo argomento diminuiscono del 45% in dimensioni, senza essere visibili alla vista!

Potresti anche usare semplicemente CSS, colorzilla ha un ottimo strumento per creare i CSS giusti per tutti i browser.

Se ti senti a tuo agio con un'immagine sfumata, lascia cadere il colore, rendilo bianco e nero, quindi dai a div / body / element lo sfondo in questo modo:

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

Alcuni editor di immagini come GIMP consentono di applicare l'effetto smoothing e di controllare la compressione durante il salvataggio di un jpeg.

Livellamento: impostando l'opzione di livellamento su un valore diverso da zero, l'immagine sarà leggermente uniforma. Ciò riduce gli artefatti fuzzy dalla compressione e aiuta con la compressione. Un'impostazione di 0,10-0,15 rimuove una buona parte dei manufatti senza sbavare i bordi.

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

Potresti anche essere in grado di ridurre gli artefatti controllando il sottocampionamento

Mentre il sottocampionamento standard è generalmente adeguato per la maggior parte delle immagini, fornendo un buon rapporto tra qualità dell'immagine e dimensione del file, ci sono alcune situazioni in cui l'uso del sottocampionamento (4: 4: 4) fornisce un notevole aumento della qualità dell'immagine, anche se utilizzare un rapporto di compressione più elevato per mantenere le dimensioni del file. I casi più importanti si verificano quando l'immagine contiene alcune parti con dettagli precisi, come il testo su uno sfondo uniforme e le immagini che contengono colori quasi piatti.

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

Prova ad aggiungere rumore per ridurre al minimo le strisce:

Photoshop:

1. Crea nuovo livello.
2. Vai a: Image > Fill... >e usa questi valori:

3. Cambia il metodo di fusione del livello in Overlay
4. Vai a: Filter > Noise > Add Noise... >. Questi valori hanno funzionato bene per me:

5. Regola l'opacità del livello a tuo piacimento. Il 22% era in qualche modo OK e il JPG risultante è:

Quindi nessuna brutta fascia, dimensioni più piccole ma a scapito del rumore. I file sono notevolmente più pesanti rispetto alla versione non rumorosa (circa 100kb), ma metà del PNG originale. In realtà sono un po 'sorpreso che il tuo PNG fosse così grande.

Un altro suggerimento:

Se non vuoi aggiungere rumore, cerca di lavorare ovunque nello spazio colore sRGB, che offre la gamma più ricca per gli schermi dei monitor (meno bande).