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%):
.SVG
? comme ils sont minusculesRéponses:
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.la source
pngcrush
et des programmes similaires peuvent certainement rendre le fichier plus petit.Cela ne répond probablement pas à votre question. Quelques alternatives possibles ...
Avez-vous plutôt pensé au CSS:
Ou peut-être pourriez-vous utiliser la technique SVG base64 ( outil générateur ici ):
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.
la source
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:
la source
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.
http://en.wikibooks.org/wiki/GIMP/Saving_as_JPEG
Vous pouvez également réduire les artefacts en contrôlant le sous-échantillonnage
http://www.ampsoft.net/webdesign-l/jpeg-compression.html
la source
Essayez d'ajouter du bruit pour minimiser les bandes:
Photoshop:
Image > Fill... >
et utilisez ces valeurs:Filter > Noise > Add Noise... >
. Ces valeurs ont bien fonctionné pour moi: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).
la source