[HTML]Rendering images in a way that reduces cellular data use

Question

My news app is pulling news feeds with images and in the process ends up eating up 20-30mb when downloading all the feed images. I need help utilizing cache for the older images.

But when loading individual images, I am still using about 1mb for an image displayed on a 4.5" windows phone. This seems odd.

Is there a solution for reducing the image size or resolution? It seems to be pulling the full-HD images.

Any help with caching would be useful too.

Answer 1

Hi jflintstone81,

>>My news app is pulling news feeds with images and in the process ends up eating up 20-30mb when downloading all the feed images

How did you pull the news feed in your app? In my experience, we can load part of feeds and use thumbnails instead of full-size images.

Basically, if we can't get thumbnail using direct way, we need to decode and encode images to scale it, while incremental loading is a common way to optimize performance, it will avoid loading large amounts of data, this article will show you how to make it work in WinJS project: http://blogs.msdn.com/b/windowsappdev/archive/2013/06/17/optimizing-listview-item-rendering.aspx

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 2

This sounds like what I am looking for but I am having trouble integrating the code in my app. The framework I am using is from the Feed reader sample for Windows 8.1.

https://code.msdn.microsoft.com/windowsapps/Feed-reader-sample-99d68cf8

I assume it should be included in the Render.js but I am not familiar with how the images are being pulled in this sample. Seems like bodyDiv is grabbing all content all at once.

Answer 3

This sounds like what I am looking for but I am having trouble integrating the code in my app. The framework I am using is from the Feed reader sample for Windows 8.1.

https://code.msdn.microsoft.com/windowsapps/Feed-reader-sample-99d68cf8

I assume it should be included in the Render.js but I am not familiar with how the images are being pulled in this sample. Seems like bodyDiv is grabbing all content all at once.

Hi jflintstone81,

>>I assume it should be included in the Render.js but I am not familiar with how the images are being pulled in this sample

You need to check data.js file, the _downloadArticlesAsync function is to download articles for feed, it used SyndicationClient class to retrieve feeds from a URI asynchronously

// Determine whether to bypass the cache based on the user's connection cost.
var syndicationClient = Windows.Web.Syndication.SyndicationClient();
syndicationClient.bypassCacheOnRetrieve = Status.bypassCache;

syndicationClient.retrieveFeedAsync(feedUri).done(function (syndicationFeed) {
     that.articles = [];

     // Create an article for each item in the feed.
     syndicationFeed.items.forEach(function (syndicationItem) {
           var article = new Article(syndicationItem, that);
           that.articles.push(article);
     });

     that._currentLoadStatus = Feed.LoadStatus.loaded;

     // Propagate success up with the current feed.
     complete(that.articles);
}......

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.