Google Reader-esque optimizing of WebViews on Android

Issue

I have an app that displays the html of a blog post in a WebView. The images, however, are rather large and do not fit to the screen. When viewing the post in the Android Google Reader app, however, all of the images have their width reduced to fit the screen.

The Android Google Reader will also parse out all embedded Youtube and Vimeo embeds and replace them with thumbnails with links so the dedicated Youtube player can play the video instead.

How would I go about doing this? I've tried using Jsoup to match all the images in a post and alter their width, but I don't know how to go about modifying the Youtube video embeds.

Solution

For converting embed Youtube videos to thumbnails you can do it with mobitube.js code from Mobilize.js project:

https://github.com/mobilizejs/mobilize.js/blob/master/js/mobitube.js

Also I believe Google Reader simply resizes the images using CSS overrides.

Mobilize.js has also tools for rewriting image tags and perform "de-float" operation for them:

https://github.com/mobilizejs/mobilize.js/blob/master/js/mobilize.js#L2005

More about defloat algo:

http://webandmobile.mfabrik.com/docs/web-and-mobile/user-manual/resizing

If you want to resize images on the server-side this is a third party solution:

http://adaptive-images.com/

... though writing your own image resize proxy server from the scratch is not that challenging.

Answered By - Mikko Ohtamaa