what the hell are we supposed to do with our image files (photos) to make them look good on large high quality (retina) desktop screens AND AT THE SAME TIME appear quickly on low quality smartphones with slow connections?
If it’s critical, I guess the best you could do is deliver low quality first and then deliver the high quality ones after the page has loaded through JavaScript.
is it not critical for everybody these days?
when (and how) can we start using the html5 picture element?
http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-picture-element
I’d say it’s not critical - all or nothing - in most cases. The problem is that browsers can’t reliably detect connection speeds.
For example, how would the server know that you have a slow connection or that your mobile temporarily switched towers, that there was a temporary spike in connections, that your updating other apps, etc.
Here’s a useful trick for JPEGs: double the size and halve the quality.
For example, instead of 400x400 with a quality setting of 80%, make it 800x800 with a quality setting of 40%. Then scale it down to its actual size when you use it (e.g. with CSS background-size).
The end result is a picture that looks noticeably sharper on Retina screens, looks just the same on standard screens, yet the file-size is no larger (in fact it might even be smaller).
some good points, thanks
i think the issue is not so much about connection speed
it has to do more with the vast difference in screen resolutions
new apple thunderbolt: 2560x1440 px
old smartphone: 320x480 px
can we make a single image that loads quick AND looks top class on both these devices?
how about quadrupling the size and quartering the quality? 
1 Like
Never tried it!
Probably not a single image no, though it depends what you want it for. But if you’re talking about large images (banners, parallax backgrounds etc) then for that you’ll need to look at techniques which work with multiple images. This is a good place to start: https://css-tricks.com/which-responsive-images-solution-should-you-use/
that is AMAZING! 22 current responsive image techniques in that spreadsheet, i am thinking WOW!
this is one hell of a complex issue at the moment, right?
Yeah 
Eventually the PICTURE element will probably be the way, but it hasn’t been standardised or consistently implemented yet (spec keeps changing, latest at https://html.spec.whatwg.org/multipage/embedded-content.html). So for the time being …
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.