2

I'd like to deliver images to client based on the size of the user screen, as in If I have High resolution image, and the user want to view it on a mobile I don't want to send the full HD image, instead I'd like to send the image shrinked to the user's device dimension which will increase the loading speed on low bandwidth devices

There is a solution for this here

Adaptive Images detects your visitor's screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page's embeded HTML images.It is intended for use with Responsive Designs and to be combined with Fluid Image techniques. (From the given link)

I see solutions of this kind for php & apache based servers, is there a solution for the web application which have ruby based servers ? a gem may be... Thanks

Mudassir Ali
  • 7,913
  • 4
  • 32
  • 60

2 Answers2

5

Media queries would only work with CSS background images.

By the way Adaptive-Images like solution aren't that difficult to implement.

They just serves images dynamically in place of the web server, caching adapted images to speed the process up and avoiding to waste resources.

Images are resized and cached depending on the value of a cookie that holds the requesting device resolution.

Saying that you're in Rails, take the following steps:

  1. Append this javascript line to <head> section in your layout:

    <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/‘;</script>

  2. add an AdaptiveImagesController with an action adapt_and_serve.

  3. Lets adapt_and_serve read/cache/adapt and serve (with a far-in-the-future exipiration header) the file corresponding to every request.

  4. Add a rule to routes.rb to catch image requests that need to be adapted and route them to AdaptiveImagesController#adapt_and_serve

mcasimir
  • 678
  • 6
  • 12
-1

I think there is nothing special in serving adaptive images . It depends on how you have set up your frontend: you use media queries to resolve the user's screen dimensions and decide the image size . You can use Rails framework for your purpose for sure . There are a number of responsive design implementations working fine with Rails - Twitter Bootstrap is a famous one .

R Milushev
  • 4,295
  • 3
  • 27
  • 35
  • I mean I have a image 1920X1080px with width & height set to 100%, now if a mobile user of 640x480px screen views the website he'll see the image fit to his screen but the image downloaded would be 1920x1080px in res, what I rather want is if I serve him the image resized to 640x480 then he'll need to download a smaller sized image and the website loads faster compared to previous case, getting me ? – Mudassir Ali Jan 11 '13 at 20:08
  • Absolutely , just try Bootstrap-responsive or see [this link](http://timkadlec.com/2012/02/media-query-asset-downloading-tests/) . – R Milushev Jan 11 '13 at 20:13
  • so u mean to have different images for different user screen resolutions on server( about 5-6 different sizes ) then using media queries to point the image url to specified image as per the user screen dimension, right ? – Mudassir Ali Jan 11 '13 at 20:22
  • I think that's the way it works . I cannot imagine image processing on the fly .It's important to mention , that Rails has a couple of nice gems for image processing during upload time . – R Milushev Jan 11 '13 at 20:27
  • There are a lot of Compass/SASS based libraries for this too. Try looking for "SASS" and "media query" in a search. – ian Jan 11 '13 at 22:40
  • This does not answer his question. – Undistraction Mar 08 '13 at 20:38
  • 1
    If you use media queries to hide images, the request will be fired and the image will be downloaded. So if you have 3 copies of the image, and you hide 2 of them depending on the layout, it will download the 3, and only show one, making the website "heavier" than in the first place.Bootstrap only resizes the image from its original size to the one you want, requiring you to download an HD image even in small screens. None of the solutions in this post or in the subsequent comments are related to adaptive images – nunopolonia Mar 14 '13 at 16:11