Skip to content

Commit a762d4e

Browse files
ashutoshkrrissherwinski
authored andcommitted
docs(readme): add documentation about customization of target device pixel ratios
1 parent 01e8af5 commit a762d4e

1 file changed

Lines changed: 40 additions & 0 deletions

File tree

README.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,26 @@ https://demos.imgix.net/image.png?ar=3%3A2&dpr=4&fit=crop&h=800&s=c89c2fd3148957
139139
https://demos.imgix.net/image.png?ar=3%3A2&dpr=5&fit=crop&h=800&s=3d73af69d78d49eef0f81b4b5d718a2c 5x
140140
```
141141

142+
This library generate by default `1` to `5` dpr `srcset`. You can control generated target ratios with `device_pixel_ratios` parameters.
143+
144+
```python
145+
from imgix import UrlBuilder
146+
client = UrlBuilder("demo.imgix.net")
147+
client.create_srcset(
148+
"image.jpg",
149+
{ "w": 100 },
150+
{
151+
"device_pixel_ratios": [ 1, 2, 3 ]
152+
}
153+
)
154+
```
155+
Will produce the following attribute value:
156+
```html
157+
https://demo.imgix.net/image.jpg?dpr=1&ixlib=python-3.2.1&q=75&w=100 1x,
158+
https://demo.imgix.net/image.jpg?dpr=2&ixlib=python-3.2.1&q=50&w=100 2x,
159+
https://demo.imgix.net/image.jpg?dpr=3&ixlib=python-3.2.1&q=35&w=100 3x'
160+
```
161+
142162
For more information to better understand srcset, we highly recommend
143163
[Eric Portis' "Srcset and sizes" article](https://ericportis.com/posts/2014/srcset-sizes/) which goes into depth about the subject.
144164

@@ -187,6 +207,26 @@ https://demo.imgix.net/image.jpg?dpr=4&&q=15&w=100 4x
187207
https://demo.imgix.net/image.jpg?dpr=5&q=10&w=100 5x
188208
```
189209

210+
You can also pass `variable_qualities` along with the `device_pixel_ratios` option as below:
211+
```python
212+
from imgix import UrlBuilder
213+
client = UrlBuilder("demo.imgix.net")
214+
client.create_srcset(
215+
"image.jpg",
216+
{ "w": 100 },
217+
{
218+
"device_pixel_ratios": [ 1, 2, 3 ],
219+
"variable_qualities": { 1: 45, 2: 30, 3: 20 }
220+
}
221+
)
222+
```
223+
The above script will produce the following output:
224+
```html
225+
https://testing.imgix.net/image.jpg?dpr=1&q=45&w=100 1x,
226+
https://testing.imgix.net/image.jpg?dpr=2&q=30&w=100 2x,
227+
https://testing.imgix.net/image.jpg?dpr=3&q=20&w=100 3x
228+
```
229+
190230
### Fluid-Width Images
191231

192232
#### Custom Widths

0 commit comments

Comments
 (0)