3 ms·

All of these adaptive image solutions are heroic but incredible hacks. They load two images, load no images when JavaScript is disabled, depend on userAgent sni

All of these adaptive image solutions are heroic but incredible hacks. They load two images, load no images when JavaScript is disabled, depend on userAgent sniffing, and/or only work with specific backend technologies. What we need is the ability to tell the client what we have, then let the client choose the right one based on screen size and bandwidth. Browsers should be able to do that for us. Here's one solution along that line: http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/ http://www.alistapart.com/articles/responsive-images-how-the...

huggyface 15y ago
Isn't this something solved by CSS media selectors? Choose the images via CSS ("background" images, appropriately sized) within media selector criteria such as resolution and density. As an aside I despise any separation that even brings up the word mobile. My smartphone has a higher resolution than many desktops...coupled with a higher network performance than many high speed connections. The days of treating these mobile computers as gimpy halfwits is long past.
- tommi 15y ago
  How would you use CSS media selectors with dynamic content?
  - evanm 15y ago
    the CSS could be created on the fly, outside of a unified stylesheet.
- pault 15y ago
  With background images you lose the ability to scale an image to fit its container, which is one of the key components of a truly adaptive (fluid) layout. However, if you are using a fixed grid that merely resizes at certain thresholds in viewport width (like bootstrap's adaptive grids), that will work fine. Regarding mobile, I'm not sure the separation is about performance as much as it is about being nice to users with capped data plans. And even with a high resolution mobile display, you just don't need the same size images for a 3 inch phone as you do for a 24 inch desktop monitor. In fact, I think one of the intentions of the responsive design movement is to serve identical experiences to desktops and mobiles, while adjusting the format somewhat to make the latter easier on the eyes. This is a huge improvement over serving one of those dumbed-down, text only mobile sites that blogs and such are so fond of redirecting you to (I'm looking at you, wordpress).
  - underwater 15y ago
    CSS property background-size (https://developer.mozilla.org/en/CSS/background-size https://developer.mozilla.org/en/CSS/background-size) has contain and cover properties, which will scale the image to fit its container.
    - pault 15y ago
      Yes, I'm looking forward to dropping IE8 support so I can use this. :)
crcastle 15y ago
"load no images when JavaScript is disabled" This solution works fine if JavaScript is disabled. It just loads the smallest image if "mobile" is in the user agent string and the largest image otherwise. http://adaptive-images.com/details.htm http://adaptive-images.com/details.htm
underwater 15y ago
You should actually read the details page before criticizing the project. It does none of the things you say. In fact the technique is very similar to the one detailed in the ALA article.
- dmethvin 15y ago
  Yes, it says the requirements are Apache 2, PHP 5.x, and GD lib. I would call those specific server-side technologies.
  - underwater 14y ago
    But it doesn't "load two images, load no images when JavaScript is disabled, depend on userAgent sniffing". The only reason PHP or GD is needed is to automatically generate alternate image sizes, which the ALA author does manually.
toenail 15y ago
Yeah, and this "solution" does false advertising. For crap's sake, it's not a HTML solution if I need JavaScript, Apache and (ffs) PHP.

huggyface 15y ago

Isn't this something solved by CSS media selectors? Choose the images via CSS ("background" images, appropriately sized) within media selector criteria such as resolution and density. As an aside I despise any separation that even brings up the word mobile. My smartphone has a higher resolution than many desktops...coupled with a higher network performance than many high speed connections. The days of treating these mobile computers as gimpy halfwits is long past.

tommi 15y ago
How would you use CSS media selectors with dynamic content?
- evanm 15y ago
  the CSS could be created on the fly, outside of a unified stylesheet.
pault 15y ago
With background images you lose the ability to scale an image to fit its container, which is one of the key components of a truly adaptive (fluid) layout. However, if you are using a fixed grid that merely resizes at certain thresholds in viewport width (like bootstrap's adaptive grids), that will work fine. Regarding mobile, I'm not sure the separation is about performance as much as it is about being nice to users with capped data plans. And even with a high resolution mobile display, you just don't need the same size images for a 3 inch phone as you do for a 24 inch desktop monitor. In fact, I think one of the intentions of the responsive design movement is to serve identical experiences to desktops and mobiles, while adjusting the format somewhat to make the latter easier on the eyes. This is a huge improvement over serving one of those dumbed-down, text only mobile sites that blogs and such are so fond of redirecting you to (I'm looking at you, wordpress).
- underwater 15y ago
  CSS property background-size (https://developer.mozilla.org/en/CSS/background-size https://developer.mozilla.org/en/CSS/background-size) has contain and cover properties, which will scale the image to fit its container.
  - pault 15y ago
    Yes, I'm looking forward to dropping IE8 support so I can use this. :)

crcastle 15y ago

"load no images when JavaScript is disabled" This solution works fine if JavaScript is disabled. It just loads the smallest image if "mobile" is in the user agent string and the largest image otherwise. http://adaptive-images.com/details.htm http://adaptive-images.com/details.htm

underwater 15y ago

You should actually read the details page before criticizing the project. It does none of the things you say. In fact the technique is very similar to the one detailed in the ALA article.

dmethvin 15y ago
Yes, it says the requirements are Apache 2, PHP 5.x, and GD lib. I would call those specific server-side technologies.
- underwater 14y ago
  But it doesn't "load two images, load no images when JavaScript is disabled, depend on userAgent sniffing". The only reason PHP or GD is needed is to automatically generate alternate image sizes, which the ALA author does manually.

toenail 15y ago

Yeah, and this "solution" does false advertising. For crap's sake, it's not a HTML solution if I need JavaScript, Apache and (ffs) PHP.