Gatsby: [gatsby-comment-images] Отрегулировать качество изображения?

Созданный на 28 окт. 2017 · 3Комментарии · Источник: gatsbyjs/gatsby

Есть ли возможность настроить качество изображения в пределах gatsby-remark-images ? Я использую скриншоты пользовательского интерфейса в Markdown, и сжатие настолько жесткое, что возникают значительные артефакты.

Глядя на источник, я думаю, что им можно управлять с помощью gatsby-plugin-sharp ?. README там упоминается:

Для файлов JPEG он генерирует прогрессивные изображения с уровнем качества по умолчанию 50.

Если это на самом деле то, что устанавливает качество, это кажется разумным значением по умолчанию, но для моих целей оно слишком низкое.

Кроме того, есть ли причина, по которой параметры не отображаются в README ? Будет ли интересен PR, добавляющий их в различные README?

documentation question or discussion

Источник

dustinhorton

Самый полезный комментарий

Это сработало и для меня в graphql:

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

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

taktran 9 нояб. 2018

👍6

Все 3 Комментарий

Да, вы можете передать ключ quality с числом от 0 до 100, чтобы переопределить качество по умолчанию, равное 50. Но да, документирование этого и других было бы здорово! Я надеюсь, что мы выберем стандартный способ документирования / проверки параметров плагина, чтобы на его основе можно было автоматически создавать документацию. Если эта несколько более масштабная задача исследования этого вопроса звучит как то, чем вы хотите заняться, это будет огромным преимуществом для экосистемы.

KyleAMathews 28 окт. 2017

👍1

Благодаря! Это отлично сработало. Не уверен, как начать эту более крупную задачу (надумаю над этим), но обязательно воспользуюсь некоторыми обновлениями документации.

Для тех, кто следит за вами, вот где вам нужно определить этот ключ:

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

dustinhorton 28 окт. 2017

❤3 👍3

Это сработало и для меня в graphql:

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

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

taktran 9 нояб. 2018

👍6

Была ли эта страница полезной?

0 / 5 - 0 рейтинги