Comments (4)
thank you for the revealing response =]
this has been a great library to work with. both in terms of using it to solve a very focused problem with web development in nextjs but also as a pattern for solving similar problems (i used your pattern to deal with serving fonts locally by using the file loader to both rename and copy them to an internal _next folder)
anyhow, the roadmap looks great. i will be both happy to use it and customize it for some problems i am particularly interested in (resizing of images, auto LQIP production, etc etc)
from next-optimized-images.
Thank you for the feature request @eleith, I really like this idea. For me, this is also a part of image/performance optimization and I think it will fit well into this package (as we already generate webp on the fly for example).
I'm planning to rewrite this package (as it grew larger than expected and to be able to handle exactly the resource queries better) and release version 2 within the next few weeks. The plan is that all optimizations will be optional and when someone wants to use a specific optimization (like webp or lqip), he then just can install the required npm dependency and use the resource query provided by this package.
Image optimization packages are often big and require native binaries which not everyone uses in the end so this will also reduce installation time and fix some possible issues in CI/CD environments. img-loader (which next-optimized-images depends on) also went into the same direction.
Long story short, I'll add this optimization in version 2 :) I hope generating them for yourself still works in the meantime, I'll definitely keep you posted on this topic.
Also, feel free to comment here or open new issues if you have more ideas for improvements :)
from next-optimized-images.
Hey @eleith
Unfortunately, it took me way longer to create v2 and implement this feature than I expected at first and I'm sorry about that (there were some other projects which came into my way).
But I now implemented LQIP into v2.1.0 as an optional package.
So if you are on version 2.1.0, you can simply run npm install lqip-loader
and then just use the resource query, next-optimized-images automatically detects the installed package. (If you are on v1.x, please read the upgrade guide to v2 first as there were some breaking changes)
There are now two additional resource queries: ?lqip
and ?lqip-colors
.
I would be happy if you can test it sometime and give feedback if it works as you expected it :)
Example implementation:
export default () => (
<div>
<img src={require('./images/lqip-test.jpg?lqip')} />
<Palette colors={require('./images/lqip-test.jpg?lqip-colors')} />
</div>
);
from next-optimized-images.
trying it out right now and am happy with the results.
upgrading to v2 was fairly straight forward and i'll be slowly replacing my custom lqip with these. i like how the lqip image is inlined when the image is small.
i likely will need to use the css blur effect to make it look less blocky, but that is a concern of how the browser stretches out tiny images.
thanks again for taking on the rewrite and improving this library even more.
from next-optimized-images.
Related Issues (20)
- Create an example in Next.js /examples folder
- Image is not getting compressed in my NEXT app HOT 2
- imagemin-svgo version 10.0.0 compatibility
- Bump sharp to v0.29.0 HOT 2
- Error: Input buffer contains unsupported image format HOT 1
- Error: Objects are not valid as a React child HOT 1
- require() of ES Module (.\node_modules\imagemin-svgo\index.js) from (.\node_modules\next-optimized-images\lib\loaders\img-loader.js) not supported. HOT 3
- Next 12 - got next dev, next build and next export to work - update documentation HOT 1
- images that copied into the static folder(/_next/static/media/*) are damaged HOT 9
- Problem when using next.js github pages template + next-optimized-images
- Dynamic urls not supported
- Support for imagemin-mozjpeg v10 HOT 2
- .svg?sprite are included in client side bundle
- Images within client-side-only loaded components arenβt optimized HOT 1
- TypeError: unsupported file type: undefined (file: undefined) HOT 5
- Warning from nextjs when optimizeImages and inlineImageLimit are used HOT 2
- Compatible with Next 13? HOT 2
- kgroundimage using in reactjs
- image optimization issue
- add support for svg components
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 next-optimized-images.