Gatsby: [gatsby-comment-images] ¿Ajustar la calidad de imagen?

Creado en 28 oct. 2017  ·  3Comentarios  ·  Fuente: gatsbyjs/gatsby

¿Existe la posibilidad de configurar la calidad de la imagen dentro de gatsby-remark-images ? Estoy usando capturas de pantalla de la interfaz de usuario en Markdown, y la compresión es tan dura que hay una considerable cantidad de artefactos.

Mirando la fuente, creo que podría controlarse a través de gatsby-plugin-sharp ?. README allí se menciona:

Para los archivos JPEG, genera imágenes progresivas con un nivel de calidad predeterminado de 50.

Si esto es lo que establece la calidad, parece un valor predeterminado razonable, pero es demasiado bajo para mis propósitos.

Además, ¿hay alguna razón por la que las opciones no estén expuestas en el archivo README ? ¿Sería de interés que los RP los agreguen a los distintos README?

documentation question or discussion

Comentario más útil

Esto también funcionó para mí en 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

Todos 3 comentarios

Sí, puede pasar una clave quality con un número del 0 al 100 para anular la calidad predeterminada de 50. ¡Pero sí, documentar esto y otros sería genial! Mi esperanza ha sido que elijamos una forma estándar de documentar / validar las opciones de complementos para que la documentación se pueda generar automáticamente a partir de esto. Si esta tarea algo más grande de investigar esto suena como algo que desea abordar, sería un gran beneficio para el ecosistema.

¡Gracias! Eso funcionó muy bien. No estoy seguro de cómo comenzar esa tarea más grande (lo pensaré un poco), pero seguramente pasará algunas actualizaciones de la documentación.

Para cualquiera que lo siga, aquí es donde debe definir esa clave:

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

Esto también funcionó para mí en 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

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

jimfilippou picture jimfilippou  ·  3Comentarios

kalinchernev picture kalinchernev  ·  3Comentarios

ghost picture ghost  ·  3Comentarios

ferMartz picture ferMartz  ·  3Comentarios

KyleAMathews picture KyleAMathews  ·  3Comentarios