Picking images for different screen sizes

[Sutty100]

I was wondering if there was a feature out of the box I can use to fulfills the requirements of our content creators.

They want to be able to specify that once the screen drops below a certain width: eg on a mobile that the image being displayed would switch from the desktop image which for example might have text on it that has become to small to read to a different image which does not have any text on it. I was wondering if this is something that could be achieved by using the renditions feature in some way?

[edubey]

AEM does have this with Adaptive Image Component, You author 1 image, rest will taken care by it.

They have good documentation on this, Refer: https://docs.adobe.com/docs/en/aem/6-0/develop/mobile/responsive.html#Using Adaptive Images

Thanks

[Sutty100]

I don't think that will handle my requirements. I want to be able to say show /dam/image1.png by default but if screen width goes below a threshold then show /dam/image2.png 

[kautuk_sahni]

Hi

You can achieve this using CSS Media Queries,

Example Demo 1:- http://jsfiddle.net/vk02svc6/

HTML

<img src="image.jpg" class="image1"/> <img src="image.jpg" class="image2"/>

CSS

.image2{ display: none; } @media only screen and (max-width: 500px){ //some value .image1{ display: none; } .image2{ display: block; } }

Example Demo 2:- http://jsfiddle.net/vk02svc6/1/

HTML

<div class="example"></div>

CSS

.example{ background-image: url("example.jpg"); } @media only screen and (max-width: 500px){ //some value .example{ background-image: url("example2.jpg"); } }

I hope this would help.

Thanks and Regards

Kautuk Sahni

[Tuhin_Ghosh · Accepted solution]

You can also try to create different rendition for you images and use cssmagic to render different images based on the resolution of the screen.

Thanks

Tuhin

[Sutty100]

Thanks couple of solutions to investigate more, i think the renditions and using css might be quite promising.