Comments (6)
Hi there, we would really need to use the responsive loader with webp images, as they are the new web-image standard! This issue is open since 2017 - is there any chance we can realize this functionality fast and easy? What is currently blocking?
from responsive-loader.
Hi @herrstucki , since Sharp supports webp, what work would need to be done get get responsive-loader to support wepb with sharp? How can I help / develop this feature?
from responsive-loader.
webp support added!
from responsive-loader.
Good idea! I'd be happy to accept a PR adding this feature 👍
The only concern I have would be that jimp doesn't support webp yet, so we'd need to handle that accordingly.
from responsive-loader.
@herrstucki: Is there an "official" fork of this repository so I can also have webp support?
from responsive-loader.
Hi and thanks for adding the feature, is there a way to enable ?format=webp
by default for all imports ? I tried using the adapter
configuration format
but then I have no more jpeg for all browsers, this is what I expect in the end:
<source type="image/webp" srcset="2700x1209/rocket-pods-mr-ben-01-2700x1209.webp 2700w,
1800x806/rocket-pods-mr-ben-01-1800x806.webp 1800w,
1536x1536/rocket-pods-mr-ben-01-1536x1536.webp 1536w,
1024x1024/rocket-pods-mr-ben-01-1024x1024.webp 1024w,
900x900/rocket-pods-mr-ben-01-900x900.webp 900w,
600x600/rocket-pods-mr-ben-01-600x600.webp 600w"
sizes="100vw" />
<source srcset="2700x1209/rocket-pods-mr-ben-01-2700x1209.jpg 2700w,
1800x806/rocket-pods-mr-ben-01-1800x806.jpg 1800w,
1536x1536/rocket-pods-mr-ben-01-1536x1536.jpg 1536w,
1024x1024/rocket-pods-mr-ben-01-1024x1024.jpg 1024w,
900x900/rocket-pods-mr-ben-01-900x900.jpg 900w,
600x600/rocket-pods-mr-ben-01-600x600.jpg 600w"
sizes="100vw" />
Note: there is two source set.
from responsive-loader.
Related Issues (20)
- Ominous "cannot destructure property height" issue (with reproducable demo) HOT 1
- Error: Prevent writing to file that only differs in casing or query string from already written file. HOT 5
- webpack storybook nextjs HOT 2
- Memory/CPU runaway HOT 1
- Error: Cannot find module './image.jpg?resize&size=534' HOT 3
- Examples to not account for Webpacks default `images` rule
- outputPath is not respecting absolute paths
- Images double-bundled and wrong name in css file HOT 1
- responsive-loader does not work on react-scripts 5.0.0 HOT 1
- templates and webpack 5 HOT 1
- [BUG] Option `placeholder` with query `size` causes an error. Version 3.0.2 only. HOT 2
- [BUG] Using `html-loader` and responsive image with JSON notation occurs ERROR HOT 4
- [DOCS] How to use responsive-loader with Pug HOT 2
- Windows - generation of hash image files in dist folder HOT 1
- Problems with Webpack 5 and html-webpack-plugin HOT 1
- [FEATURE REQUEST] How to configure for auto publicPath?
- Resize and serve remote images? HOT 1
- Custom contenthash length in options.name HOT 1
- After upgrading to 3.1.0 absolute url scheme is corrupted (https:// rewritten to https:/) HOT 2
- [FEATURE REQUEST] filename option as function
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from responsive-loader.