Images for a mobile

Question

So I've been doing a bit of reading but I'm very confused. I'm quite new to mobile and I've mostly used css to achieve the look on my mobile app. The only image that's being used in the app is a logo which appears on the sidebar.

I have been reading about how Android requires the images in MDPI, HDPI, ect. And iOS needs images in 2x, 3x. I understand these are images that needs to be loaded for different densities. What I don't understand is,

1. How do you make these images for different densities?

2. How do you implement these images so that they will load for the correct density.

3. Is SVG a good option?

I'm really new to mobile and know close to nothing in this regard. Thanks in advance.

Answer 1

SVG is a good option if you're using simple-ish vector images. Can I Use shows that the support is pretty good across devices now. You can get into trouble if the SVG has thousands of points, as the file size can get to be a bit large.

If you need to use raster images though, check out this article that talks about the emerging standard for responsive images. I won't completely rip off the article, but I can summarize a bit here:

• srcset defines a set of images that are available and lets the browser choose the best one to load based on the parameters you set and the size of the client's browser window. Doesn't work in IE but has a fallback to the standard src attribute
• picture opens up the possibility of art direction; they use the example of 16:9 images on desktop and square images on mobile. Doesn't work in IE or Safari/Mobile Safari though
• source type is a feature of picture that lets you use different formats when the browser supports them. So, if you want to try out WebP or whatever, you can add it to the set and have a JPG as a fallback.

I think the result is pretty messy, but you can get performance gains from it, as the author demonstrates. When it comes to getting all of these images together, you can export all those image sizes and types manually or you can find a CMS/plugin on the backend that can generate that stuff for you.