Image component sized by multiplier #18432
Replies: 4 comments 9 replies
-
You have more info about the image component here and you can see all props here
It will use this default configuration module.exports = {
images: {
deviceSizes: [320, 420, 768, 1024, 1200],
iconSizes: [],
domains: [],
path: '/_next/image',
loader: 'default',
},
}
You can also use If this does not answer your question could you elaborate more so I or another member can help you with your issue :) |
Beta Was this translation helpful? Give feedback.
-
I was actually looking at the new I didn't go looking at changing the different So would be nice to see what would be the recommended way to support something like this? |
Beta Was this translation helpful? Give feedback.
-
@M1ck0 from what I can tell from the documentation you posted, the API is not designed in a way that allows for easy integration for images to be supported on retina devices. Based on my example above, it would be nice to specify the different scales of images to be used. e.g. 1x, 2x, 3x which is something that is supported natively by browsers, but not in the Next.js Image component. |
Beta Was this translation helpful? Give feedback.
-
If anyone else wondering, we can try this as for now:
|
Beta Was this translation helpful? Give feedback.
-
Bug report
Images I use on my site I follow this practices to have crisp images at different DPIs.
from the looks of it, theres no way to define a srcSet with 1x + 2x with the new image component.
is there a way to do this? Its not clear in the docs.
I'm not sure if you'd be interested in creating a different component with more flexibility but if you implemented the picture element you'd allow user to specify all the sources they would need.
e.g.
I could see the same markup in Next.js as follows:
where:
Img would be the component to specify the source image
Source would be the component to specify alternatives
Picture to be the wrapper to share logic between Source + Img
Beta Was this translation helpful? Give feedback.
All reactions