问题
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
回答1:
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:
Append this javascript line to
<head>
section in your layout:<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/‘;</script>
add an
AdaptiveImagesController
with an actionadapt_and_serve
.Lets
adapt_and_serve
read/cache/adapt and serve (with a far-in-the-future exipiration header) the file corresponding to every request.Add a rule to
routes.rb
to catch image requests that need to be adapted and route them to AdaptiveImagesController#adapt_and_serve
回答2:
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 .
来源:https://stackoverflow.com/questions/14285473/adaptive-images-for-ruby-based-servers