Optimizing Images for Mobile, Native and Web Apps

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.