srcset | 易学教程

Responsive images - srcset and sizes attribute - how to use both correctly: device-pixel-ratio-based and viewport-based selection together?

阅读更多关于 Responsive images - srcset and sizes attribute - how to use both correctly: device-pixel-ratio-based and viewport-based selection together?

问题 I have read about this problem quite often so far and it also occurs for my own projects. Here is an introduction of what I have found out so far about the srcset and the sizes attribte. There are two different possibilities on how to use the srcset -attribute (source w3c: http://w3c.github.io/html/semantics-embedded-content.html#device-pixel-ratio): Device-pixel-ratio-based selection when the rendered size of the image is fixed This is a simple and reliable way to use srcset . You simply say

Responsive img/srcset/sizes: Different jpg quality depending on device pixel density?

阅读更多关于 Responsive img/srcset/sizes: Different jpg quality depending on device pixel density?

问题 I am looking for a responsive image strategy that allows to serve different jpg quality based on the device pixel density. On a small screen with high resolution, I would serve a low-quality but high-resolution jpg. On a big screen with low pixel density, I would serve a high-quality jpg, ideally matching the device resolution. QUESTION: Is this somehow possible with <img srcset=".." sizes=".." /> ? Background / scenario Different original images with different original dimensions. Different

Can I use `<img srcset>` or `<picture>` for image size rather than viewport size?

阅读更多关于 Can I use `` or `` for image size rather than viewport size?

I'm trying to use <img srcset /> to load images based on the size they'll appear on the page, rather than based on the size of the viewport. Perhaps examples will help: On any viewport, when the image is styled with width: 100% inside a 200px-wide <div> , img-200.jpg should load. On any viewport, when the image is styled with width: 100% inside a 400px -wide <div> , img-400.jpg should load. ...etc. I've done tons of Googling, but as best as I can tell, srcset is only used for changing images based on viewport size, not image size, if that makes sense. Is that correct? Or is there hope for what

How do responsive images work with `em` supplied as a length in `sizes`?

阅读更多关于 How do responsive images work with `em` supplied as a length in `sizes`?

问题 How can browsers understand the em unit when used in a responsive image? <img alt="A giraffe" src="giraffe.jpg" srcset="giraffe@1.5x.jpg 600w, giraffe@2x.jpg 800w, [etc.]" sizes="(max-width: 40em) 40em"> This validates, and I'm not seeing warnings in browser consoles. But if the whole point of the image preloader is to fetch images before the CSS is downloaded and parsed, what does the browser use for em ? Is it just its default font-size that it applies to <html> ? Should I use rem for

HTML5 srcset: Mixing x and w syntax

阅读更多关于 HTML5 srcset: Mixing x and w syntax

问题 I'm trying to figure out a way to provide high dpi images to iOS8 clients while also providing responsive image resources for browsers supporting the w syntax. According to the W3C standard it should be possible to mix both syntaxes in one srcset attribute: <img alt="The Breakfast Combo" src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"> (Source: http://drafts.htmlwg.org/srcset/w3c-srcset/) However, when I run that example in Chrome 38 (OS X,

How do I tell srcset attribute to load NO images when viewport smaller than certain size

阅读更多关于 How do I tell srcset attribute to load NO images when viewport smaller than certain size

问题 I'm having trouble understanding how to keep srcset from loading any images on screens < 768px . I've tried the code below but the sizes attribute doesn't seem to do what you may think. Below loads 1024.jpg on all screen sizes: <img src="default.jpg" srcset="img/1024.jpg 1024w" sizes="(min-width: 768px) 768px, 100vw" /> Or the picture element, if it would honor an empty srcset but it only "hints" to which image a browser should load. 回答1: The other answer isn't really satisfying. In general

Is there something wrong with my srcset definition, or is current browser support just weak?

阅读更多关于 Is there something wrong with my srcset definition, or is current browser support just weak?

问题 I'm trying to get my head around the new 'srcset' attribute of 'img'. I've built a simple test page, but the behavior I see from browsers is surprising. First, here's the test page: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Test Page</title> <style type="text/css"> section.wrapper { width: 100%; text-align: center; } section.wrapper div { margin: 0 auto; } section.wrapper div img { width:

Why is React.js removing the srcset tag on <img />?

阅读更多关于 Why is React.js removing the srcset tag on ?

问题 When I have the srcset property on my <img /> tag, why doesn't it show up in the browser? It appears as through React.js is stripping it out. <img src="/images/logo.png" srcset="/images/logo-1.5x.png 1.5x, /images/logo-2x.png 2x" /> 回答1: The solution is to use srcSet instead of srcset . <img src="/images/logo.png" srcSet="/images/logo-1.5x.png 1.5x, /images/logo-2x.png 2x" /> Reference: https://facebook.github.io/react/docs/tags-and-attributes.html under HTML Attributes 回答2: Another ugly

How do responsive images work with `em` supplied as a length in `sizes`?

阅读更多关于 How do responsive images work with `em` supplied as a length in `sizes`?

How can browsers understand the em unit when used in a responsive image? <img alt="A giraffe" src="giraffe.jpg" srcset="giraffe@1.5x.jpg 600w, giraffe@2x.jpg 800w, [etc.]" sizes="(max-width: 40em) 40em"> This validates, and I'm not seeing warnings in browser consoles. But if the whole point of the image preloader is to fetch images before the CSS is downloaded and parsed, what does the browser use for em ? Is it just its default font-size that it applies to <html> ? Should I use rem for clarity? Is there a difference between the two when the user zooms? This isn't theoretical; I'm using em in

Is it possible to recalculate the `srcset` image used if browser window is resized?

阅读更多关于 Is it possible to recalculate the `srcset` image used if browser window is resized?

问题 Is it possible to get srcset to recalculate the browser window size once the page has loaded, and thus update the image its using. The reason you'd want to do this is because if on a desktop you have your browser window compressed, load a site, then make the browser window bigger, it will just scale the "small.jpg" (as set in the srcset ) so the user will end up with a pixilated image. I started make a jsfiddle to show the issue, but it dosnt work well, as i think srcset is calculated by the