Comments (15)
I can. But actually this is already implicitly explained using the srcset
attribute with the w descriptor. For adaptive responsive images you can use the following pattern:
<img
data-sizes="auto"
src="lqip-src.jpg"
data-srcset="lqip-src.jpg 100w,
image2.jpg 300w,
image3.jpg 600w,
image4.jpg 900w" class="lazyload" />
In case you only want to have non responsive, but retina optimized images, you are using the x descriptor:
<img
src="100w.jpg"
data-srcset="300w.jpg 1x,
600w.jpg 2x" class="lazyload" />
The x descriptor is indeed not explained in the readme or on the demo, but it simply follows the respimg specification.
Note that you need a respimg polyfill for full cross browser support of that.
from lazysizes.
Does this help. Should I clarify this in readme and/or on the demo page?
from lazysizes.
Let me read the docs once again in a couple of days (busy weekend). Perhaps when I read the docs and also think it's unclear or lacking than adding it with a title "Retina example" makes sense. I can update it and send a pull request.
from lazysizes.
This would be awesome. Thx.
from lazysizes.
That's great, thanks. It's one thing to leave it to assumption (and the user to figure out), but a demo always impresses. If you've got a feature, sell it!
from lazysizes.
I would like to use different retina images for different screen resolutions. So on a mobile you would get 300px default image size and 600px retina image, but on desktop you would get a 600px default image and 1200px retina image. I see in the respimg polyfill documentation that you can't mix the w and x descriptor but is there any other way I can achieve this functionality?
from lazysizes.
@axelander
I don't really get, what you want. Can you describe, what you want to achieve and why? Or why it doesn't work for you: Normally you simply want to do this, then the browser can handle those cases:
<img src="300.jpg"
data-srcset="300.jpg 300w, 600.jpg 600w, 1200.jpg 1200w"
class="lazyload"
data-sizes="auto"
/>
Additionally note: there is nearly no mobile browser without retina.
You can try to fragment mobile and desktop/tablet via the picture
element and use the x descriptor:
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source
data-srcset="http://placehold.it/300x150 1x,
http://placehold.it/600x300 2x"
media="(max-width: 760px)"
/>
<!--[if IE 9]></video><![endif]-->
<img
src="http://placehold.it/300x150"
data-srcset="http://placehold.it/600x300 1x,
http://placehold.it/1200x600 2x"
class="lazyload"
alt="picture but without artdirection" />
</picture>
or use the w descriptor:
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source
data-srcset="http://placehold.it/300x150 300,
http://placehold.it/600x300 600w"
media="(max-width: 760px)"
/>
<!--[if IE 9]></video><![endif]-->
<img
src="http://placehold.it/300x150"
data-srcset="http://placehold.it/600x300 600w,
http://placehold.it/1200x600 1200w"
class="lazyload"
data-sizes="auto"
alt="picture but without artdirection" />
</picture>
from lazysizes.
Maybe to clarify: Using srcset
with w descriptor automatically not only handles different viewport sizes, it also handles different screen resolutions for you.
from lazysizes.
Alright, that last comment is what I was looking for. So, the w descriptor is taking pixel density into consideration already? For example, surfing on a iPhone 5s, there is a 320px width image element. I would get the 640px image if I add:
<img
data-sizes="auto"
data-srcset="
/image/320x320.jpg 320w,
/image/640x640.jpg 640w"
class="lazyload">
from lazysizes.
Yes.
from lazysizes.
Ok, I didn't get it to work on the iOS simulator, but chrome phone emulator was returning the correct image. I will do some further digging. Thank you for the help!
from lazysizes.
Are you using respimage? iOS needs a polyfill for this.
from lazysizes.
@axelander
Can you give me a heads up. Maybe a testcase for the thing, that it isn't working?
from lazysizes.
No, I forgot to add the polyfill, sorry. Thank you for helping me out! 👍
from lazysizes.
This example is already there. Closing.
from lazysizes.
Related Issues (20)
- A bit confused as to how to get responsive images working? HOT 1
- Chrome Issue Logged - Audit Usage of navigator.userAgent
- Big gallery IOS performance issue
- Pausing Intersection effect when scrolling
- Images not showing when lazyload class is removed HOT 1
- How do I test it?
- safari 16 lqip stopped working, only low quality image is showing HOT 2
- Problem with Ajaxed Content and Unveilhooks
- Interferences with Modernizr
- supportScroll for headless navigator
- Demo site images load error 403 404 HOT 1
- lazySizes.loader.unveil(imgElem) Method does not show all images in page HOT 1
- lazySizes Object undefined in latest Safari HOT 1
- i have image injected inside outer world app. And this world app has vtex-lazyload based on lazysizes. And its configured as
- vtex-lazyload and lazysizes conflict
- PreloadAfterLoad should use "prefetch"
- Blur up image inline styles are lost
- Error: Element img is missing required attribute src. HOT 2
- parent-fit in fontFamily is ignored
- Using src + data-src and loading=lazy loads the src in Firefox and Safari
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lazysizes.