CODEWITHSUNDEEP
javascriptcsshtmlresponsive-designmobile-website
Ryan
Ryan

Reputation: 10101

Save mobile client from downloading large image with responsive design

As responsive design is becoming more popular now, one of the drawback for responsive design is mobile client need to download the un-needed large images, e.g.

http://twitter.github.io/bootstrap/examples/carousel.html

The page scale very well on my iPhone, but the image downloed is 1500x550, which is wasted, slow and for some users, it incurred cost.

What would be the alternative approach, when I know the client is mobile, don't serve the large image? Are there any existing method/libray so I don't need to write my own UA sniffing code?

Upvotes: 2

Views: 318

Answers (3)

Jonathan Aquino
Jonathan Aquino

Reputation: 3870

If using the Clown Car technique, see my notes on making it work properly in IE: http://jona.ca/blog/notes-on-using-the-clown-car-technique-in-ie

Upvotes: 0

Chris Love
Chris Love

Reputation: 3893

Take a look at this article, Media Query Asset Downloading. I found that making the images a background image wrapped in another element works best.

This is a very common question, and a good one and there is not a 'best answer' yet.

Here is an article on the Clown Car technique

I hope this helps you out. I am glad you are concerned about the images on the different devices, this is a commonly overlooked issue.

Upvotes: 0

user652649
user652649

Reputation:

Take a look at http://www.w3.org/community/respimg/ and http://responsiveimages.org/

It's a W3 working group that is going to create a specification for responsive images:

http://picture.responsiveimages.org/

For now, you can use a polyfill written in javascript which has a similar syntax and it's maintained by the same guys accordingly to their own spec:

https://github.com/scottjehl/picturefill

I've tested it and i'm going to use it in production because it works brilliantly ;)

Hope this helps

Upvotes: 1

Related Questions