web-dev-qa-db-fra.com

Comment réduire la taille du fichier PNG pour le Web?

J'ai un fichier PNG-24 avec un arrière-plan transparent et sa taille actuelle est de 1,5 Mo. Comment réduire la taille ou utiliser le format de fichier PNG-8 tout en conservant la même qualité?

enter image description here

Fichier PNG à partir d'ici: http://www19.zippyshare.com/v/69590430/file.html

Exemple d'image téléchargée J'ai essayé toutes les suggestions, mais aucun bon résultat, merci de le signaler

merci

16
Welliam

Le format PNG est un format de compression sans perte. Sans changer le contenu source du fichier, il n’est guère possible d’augmenter la compression au-delà du niveau de compression le plus élevé par défaut. Le seul moyen réel de réduire la taille consiste à modifier l'image, soit en réduisant la résolution, soit en profondeur de couleur afin que la compression PNG soit moins complexe.

Si vous souhaitez des niveaux de compression élevés pour l'image et que vous ne vous préoccupiez pas du stockage de données sans perte, utilisez le format JPEG.

6
mikebabcock

ÉMEUTE peut faire cela, et bien plus encore.

L'outil d'optimisation d'image Radical (RIOT en abrégé) est un optimiseur d'image gratuit qui vous permettra d'ajuster visuellement les paramètres de compression tout en conservant une taille de fichier minimale.

Il utilise une interface côte à côte (vue double) ou une vue unique pour comparer l’original à l’image optimisée en temps réel et voir instantanément la taille du fichier obtenu.

L'optimiseur d'image est léger, rapide et simple à utiliser, mais puissant pour les utilisateurs avancés. Vous serez en mesure de contrôler la compression, le nombre de couleurs, les paramètres de métadonnées et bien plus encore, et de sélectionner le format d'image (JPEG, GIF ou PNG) pour votre fichier de sortie.

Une autre possibilité consiste à utiliser une combinaison de pngquant, pngout et pngcrush, comme décrit ici , mais à partir de la ligne de commande.

Voici les instructions pour convertir les images png24 en png8 pour IE6, depuis la ligne de commande à l'aide d'outils à source ouverte (je pense) pngquant + pngout + pngcrush.

1- quantifier une image en 256 (donc, fondamentalement, le png8 a l’air de merde avec de grands sprites ou des sprites avec une large gamme de couleurs).

pngquant 256 some_24_bit.png

2- convertir une image d'un png24 en png8

pngout -c3 -d8 -y -force some_24_bit.png some_8_bit.png

3- compresse l'image

pngcrush some_8_bit.png -bit_depth 8 -brute -rem alla -reduce some_8_bit_small.png

9
Laurent Parenteau

Essayez TinyPNG

De leur site web:

Comment ça marche?

Lorsque vous téléchargez un fichier PNG (Portable Network Graphics), des couleurs similaires dans votre image sont combinées. Cette technique s'appelle la "quantification". Le nombre de couleurs étant réduit, les fichiers PNG 24 bits peuvent être convertis en images couleur indexées 8 bits beaucoup plus petites. Toutes les métadonnées inutiles sont également supprimées. Le résultat: de minuscules fichiers PNG prenant en charge la transparence à 100%.

