How to rock different screen sizes


Hi everyone,
I want to make my apps appereance as neat as possible, thus I’ll have to take good care of all possible screen sizes and densities. I haven’t optimized anything yet, so it’s quite blurry. I want my final app to be super sharp, but how am I going to do that? Is there a best-practise approach of how to structure and load images and make use of the screen capabilities that different mobile devices have to offer?
Should I save all images in different sizes or save them in high quality and scale them down accordingly? Sorry for this very basic question, but I think it’s quite crucial to get this right in order to get smashing results.


I would store them in higher quality and use the browser to scale them down.

Greetz, bengtler


For general layout, media queries are your friend.

For responsive images, look into the picture element. For now, you’ll need to use a pollyfill. There is a really great one called Picturefill:


Thank you so much. Issue solved :slight_smile:


Does ‘Picturefill.js’ work with ionic? Anybody tested it?


Why wouldn’t it? It’s HTML/javascript, as is Ionic.


I thought the same but when I tried to use, I can’t make it work. Can you please provide codepen example along with ionic.


Can you provide a codepen example of it not working?


Here is the codepen example that it’s not working:

PS: “img srcset” code only works in home tab but not in other tab or state


Weirdly, I couldn’t even get the examples using the sizes syntax to work ANYWHERE… I tried a very, very basic example on my desktop and didn’t seem to work. Weird.

I forked your pen and used the syntax and it seems to work just fine, however,

EDIT: If the below link doesn’t work, try this.


can i use picturefill with ionic 1? or is it still having issues?