Skip to content

Commit

Permalink
feat(gatsby-plugin-sharp): add defaultQuality option
Browse files Browse the repository at this point in the history
* Add defaultQuality option to gatsby-plugin-sharp

* Update docs for defaultQuality option

* Remove default quality value from gatsby-transformer-sharp

* Remove check for gatsby-tranformer-sharp default quality value

* Update setting a default quality in README

Co-Authored-By: sbardian <sbardian@gmail.com>
  • Loading branch information
sbardian authored and sidharthachatterjee committed Feb 19, 2019
1 parent a977a22 commit 8af9826
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 11 deletions.
5 changes: 5 additions & 0 deletions packages/gatsby-plugin-sharp/README.md
Expand Up @@ -32,6 +32,7 @@ plugins: [
options: {
useMozJpeg: false,
stripMetadata: true,
defaultQuality: 75,
},
},
]
Expand Down Expand Up @@ -249,6 +250,10 @@ fixed(
}
```

### Setting a default quality

You can pass a default image quality to `sharp` by setting the `defaultQuality` option.

### Using MozJPEG

You can opt-in to use [MozJPEG][16] for jpeg-encoding. MozJPEG provides even
Expand Down
16 changes: 8 additions & 8 deletions packages/gatsby-plugin-sharp/src/index.js
Expand Up @@ -45,6 +45,7 @@ exports.setBoundActionCreators = actions => {
const pluginDefaults = {
useMozJpeg: process.env.GATSBY_JPEG_ENCODER === `MOZJPEG`,
stripMetadata: true,
defaultQuality: 50,
}
let pluginOptions = Object.assign({}, pluginDefaults)
exports.setPluginOptions = opts => {
Expand Down Expand Up @@ -95,8 +96,8 @@ const generalArgs = {
sizeByPixelDensity: false,
}

const healOptions = (args, defaultArgs) => {
let options = _.defaults({}, args, defaultArgs, generalArgs)
const healOptions = ({ defaultQuality: quality }, args, defaultArgs) => {
let options = _.defaults({}, args, { quality }, defaultArgs, generalArgs)
options.quality = parseInt(options.quality, 10)
options.pngCompressionLevel = parseInt(options.pngCompressionLevel, 10)
options.pngCompressionSpeed = parseInt(options.pngCompressionSpeed, 10)
Expand Down Expand Up @@ -125,7 +126,6 @@ const healOptions = (args, defaultArgs) => {

let totalJobs = 0
const processFile = (file, jobs, cb, reporter) => {
// console.log("totalJobs", totalJobs)
bar.total = totalJobs

let imagesFinished = 0
Expand Down Expand Up @@ -372,7 +372,7 @@ const queueJob = (job, reporter) => {
}

function queueImageResizing({ file, args = {}, reporter }) {
const options = healOptions(args, {})
const options = healOptions(pluginOptions, args, {})
// Filter out false args, and args not for this extension and put width at
// end (for the file path)
const pairedArgs = _.toPairs(args)
Expand Down Expand Up @@ -476,7 +476,7 @@ function queueImageResizing({ file, args = {}, reporter }) {
}

async function generateBase64({ file, args, reporter }) {
const options = healOptions(args, { width: 20 })
const options = healOptions(pluginOptions, args, { width: 20 })
let pipeline
try {
pipeline = sharp(file.absolutePath).rotate()
Expand Down Expand Up @@ -558,7 +558,7 @@ async function base64(arg) {
}

async function fluid({ file, args = {}, reporter, cache }) {
const options = healOptions(args, {})
const options = healOptions(pluginOptions, args, {})
// Account for images with a high pixel density. We assume that these types of
// images are intended to be displayed at their native resolution.
let metadata
Expand Down Expand Up @@ -733,7 +733,7 @@ async function fluid({ file, args = {}, reporter, cache }) {
}

async function fixed({ file, args = {}, reporter, cache }) {
const options = healOptions(args, {})
const options = healOptions(pluginOptions, args, {})

// if no width is passed, we need to resize the image based on the passed height
const fixedDimension = options.width === undefined ? `height` : `width`
Expand Down Expand Up @@ -843,7 +843,7 @@ async function notMemoizedtraceSVG({ file, args, fileArgs, reporter }) {
turnPolicy: potrace.Potrace.TURNPOLICY_MAJORITY,
}
const optionsSVG = _.defaults(args, defaultArgs)
const options = healOptions(fileArgs, {})
const options = healOptions(pluginOptions, fileArgs, {})
let pipeline
try {
pipeline = sharp(file.absolutePath).rotate()
Expand Down
3 changes: 0 additions & 3 deletions packages/gatsby-transformer-sharp/src/extend-node-type.js
Expand Up @@ -137,7 +137,6 @@ const fixedNodeType = ({
},
quality: {
type: GraphQLInt,
defaultValue: 50,
},
toFormat: {
type: ImageFormatType,
Expand Down Expand Up @@ -263,7 +262,6 @@ const fluidNodeType = ({
},
quality: {
type: GraphQLInt,
defaultValue: 50,
},
toFormat: {
type: ImageFormatType,
Expand Down Expand Up @@ -413,7 +411,6 @@ module.exports = ({
},
quality: {
type: GraphQLInt,
defaultValue: 50,
},
jpegProgressive: {
type: GraphQLBoolean,
Expand Down

0 comments on commit 8af9826

Please sign in to comment.