5 ms·

Adaptive Images in HTML

35 points by orofino 15y ago

fpp 15y ago
Also have a look at the discussion reg. server-side vs client-side adaptive images hacks at: http://24ways.org/2011/adaptive-images-for-responsive-designs-again http://24ways.org/2011/adaptive-images-for-responsive-design...
atjoslin 15y ago
this is cool:)
orofino 15y ago
I'm not terribly well versed with nginx, but the creator mentions only support for .htaccess, I was able to get this working with the following in my config for nginx: if ($request_filename !~* ai-cache) { rewrite \.(?:jpe?g|gif|png)$ /adaptive-images.php last; }
kijin 15y ago
Urrggghhh, PHP? But this is exactly the kind of thing that PHP is good at. Dump a file in a directory that does one specific thing, and you're good to go. No need to integrate it with the rest of your web site. It's just a little CGI-like script that does its own thing. But if you use this on a smallish VPS, keep an eye on memory usage. Image processing in PHP tends to hog a lot of RAM, and even a small number of simultaneous requests can crash a server. You might need to warm your cache a little bit before going public with new images.
- orofino 15y ago
  If you read up on the it, you'll see that this creates the images on the fly and you can specify a time for it to cache them. You don't have to be constantly recreating the images.
  - kijin 15y ago
    That's why I said you might want to "warm your cache" before making new images public.
dmethvin 15y ago
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).
deleted 15y ago
[deleted]
huhtenberg 15y ago
That lowercase /t/ in their choice for the body font is really annoying.
dwd 15y ago
This approach was also put forward by Stephanie Rieger. Specifics start at slide #83: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server http://www.slideshare.net/yiibu/adaptation-why-responsive-de...
goggles99 15y ago
Just in time for 4G to be everywhere in my area :/ Where were you 3 years ago? Now I would just be annoyed by this when I tried to zoom in on an image and got a pixellated mess.

35 points by orofino 15y ago

fpp 15y ago

Also have a look at the discussion reg. server-side vs client-side adaptive images hacks at: http://24ways.org/2011/adaptive-images-for-responsive-designs-again http://24ways.org/2011/adaptive-images-for-responsive-design...

atjoslin 15y ago

this is cool:)

orofino 15y ago

I'm not terribly well versed with nginx, but the creator mentions only support for .htaccess, I was able to get this working with the following in my config for nginx: if ($request_filename !~* ai-cache) { rewrite \.(?:jpe?g|gif|png)$ /adaptive-images.php last; }

kijin 15y ago

Urrggghhh, PHP? But this is exactly the kind of thing that PHP is good at. Dump a file in a directory that does one specific thing, and you're good to go. No need to integrate it with the rest of your web site. It's just a little CGI-like script that does its own thing. But if you use this on a smallish VPS, keep an eye on memory usage. Image processing in PHP tends to hog a lot of RAM, and even a small number of simultaneous requests can crash a server. You might need to warm your cache a little bit before going public with new images.

orofino 15y ago
If you read up on the it, you'll see that this creates the images on the fly and you can specify a time for it to cache them. You don't have to be constantly recreating the images.
- kijin 15y ago
  That's why I said you might want to "warm your cache" before making new images public.

dmethvin 15y ago

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).

deleted 15y ago

[deleted]

huhtenberg 15y ago

That lowercase /t/ in their choice for the body font is really annoying.

dwd 15y ago

This approach was also put forward by Stephanie Rieger. Specifics start at slide #83: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server http://www.slideshare.net/yiibu/adaptation-why-responsive-de...

goggles99 15y ago

Just in time for 4G to be everywhere in my area :/ Where were you 3 years ago? Now I would just be annoyed by this when I tried to zoom in on an image and got a pixellated mess.