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

15

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:

entrez la description de l'image ici

Qualité JPG (100%):

entrez la description de l'image ici

Aki
la source
Quelles sont les dimensions de cette image?
MrWhite
est 200kb trop gros de nos jours?
SaturnsEye
Il semble que l'outil que j'ai utilisé à l'origine pour compresser l'image n'était pas sans perte mais était avec perte (tinypng.com). C'était la raison pour laquelle le png était terrible lorsqu'il était compressé. Quoi qu'il en soit, toutes vos réponses ont aidé. Merci!
Aki
1
@SaturnsEye Oui, pour une image non essentielle, c'est absolument le cas. Pensez juste aux visiteurs mobiles. Pour les images essentielles, bien sûr, ça va.
Kjeld Schmidt
1
Pour mobile, n'envisageriez-vous pas d'utiliser .SVG? comme ils sont minuscules
SaturnsEye

Réponses:

13

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.

Simon Hayter
la source
Ce PNG est créé avec Fireworks et contient une petite quantité de "cruft". pngcrushet des programmes similaires peuvent certainement rendre le fichier plus petit.
usr2564301
3
Oui, 200 Ko sont importants si votre ordinateur portable est connecté à une connexion sans fil, en particulier en dehors du Japon, de la République de Corée et de l'Europe occidentale. Il est courant sur les marchés du dernier kilomètre cellulaire et par satellite de facturer le client par le bit.
Damian Yerrick
15

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.

poiré
la source
8

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')

la source
1

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

Matthew Lock
la source
0

Essayez d'ajouter du bruit pour minimiser les bandes:

Photoshop:

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

entrez la description de l'image ici

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

entrez la description de l'image ici

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

entrez la description de l'image ici

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).

ellockie
la source
Je peux voir un changement de couleur dans mon image ... Je suppose que cela concerne les profils de couleur car cette méthode ne devrait pas affecter la couleur de l'illustration.
ellockie