Comment convertir un arrière-plan flou .png en un arrière-plan .jpg compressé sans introduire d'artefacts?

Je suis actuellement confronté à un problème de qualité d'image pour l'image d'arrière-plan de mon site Web.

J'ai une grande image d'arrière-plan flou que j'aimerais utiliser, mais je voudrais qu'elle soit aussi petite que possible en taille pour le site Web.

Pour l'avoir dans sa plus haute qualité (png), c'est environ 200kb.

Je peux le réduire à environ 100 Ko en JPG, mais la qualité est réduite, ce qui est attendu, mais il y a des lignes horribles autour du linéaire qui le rendent terrible.

Existe-t-il un moyen spécial de convertir ce png en jpg, mais d'empêcher l'image d'avoir ces défauts?

Voici les images:

PNG:

Qualité JPG (100%):

JPEG n'est pas une compression sans perte

La compression JPEG est considérée comme une compression avec perte, même lorsqu'elle est définie sur 100% de qualité, vous perdez une certaine qualité. C'est pourquoi, pour les graphiques simples tels que les interfaces UI et les arrière-plans, il est généralement préférable d'utiliser un format sans perte tel que PNG.

200 Ko n'est pas si gros en 2014/2015

Bien qu'il serait préférable de réduire la taille de l'arrière-plan autant que possible, il est important de noter que 200 Ko n'est pas si grand pour la plupart des connexions à large bande. Vous pouvez servir une version différente pour les mobiles et les tablettes à l'aide de requêtes multimédias CSS .

Rendre un fichier png encore plus petit

Photoshop et d'autres packages de peinture utilisent la compression PNG standard, vous devez probablement réduire ces 200 Ko à encore moins en utilisant PngOptimizer ou le service en ligne de Yahoo Smush It . Réduire la taille du fichier encore plus bas ne diminuera pas la qualité car c'est un format sans perte ... il optimise simplement le code en le réduisant davantage, le compare à un fichier ZIP ou RAR, ces fichiers compressés mais ne réduisent pas la qualité du contenu.

Envisager d'utiliser un dégradé de rayures

Une autre solution possible pourrait être que vous utilisiez un dégradé PNG mince de 1 px de diamètre, puis la hauteur de la page, que vous dupliquiez ensuite en utilisant background-repeat, vous pourriez même envisager d'utiliser CSS pour générer le dégradé pour vous, mais bien sûr, vous n'êtes pas limité par pouvoir utiliser des ombres et autres réglages.

Cela ne répond probablement pas à votre question. Quelques alternatives possibles ...

Avez-vous plutôt pensé au CSS:

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

Ou peut-être pourriez-vous utiliser la technique SVG base64 ( outil générateur ici ):

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

Avez-vous essayé d'utiliser un PNG encore plus petit et de permettre à l'algorithme de mise à l'échelle native du navigateur de l'agrandir? Cela pourrait réduire la taille du fichier et éliminer les artefacts JPG.

Je vous suggère de consulter Kraken.io , ils ont un optimiseur d'image. Les images de votre sujet diminuent de 45%, sans être visibles à l'œil nu!

Vous pouvez également simplement utiliser css, colorzilla a un bel outil pour créer le bon css pour tous les navigateurs.

Si vous vous sentez à l'aise avec une image en dégradé, déposez la couleur, rendez-la en noir et blanc, puis donnez à div / body / element l'arrière-plan comme suit:

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

Certains éditeurs d'images tels que GIMP vous permettent d'appliquer un lissage ainsi que de contrôler la compression lors de l'enregistrement d'un fichier JPEG.

Lissage: la définition de l'option de lissage sur une valeur non nulle lisse légèrement l'image. Cela réduit les artefacts flous de la compression et aide à la compression. Un réglage de 0,10-0,15 supprime une bonne partie des artefacts sans tacher les bords.

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

Vous pouvez également réduire les artefacts en contrôlant le sous-échantillonnage

Bien que le sous-échantillonnage standard soit généralement adéquat pour la plupart des images, offrant un bon rapport entre la qualité de l'image et la taille du fichier, il existe certaines situations dans lesquelles aucun sous-échantillonnage (4: 4: 4) n'augmente sensiblement la qualité de l'image, même si vous utilisez un taux de compression plus élevé afin de conserver la taille du fichier. Les cas les plus notables sont lorsque l'image contient des parties avec des détails fins, comme du texte sur un fond uniforme et des images qui contiennent des couleurs presque plates.

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

Essayez d'ajouter du bruit pour minimiser les bandes:

Photoshop:

1. Créez un nouveau calque.
2. Allez à: Image > Fill... >et utilisez ces valeurs:

3. Changer le mode de fusion du calque en superposition
4. Aller à: Filter > Noise > Add Noise... >. Ces valeurs ont bien fonctionné pour moi:

5. Ajustez l'opacité du calque à votre convenance. 22% était plutôt bien et le JPG résultant est:

Donc pas de bandes désagréables, de plus petite taille mais au détriment du bruit. Les fichiers sont également beaucoup plus lourds que la version non bruyante (environ 100 Ko), mais la moitié du PNG d'origine. En fait, je suis un peu surpris que votre PNG soit si grand.

Encore une suggestion:

Si vous ne voulez pas ajouter de bruit, essayez de vous assurer que vous travaillez partout dans l'espace colorimétrique sRGB, qui offre la gamme la plus riche pour les écrans de contrôle (moins de bandes).