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.
1 Like
I would store them in higher quality and use the browser to scale them down.
Greetz, bengtler
1 Like
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:
1 Like
Thank you so much. Issue solved 
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: http://codepen.io/mainalikishan/pen/ghvxt
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. http://s.codepen.io/boomerang/99016f0839baa02b98db802a1e6ae48a1408028566723/index.html#/tab/friends
can i use picturefill with ionic 1? or is it still having issues?