Best Practices For Mobile Usage

We have many users who use Cloudinary to deliver media for mobile.

Our general optimization tips also fit mobile use cases as well, but in order to have a more detailed approach towards mobile use cases, we've assembled some Cloudinary best practices for mobile that can additionally be applied

Here are some best practices to use when delivering media using Cloudinary, on your mobile app.

• In case your users have a low bandwidth constriction you could deliver a better-optimized image format.
  
  If you use native views, you can use Google's libwebp, even on iOS, to display "Webp" images from Cloudinary which are usually about 30% smaller than similar-quality jpg's.
  
  Just add "format(`webp`)" (on Android) to your Cloudinary transformation, or a ".webp" suffix to the URL to deliver the image as "WebP". You could change the quality settings to your liking.
  note that a "Webp" of quality 80 is usually equivalent to a jpg of quality 90.
  You could read more about that here.
  
  Note that Webp is supported natively on Android (version 4 and up for lossy, and version 4.2.1 for lossless and transparency). On iOS it can be supported with libwebp as mentioned above, however, as "Webp" is not a native format on iOS, decoding is not as efficient and there might be a performance toll, especially on older devices.

• Our HTTP caching also addresses mobile practices. The default "max-age" of our cache control headers is 1 year, so its close to "semi-permanent".
  If you are using images that are updated with the same URL, make sure you invalidate the cache when you overwrite them. This happens automatically if you do it in the media library. When using our API make sure to include the "invalidate" parameter.

• To cope with different image densities there are a few relevant options: 
  • In order to support retina display, we have a javascript-based solution, as can be seen here: http://cloudinary.com/blog/how_to_automatically_adapt_website_images_to_retina_and_hidpi_devices
  • For native images, its possible to use:
    double scaleFactor = [UIScreen mainScreen].scale;
    and use scaleFactor as your Cloudinary "DPR" parameter to generate the URL. This example is for Objective C/iOS but you can get the same for Android using DisplayMetrics.density
  • In your app, you could detect network type usage and according to that optimize the image delivery.
    
    For example request different image sizes, force dpr to 1.0, lower quality to 70 etc.
    
    Note that you should take care with caching in this case - if you are perfroming local client-side caching and you already have images cached, you don't want to reload them in lower quality when the phone is off-wifi, so only do this for your refreshed images.