Gatsby: [gatsby-remarque-images] Ajuster la qualité de l'image?

Créé le 28 oct. 2017 · 3Commentaires · Source: gatsbyjs/gatsby

Est-il possible de configurer la qualité d'image dans gatsby-remark-images ? J'utilise des captures d'écran de l'interface utilisateur dans Markdown, et la compression est si lourde qu'il y a un artefact considérable.

En regardant la source, je pense qu'elle pourrait être contrôlée via gatsby-plugin-sharp ?. README il mentionne:

Pour les JPEG, il génère des images progressives avec un niveau de qualité par défaut de 50.

Si c'est en fait ce qui définit la qualité, cela semble être une valeur par défaut raisonnable, mais est trop faible pour mes besoins.

De plus, y a-t-il une raison pour laquelle les options ne sont pas exposées dans le README ? Est-ce que les PR en ajoutant ces éléments aux différents README seraient intéressants?

documentation question or discussion

Source

dustinhorton

Commentaire le plus utile

Cela a également fonctionné pour moi dans le graphql:

graphql`
{
    allImageSharp {
      edges {
        node {
          ... on ImageSharp {
            fluid(quality: 100, maxWidth: 1600) {
              src
              srcSet
              originalImg
              originalName
              aspectRatio
              sizes
            }
          }
        }
      }
    }
}
`

De https://github.com/gatsbyjs/gatsby/issues/3984#issuecomment -364799710

taktran le 9 nov. 2018

👍6

Tous les 3 commentaires

Ouais, vous pouvez passer une clé quality avec un nombre de 0 à 100 pour remplacer la qualité par défaut de 50. Mais oui, documenter ceci et d'autres serait génial! Mon espoir a été que nous choisissions un moyen standard de documenter / valider les options du plugin afin que la documentation puisse être générée automatiquement à partir de cela. Si cette tâche un peu plus vaste d'enquêter sur cela semble être quelque chose que vous voulez aborder, ce serait un énorme avantage pour l'écosystème.

KyleAMathews le 28 oct. 2017

👍1

Merci! Cela a très bien fonctionné. Je ne sais pas comment démarrer cette tâche plus importante (y réfléchira un peu), mais passera certainement à certaines mises à jour de la documentation.

Pour tous ceux qui suivent, voici où vous devez définir cette clé:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              quality: 80,
            },
          },
        ],
      },
    },
  ],
}

dustinhorton le 28 oct. 2017

❤3 👍3

Cela a également fonctionné pour moi dans le graphql:

graphql`
{
    allImageSharp {
      edges {
        node {
          ... on ImageSharp {
            fluid(quality: 100, maxWidth: 1600) {
              src
              srcSet
              originalImg
              originalName
              aspectRatio
              sizes
            }
          }
        }
      }
    }
}
`

De https://github.com/gatsbyjs/gatsby/issues/3984#issuecomment -364799710

taktran le 9 nov. 2018

👍6

Cette page vous a été utile?

0 / 5 - 0 notes