diff --git a/404.html b/404.html index 3b59c09..4ea0b30 100644 --- a/404.html +++ b/404.html @@ -1 +1 @@ -
The most typical usage. Provide one image per each device size you're targeting. For example, if you're targeting small/large at 768px breakpoint (as configured in your next.config.js
), provide 2 sizes. If you're targeting mobile/tablet/desktop with breakpoints 480px and 768px (as configured in your next.config.js
) - provide 3 sizes, and so on.
<Picture src={require('../images/coffee1.jpg?sizes=375,860')} />
<picture>
+Next.js plugin for embedding optimized images.
- import png/jpg images
- output to webp format
- resize to multiple screen sizes and densities
- optimize webp and fallback images using sharp
- lazy load in modern browsers with prop forwarding (loading="lazy")
- prevent layout shift with automatic width/height attributes
- streamlined usage with the built in <Picture /> component
- art direction with different images for different breakpoints
- fast deployment and development workflow using persistent cache
One size per breakpoint
The most typical usage. Provide one image per each device size you're targeting. For example, if you're targeting small/large at 768px breakpoint (as configured in your next.config.js
), provide 2 sizes. If you're targeting mobile/tablet/desktop with breakpoints 480px and 768px (as configured in your next.config.js
) - provide 3 sizes, and so on.
<Picture src={require('../images/coffee1.jpg?sizes=375,860')} />
Output
<picture>
<source
type="image/webp"
srcSet="/next-img/_next/static/images/coffee1-375@1x-f1dc5dc288aa4461.webp 375w,
@@ -266,4 +266,4 @@
width="375"
height="252"
/>
-</picture>
\ No newline at end of file
+</picture>