locked
[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.
    Saturday, May 9, 2015 12:04 AM

Answers

  • 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.

    Monday, May 11, 2015 3:14 AM
    Moderator
  • 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.

    Sunday, May 24, 2015 6:15 AM
    Moderator

All replies

  • 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.

    Monday, May 11, 2015 3:14 AM
    Moderator
  • 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.

    Friday, May 15, 2015 3:04 PM
  • 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.

    Sunday, May 24, 2015 6:15 AM
    Moderator