http://world.episerver.com/documentation/items/developers-guide/episerver-cms/7/content/display-channels/

Check out displaychannels first. 

Normally you solve it by using responsive design and a gui framework like bootstrap though

http://getbootstrap.com/

Check out the alloy example templates for code examples

Hi Daniel,

Thanks for your reply.

My secnerio is  i have three Image fields (Desktop,tablet,mobile) and i have uploaded three different images.

so when i render a page in browser , i am able to detect the mobile device(Request.Browser.IsMobileDevice)  but for the tablet it also returns true .

I pasted my code here also.

if (Request.Browser.IsMobileDevice)
           CurrentBlock.BackgroundImage.Mobile  
else if(.........................)
         CurrentBlock.BackgroundImage.Desktop

else if(.........................)

           CurrentBlock.BackgroundImage.Tablet

thanks

If it's just images it's probably easiest to go with a javascript component for choosing the correct image like

http://responsejs.com/

combined with an automatic rescaling service so editors don't need to create multiple images everywhere like

http://world.episerver.com/Blogs/Andre-Hedberg/Dates/2013/12/Get-ImageResizer-to-play-along-with-EPiServer-75/

or using a DAM like imagevault if you have tons of images

Hi Daniel,

But i need to display three different images for the respective devices. i should not use any java script also for this..

Thanks

The EPiServer way is then to set up display channels for the different resolutions (desktop, tablet, mobile) and then you can choose different views for each device (render different properties). Editor will need to upload images for every device then if they are completetly different and not just scaled versions of the big image. 

Still possible to solve easier by js though

Hi Manikandan,

If you're working with HTML5, all modern browsers have support for responsive images. No javascript required.
You have to specify different images in the srcset attribute, and do some tweaking in the sizes attribute.

http://www.sitepoint.com/how-to-build-responsive-images-with-srcset/

We've been using that technique to serve different sizes of the same image.
It may not work very well with different images.

For example, let's say you have the following img element:

<img src="/image_200.jpg"
        srcset="/image_200.png 200w,
                     /image_400.png 400w,
                     /image_1200.png 1200w"
        alt="" />

Default / fallback image is image_200.jpg
If image size is between 200 and 400px (mobile phone?), image_200.png will be served.
If image size is between 400 and 1200px (tablet?), image_400.png will be served.
If image size is 1200+ px (desktop?), image_1200.png will be served.

But once image_1200.png is served and you resize the browser to smaller size, image_1200.png won't be replaced with the smaller one.

Detecting client's device (is mobile, is tablet, is desktop) and/or screen orientation is very error prone. Responsive images simply work on every device.

Hi Dejan,

Thanks for your reply,

Here i am using three different images and the images will be changed periodically.

Thanks

Well, either implement display channels for them. Gives you full freedom of presentation but requires more work.

Or use some gui skills with a little creative js. Faster but less flexible if you need completely separate presentation. 

A simple example on how to implement this using display channels and ImageVault is available here, http://blog.imagevault.se/post/83601413164/using-episerver-and-imagevault-to-build-a.

There is also some examples in the Vaultopia demo site, http://world.episerver.com/download/Demo-Sites/Vaultopia/. Sources code is available on GitHub.