4 ms·

I agree as a developer wholeheartedly we need a better way of adding in multiple versions of an image for the plethora of resolutions and pixel density's out th

I agree as a developer wholeheartedly we need a better way of adding in multiple versions of an image for the plethora of resolutions and pixel density's out there, but this technique feels a little hacky to me. I am a big advocate of SVG (I use SVG extensively for icons and logos especially) but cramming media queries and image tags within to save a few bytes at the added cost of complexity and browser quirks to debug doesn't feel like it's worth it. The only solid fix for responsive imagery is a HTML5 tag that allows you to set breakpoints for different sizes. The proposed "picture" tag which is similar to that of the video tag does what we want, but we most likely won't see any action on this tag until 2014, possibly 2015 if this W3 bug ticket is any indication: https://www.w3.org/Bugs/Public/show_bug.cgi?id=18384 https://www.w3.org/Bugs/Public/show_bug.cgi?id=18384 This jQuery script adds in the functionality for using the proposed tag now though, I can't speak for how well it works, but it looks promising: http://jquerypicture.com/ http://jquerypicture.com/

est 14y ago
JPEG/GIF/PNG all have interlaces, why not download the first scan for smaller image, and full scan for original images?
- dclowd9901 14y ago
  Wow, this is a pretty novel approach; is this something that's been talked about or are you just one of those really clever people I keep hearing about?
  - est 14y ago
    I just learned it from my other question on Stackoverflow not long ago http://stackoverflow.com/questions/15674880/ http://stackoverflow.com/questions/15674880/ It's a cool hack which you can serve low-res, monochrome jpeg in the first scan, and gradually to full-res, full-color jpeg.
- WiseWeasel 14y ago
  Half an interlaced image is still twice as big as an image at half resolution.
  - qu4z-2 14y ago
    Interlacing usually happens in two-dimensions in image formats, if I understand it correctly (ie it first sends one pixel out of each 2x2 block). The only thing is I think that is one of the actual pixels, rather than an average. In an ideal world you could send the average color of each 2x2 block, then send the 2nd, 3rd, and 4th pixels and use that data to reconstruct the 1st pixel. Or is that how it works already?

est 14y ago

JPEG/GIF/PNG all have interlaces, why not download the first scan for smaller image, and full scan for original images?

dclowd9901 14y ago
Wow, this is a pretty novel approach; is this something that's been talked about or are you just one of those really clever people I keep hearing about?
- est 14y ago
  I just learned it from my other question on Stackoverflow not long ago http://stackoverflow.com/questions/15674880/ http://stackoverflow.com/questions/15674880/ It's a cool hack which you can serve low-res, monochrome jpeg in the first scan, and gradually to full-res, full-color jpeg.
WiseWeasel 14y ago
Half an interlaced image is still twice as big as an image at half resolution.
- qu4z-2 14y ago
  Interlacing usually happens in two-dimensions in image formats, if I understand it correctly (ie it first sends one pixel out of each 2x2 block). The only thing is I think that is one of the actual pixels, rather than an average. In an ideal world you could send the average color of each 2x2 block, then send the 2nd, 3rd, and 4th pixels and use that data to reconstruct the 1st pixel. Or is that how it works already?