There are great problems for those who want real responsive images.
Note to self: The lazy, cross-browser, cross-device (desktop and mobile), low overhead, kinda light, solution so far is:
- make your images 2x their display size
- compress them with high compression ratio (30% quality)
- and set their size by css (using media queries if needed)
For an entry point on the subject, you may start here: noupe article
Google is adding mobile-friendly to rank pages on search results, forcing everyone that doesn’t want to be left behind to start working on a mobile friendly solution for their sites.
To check how Google ranks your site, visit:
https://www.google.com/webmasters/tools/mobile-friendly/
and enter your site url address.
This is good and bad at the same time. Fair and unfair. Nevertheless it’s a game changer.
Use http://www.initializr.com/ to get an HTML5 Boilerplate template with jQuery, Bootstrap and more (you can choose what to put in and what to leave out)
Then goto http://bootstrapzero.com/bootstrap-templates or http://bootswatch.com/ and get one of the beautiful free templates.
On bootstrapzero, there is also some extra functionality in some themes. But I haven’t tested them yet.
Thinking on using one of these two on my next app.