Prevent images being re-downloaded #2

Closed
necolas opened this Issue Feb 21, 2012 · 9 comments

Comments

Projects
None yet
6 participants

necolas commented Feb 21, 2012

When I resize the viewport, smaller images are downloaded. And when I resize to wider viewports, the larger images appear to be re-downloaded. So I can end up with dozens of requests in my dev tools when there are only 5 or so images referenced in the HTML.

Owner

scottjehl commented Feb 21, 2012

Thanks! Good points, again.

Addressed in the thread, and open to discussion. http://www.w3.org/community/respimg/2012/02/21/a-sample-picture-implementation/

On Feb 21, 2012, at 7:31 PM, Nicolas Gallagher wrote:

When I resize the viewport, smaller images are downloaded. And when I resize to wider viewports, the larger images appear to be re-downloaded. So I can end up with dozens of requests in my dev tools when there are only 5 or so images referenced in the HTML.


Reply to this email directly or view it on GitHub:
#2

Owner

scottjehl commented Feb 22, 2012

A native implementation would probably do the best job of ensuring that re-requests don't happen on resize, regardless of cache settings, though I'd think the average image caching configuration would probably ensure resize re-requests are hitting cache as it is.

For this though, I wonder if keeping already-used image objects on-hand would avoid the issue entirely...

Contributor

gordonbrander commented Feb 22, 2012

On a related note, we should probably create the <img> element if it doesn't exist already. Assuming <picture> became a reality, it seems like leaving the fallback to JavaScript could be a reasonable compromise at a future date. That would also solve the multiple download issue.

Contributor

attiks commented Jul 6, 2012

Using the div version all images are downloaded once, but it appears that the src is replaced while resizing even if it isn't needed, resulting in a lot of aborted connections.

@scottjehl i also recognized this behaviour when scalling the browser windows down.

Maybe you can just make and if clause to check following:

  • would be newly requested image be larger then the current? -> load it
  • would the new loaded image be smaller -> DONT load it...just keep displaying the larger?

best regards

zigotica commented Jun 4, 2013

that would go against the art direction benefit of this technique

hmm....but target is better performance -> so this could improve it.

When i move my browser window from fullscreen to a smaller size -> every image gets reloaded....

Maybe this could be just an configuration option?

Owner

scottjehl commented Jun 5, 2013

I like the idea of it as an option, but it's the sort of thing that probably won't likely apply with a native picture implementation, so I'm not sure whether to follow that or extend in ways like this that seem useful.

On Jun 5, 2013, at 1:36 PM, Martin Keckeis notifications@github.com wrote:

hmm....but target is better performance -> so this could improve it.

When i move my browser window from fullscreen to a smaller size -> every image gets reloaded....

Maybe this could be just an configuration option?


Reply to this email directly or view it on GitHub.

@scottjehl scottjehl pushed a commit that referenced this issue Mar 24, 2014

@jansepar jansepar Merge pull request #2 from salzhrani/master
Reset the body margin
7a318b6
Owner

scottjehl commented Apr 7, 2014

Since we're aiming to match native picture support at this point, I'm going to close this out. Per the spec at this point, the native element will act as a controller for an img tag, and I'm not sure how to avoid those requests to cache without toggling the image's src. Happy to reopen if there's a workaround to explore here. Thanks!

scottjehl closed this Apr 7, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment