bootstarted / sharp-loader Goto Github PK
View Code? Open in Web Editor NEWwebpack + sharp image processing.
webpack + sharp image processing.
Hey,
loving your loader. Super fast and easy to use. I'm just missing a few options.
I tried to add
jpeg: {
progressive: true
}
but doesn't change anything. Would be great if that were exposed. Also since sharp prefers quality
to be passed as a format specific option.
I've had luck using the plugin with Webpack 3, but that's just my use case. Is it safe to bump the Webpack engine version for now?
I'm working on a project in Gatsby and don't want to mess about with the canned webpack configuration it provides just to load a couple of images.
So I want to use this loader with an import
line in the JS file alone, and configure it with query strings.
Is this possible?
So far I'm trying
import image from 'sharp-loader!./test.png?{"outputs":[{"format": "jpg"}]}'
I was hoping this would simply convert the PNG to a JPEG. Ideally I want to specify quality level and have it optimized too.
I'm getting
TypeError: Cannot read property 'context' of null
at Object.module.exports ([...]/node_modules/sharp-loader/dist/sharp.js:232:29)
I'm currently working on a vue project and tried to translate your example config to chainWebpack syntax and include it in my vue.config.js.
This is what i came up with:
module.exports = {
chainWebpack: config => {
config.module
.rule('resize-images')
.test(/\.(gif|jpe?g|png|tiff)(\?.*)?$/)
.use('sharp-loader')
.loader('sharp-loader')
.query()
.name('[name].[hash:8].[ext]')
.cacheDirectory(true)
.presets()
.thumbnail()
.format(['webp', 'jpeg'])
.width(200)
.quality(60)
.end()
}
}
Getting following error:
ERROR TypeError: config.module.rule(...).test(...).use(...).loader(...).query is not a function
I saw that other loaders in my webpack config used options:
instead of
query:
and i think thats the issue โ i tried the following and got no more errors:
module.exports = {
chainWebpack: config => {
config.module
.rule('resize-images')
.test(/\.(gif|jpe?g|png|tiff)(\?.*)?$/)
.use('sharp-loader')
.loader('sharp-loader')
.options()
.end()
}
}
I'm currently on [email protected]
.
Thank you for your work!
I think this version does not work with webpack 5. I have the following:
{
test: /\.(gif|jpe?g|png|svg|tiff)(\?.*)?$/,
include: [path.resolve(__dirname, 'src/photography')],
loader: "sharp-loader",
options: {
name: "[name].[hash:8].[ext]",
cacheDirectory: true,
presets: {
// Preset 1
thumbnail: {
format: ["webp", "jpeg"],
width: 200,
quality: 60,
},
// Preset 2
prefetch: {
// Format-specific options can be specified like this:
format: { id: "jpeg", quality: 30 },
mode: "cover",
blur: 100,
inline: true,
size: 50,
},
},
},
},
// Images: Copy image files to build folder
{ test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource' }
import testImage from '../../photography/fullsizeoutput_203a.jpeg?{"outputs":["thumbnail"]}';
It appears the query parameters are ignored and the result of testImage
is undefined
. Is this something to do with the new asset modules?
Setting the quality option has no impact on filesize e.g. JPEGs
preset: {
width: 300,
quality: 50
}
Also the format syntax has no effect.
I'am using sharp: v0.21.3.
I'am getting a deprecation warning which should be related to sharp version:
(node:27161) DeprecationWarning: crop(position) is deprecated, use resize({ fit: "cover", position }) instead
I'am using sharp v0.21.3.
Add a query option emitFile
, as present on file-loader
, that disables the file emitting for building up for the server-side on a Universal/Isomorphic environment.
related with webpack-contrib/file-loader#74
This would allow the user full access to sharp transformations, and would even allow the use of third party transformations (openCV, for instance).
Hi all, I am trying to optimize my media assets with webpack, I use image-minimizer-webpack-plugin
to optimize the quality.
I looked for a plugin that generates thumbnails and found this (only) one.
This could enable the ability to add different output formats not normally supported by sharp
.
One may generate e.g. a favicon
with: https://github.com/steambap/png-to-ico/blob/master/index.js
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.