Ils ont deux options:

  • Glissez-déposez les images sur leur site Web et elles seront automatiquement traitées. Service gratuit. (Jusqu'à 20 images. Max 5 Mo chacune)
  • Plugin Photoshop. Cela coûte $.

Je n'ai pas essayé le plugin PS, je ne peux donc pas vous dire à quel point cela fonctionne.

6
Dhaust

Si la ligne de commande ne vous dérange pas, regardez OptiPNG , cela pourrait bien être ce que vous cherchez.

OptiPNG est un optimiseur PNG qui recompresse les fichiers image dans un format plus petit, sans perdre aucune information. Ce programme convertit également les formats externes (BMP, GIF, PNM et TIFF) en fichiers PNG optimisés, et effectue des contrôles et des corrections d’intégrité PNG.

5
Renan

Une bonne idée pour gérer le format PNG avec canal alpha dans le contexte du développement de sites Web serait de laisser le serveur faire le tour pour vous: séparez dynamiquement les données d'image du canal alpha sur le serveur, optimisez les deux séparément et recombinez-les à l’aide de l’élément canvas et de JavaScript dans le navigateur. Ta-Da! Fonctionne avec tous les navigateurs modernes.

Voici comment cela se fait:

http://headers-already-sent.com/artikel/shrinkimage-1/

Vous trouverez également un package Zip complet avec le script PHP et un plugin jQuery. Dites-nous ce que vous en pensez.

3
Andreas Ollmann

Utilisez la combinaison de pngout ET deflopt . pngout déterminera automatiquement si vos couleurs PNG s’intègrent dans PNG-8 et l’utilisera. deflopt supprimera quelques octets supplémentaires de l'image déjà optimisée - il est utile de travailler avec toutes les données déflatées et le format PNG en fait partie.

3
Oleg V. Volkov

Si vous avez vraiment besoin de réduire une image et que toutes les suggestions simples ne fonctionnent pas, la réponse finale consiste à diviser l'image en éléments compressibles et à les recombiner sur le client à l'aide de scripts.

L'image de la question ressemble à un dégradé de couleurs avec des lignes verticales et quelques taches/bruits. Casser cela dans les couches suivantes:

  1. Le dégradé de couleur sans lignes ni bruit. Cela se compresse bien en PNG et très bien en JPEG. Encore mieux, utilisez JavaScript pour générer le dégradé de couleur sur le client. Vous pourriez probablement le faire en moins de 200 octets de JS.
  2. Les lignes verticales sans couleur ni bruit. Vous pouvez le réduire à un seul canal 4 bits (alpha ou gris). Vous n'avez besoin que d'une image de 1 pixel, que vous pouvez étirer. Cela se compresserait très bien en PNG.
  3. Le bruit. Encore une fois, tout ce dont vous avez besoin est d’un seul canal 4 bits (alpha ou gris). Sans couleur ni lignes, cela devrait très bien se compresser en PNG ou JPEG.

Combinez les calques en une seule image avec JavaScript, et votre "image" entière ne doit pas dépasser 15 Ko.

Ce genre de travail était la norme de l’industrie dans les Jeux depuis des décennies, et l’est toujours. Le grand avantage est que Photoshop contient déjà tous ces calques distincts si vous avez créé votre image comme un professionnel.

1
Sophit

Les fichiers PNG standard sont déjà le format d'image le plus compressé que vous puissiez utiliser. C'est pourquoi les fichiers PNG sont tellement utilisés pour les images sur des sites Web, notamment à des fins de conception.

Mais il existe toujours un moyen de compresser davantage les fichiers PNG. en diminuant le nombre de couleurs utilisées dans l'image. Cela peut souvent réduire la taille du fichier jusqu'à 70% ou même davantage.

Le meilleur logiciel libre automatisé avec le pourcentage de compression global le plus élevé que j'ai trouvé pour cela est FileOptimizer qui utilise plusieurs moteurs (ie. PngOptimizer, PNGOUT, pngwolf, etc.). ) pour compresser l'image à la plus petite taille possible.

Voici un autre outil en ligne qui a donné de bons résultats: http://www.giftofspeed.com/png-compressor/

1
William Dresker

Me laisser présenter FileOptimizer . Il combine diverses méthodes d’optimisation d’image (la suppression d’EXIF pour la sauvegarde de quelques octets supplémentaires pouvant être désactivée).

Résultats du test et comparaison avec d'autres solutions.

enter image description here

1
rluks

ScriptPNG http://css-ig.net/scriptpng

il vous donne environ 10 options différentes, y compris avec perte! J'ai essayé un tas et ce fichier batch Windows (avec un tas de .exes) est super

Personnellement, je l'utilise pour compresser à 8 bits avec perte. Je ne sais pas trop comment ça fonctionne, mais mes captures d'écran se ressemblent. Je l'utilise pour compresser des screenshots. J'ai eu environ 2 Go de pngs, maintenant seulement 700 Mo

0
Mikey