: Images for a mobile 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

@Vandalay110

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.

Vote Up Vote Down