OK, I get the whole fluid width thing. Very cool. But what about bandwidth? Esp. for Mobile.
Consider…
-
Assume I have a photo website that is showing this picture: http://www.flickr.com/photos/stuckincustoms/4321052153/sizes/l/in/photostream/
-
The size of this beautiful behemoth is 847kb
-
Yes, I can use size=100%, and it will scale…BUT…the file is STILL 847kb!
-
Size works in mobile, but a bandwidth nightmare.
I want to scale the actual byte size of my image along with its perceived size on-screen.
I want to know if this is even possible with current tech. As I do not think users will appreciate an 847kb file – no matter how pretty it is. I want to know what options, if any, are available. I have searched and cannot think of a way to do this short of serving a SEPARATE image. Which is not very “responsive”.
Well, fluid/responsive design is all about design, the aim of it is making the website looks good at various screen sizes. It does nothing for the technical aspects of website optimization.
In this case, you want to optimize not only the look (using fluid layout) but also the loading time and bandwidth. The solution would be process the image on server before transfer it to user.
Examples: http://adaptive-images.com/, http://24ways.org/2011/adaptive-images-for-responsive-designs.