Commit graph

11 commits

Author SHA1 Message Date
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
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
3f07e554f4
Fix Image component defaults & remove autoOptimize (#18101) 2020-10-21 21:39:12 +02: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
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
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
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