Joe Haddad
080b91f986
Adjust default image quality to 75 ( #18292 )
2020-10-27 11:14:42 +00:00
Steven
3a169fbbf0
Separate config into deviceSizes
and iconSizes
( #18267 )
...
This separates the `next.config.js` property `images.sizes` into to properties: `images.deviceSizes` and `images.iconSizes`.
The purpose is for images that are not intended to take up the majority of the viewport.
Related to #18122
2020-10-26 20:07:52 +00:00
Steven
61fab923eb
Fix Image srcset
to ensure the component's width
is the largest possible image ( #18236 )
...
There was a bug when the user defines a width on the Image component, but a larger size image is requested.
This is because the browser uses the `srcset` to decide which image size to request and we had the srcset basically hardcoded.
This PR fixes the behavior so that the `srcset` will never be larger than the `width` defined on the component.
It also fixes a bug where the preload srcset did not match the img srcset.
- Related to #18147
- Related to #18122
2020-10-26 14:29:52 +00:00
JJ Kasper
9c65c994cc
Add next/image default loader errors ( #18152 )
...
* Add next/image default loader errors
* Add domains check
* Apply suggestions from PR
* Update test
2020-10-25 00:22:47 -05:00
Tim Neutkens
58c161c99b
Fix flashing of no-src image when using next/image ( #18195 )
...
Solves on of the issues in https://github.com/vercel/next.js/issues/18122
2020-10-24 15:23:42 +00:00
Steven
301c029e48
Add support for string width/height on Image component ( #18178 )
...
For many users refactoring from `<img>` to `<Image>`, we can often support their properties as-is.
The exception was width/height.
This PR allows the `<Image>` component to accept strings for `width` and `height` just like `<img>`.
Related to #18122
2020-10-24 02:01:15 +00:00
Steven
a12eeea18d
Add w param ( #18151 )
...
Add missing `w` param for [old browsers](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset#Browser_compatibility ) like IE that dont support `srcset` (@styfle)
2020-10-23 14:23:16 +00:00
Yamagishi Kazutoshi
f1005ca661
Pass quality param of image component to preload ( #18158 )
...
If give the `priority` and `quality` attributes to an Image Component, the `quality` attribute will not be given to the preload and a warning will be displayed to the devtool.
![screenshot on devtool](https://user-images.githubusercontent.com/12539/96960307-0837e000-153d-11eb-8c01-e15afd40e04f.png )
2020-10-23 06:36:54 +00:00
Steven
07adc8ef26
Change Image component lazy=true to loading=lazy ( #18138 )
...
This PR updates the `<Image>` component to follow the same property naming as native `<img>`.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-loading
This currently allows two values,`loading=lazy` and `loading=eager`, but there might be new values added in a future spec.
cc @atcastle
2020-10-22 18:59:42 +00:00
Tim Neutkens
9fb1e60504
Make lazy-loading the default for next/image ( #18123 )
...
Co-authored-by: Steven <steven@ceriously.com>
2020-10-22 16:55:51 +02:00
Steven
755934d0fc
Fix merge conflict ( #18106 )
2020-10-21 21:55:02 +02:00
Steven
3f07e554f4
Fix Image component defaults & remove autoOptimize ( #18101 )
2020-10-21 21:39:12 +02:00
Alex Castle
1a8cb7e1a0
Image Component: Support for Akamai image CDN ( #18100 )
2020-10-21 21:31:28 +02:00
Steven
e8f402adfa
Add unsized
property to Image component ( #18059 )
...
Implements the `unsized` property from RFC #16832
cc @atcastle
2020-10-21 10:03:31 +00:00
Steven
0fb39e2347
Add width
and height
props to Image component ( #18031 )
...
Co-authored-by: Tim Neutkens <timneutkens@me.com>
2020-10-20 18:43:24 +02:00
Alex Castle
01e6bd1684
Remove multi-host support for image component and support quality pass-through ( #18038 )
...
Co-authored-by: Tim Neutkens <timneutkens@me.com>
2020-10-20 16:28:01 +02:00
Yamagishi Kazutoshi
753bb9fdba
Fix types for lazy image component ( #17984 )
...
Follow-up #17916
Correcting type errors and organizing redundant descriptions.
2020-10-18 10:41:25 +00:00
Alex Castle
c9eb3dcad9
Image component lazy loading ( #17916 )
...
Co-authored-by: Tim Neutkens <timneutkens@me.com>
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
2020-10-17 20:55:29 +02:00
Tim Neutkens
b37835ac9c
Make sure w
parameter is only included when a width is provided. ( #17971 )
2020-10-17 18:24:06 +02:00
Yamagishi Kazutoshi
6bc6e2c494
Improve types for Image Component ( #17954 )
...
![Screenshot on VS Code](https://user-images.githubusercontent.com/12539/96300300-43fc1280-1030-11eb-89ae-dba8beeca583.png )
The only attribute that must be used with Image Component is src, but all attributes are required and TypeScript will warn you.
2020-10-16 20:04:39 +00:00
Yamagishi Kazutoshi
6f13956f12
Unify config.image.breakpoints to config.image.sizes ( #17953 )
...
Unify the confusing `config.images.sizes` ([Image Optimizer](https://github.com/vercel/next.js/discussions/17141 )) and `config.images.breakpoints` ([Image Component](https://github.com/vercel/next.js/discussions/16832 )).
2020-10-16 19:36:31 +00:00
Yamagishi Kazutoshi
5f7c6ae8d8
Fix width param name for Image Optimizer ( #17952 )
...
Image Optimizer only accepts the name of the width parameter as a `w`.
ref https://github.com/vercel/next.js/blob/v9.5.6-canary.3/packages/next/next-server/server/image-optimizer.ts#L71
2020-10-16 18:48:50 +00:00
Tim Neutkens
4f59209bf2
Update default configuration to match image optimization ( #17943 )
...
Co-authored-by: Steven <steven@ceriously.com>
2020-10-16 19:09:18 +02:00
Alex Castle
87175fe9df
Image component foundation ( #17343 )
...
Co-authored-by: Tim Neutkens <timneutkens@me.com>
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
2020-10-14 11:57:10 +02:00