Optimizing Images for Mobile, Native and Web Apps

Nowadays applications are expected to provide a better look & feel than ever before. This trend is not limited to mobile apps – desktop and web applications need keep up as well. A common solution is the extended use of images and graphics.

But all the shiny pixels can take up quite a bit of space and memory. The size of images have a number of implications: Increased loading time of your webpage can frustrate users and might even degrade your google search ranking. Mobile apps might get too big to download them via 3G from the App Store. Even RAP and Tabris apps suffer from unnecessary large images.

The popularity of HiDPI aka Retina for mobile and desktop just adds fuel to the fire by requiring additional high resolution images.

This is what you can do to optimize images – even if you are not a graphics specialist:

  1. Use the PNG file format for your images.
  2. Process your files with one of the following PNG optimizers to reduce the size by up to 60% or more!

Some Background

This is how Wikipedia describes the file format:

Portable Network Graphics (PNG / ˈpɪŋ /ping) is a raster graphics file format that supports lossless data compression. PNG was created as an improved, non-patented replacement for Graphics Interchange Format (GIF), and is the most used lossless image compression format on the World Wide Web.

I spare you with the technical specs. The important facts of the PNG format you need to know are:

  • Open Standard, supported by image editors and can be displayed by nearly all frameworks, systems and browsers.
  • Lossless and thus not limited to a 256 color palette.
  • Real transparency (pixel with alpha).
  • best for graphics (icons, logos, screenshots).
  • not the best format for photographic pictures.

What a PNG optimizer does

  • Remove unnecessary metadata.
  • Apply the color profile to the actual color values and remove the profile description.
  • Sometimes decreasing the number of colors (lossy) with measures like "bit depth reduction", "color type reduction", "color palette reduction" and "alpha channel reduction" are used to save some precious bytes.

Spread the word

I would be happy if you could share your experiences in the comments below and tell the world how much weight you lost in your application.

One Response to “Optimizing Images for Mobile, Native and Web Apps”

  1. Laurent Asfaux says:

    Progressive JPEG is a great way to deal with HDPI : the image is bigger, but is shown faster to the user and can be better handled by proxys with image compression like Opera Mobile or the beta compression feature of Chrome Mobile.

One response so far

Written by . Published in Categories: Editors choice, Planet Eclipse

Published:
Aug 12th, 2013
Follow:

Twitter LinkedIn Google+ GitHub