Image Optimization-A Key Element while Designing for Mobile and Web

Vikas Kumar | 17th August 2016

Image Optimization A Key Element

In a typical day, a Graphic Designer juggles with various image formats, resolution, size, bit depth and other image optimization. So what exactly are all these terminologies. Let’s demystify them.

Image formats are basically bitmaps (binary data) written by image editing softwares, these bitmaps when combined as a whole create an image that can be a photo, icon or anything else. The most popular image formats used today are .PNG (Portable Network Graphics), .JPG (JPEG – Joint Photographic Experts Group) and .GIF (Graphics Interchange Format).

All these image types have specific properties of their own such as

  1. .PNG can have transparent pixels information which enables it to display images in a stacked (layered) form and through transparent areas it displays parts of images stacked beneath them.
  2. .JPG (JPEG) can produce images that are very small in size without losing much detail.
  3. .GIF is popular for it’s unique feature of animating various frames of an image.

Resolution is the total number of pixels an image is comprised of. It is calculated by multiplying the horizontal and vertical number of pixels of an image. e.g. if an image is 1920 x 1080 px, it’s resolution would be 2073600 pixels.

 Size refers to the amount of disk space an image requires. The various units for measuring disk space is KB (Kilobyte), MB (Megabyte), GB (Gigabyte). Usually, an image size ranges between KB – MB. It never goes in GB, not for a single image. However a thousands of images when stored collectively, the total size of the image collection may get in GB and even beyond GB in some cases.

Bit depth also known as color depth, is the number of bits used to indicate the color of a single pixel, in a bitmapped image. In layman terms it means the higher the bit depth the better the color representation of the image will be.

Optimization or image optimization is the technique of balancing the size and image quality (bit depth and resolution) of an image. The key thing to remember while doing so is that at 100% scale of the given image the quality of the image has to be reduced to such level that it doesn’t look distorted or pixelated and at that point the size of the image that’ll achieve is called the Optimized Image Size.

About Author


Vikas Kumar

No Comments Yet.

Leave a Comment

Name is required

Comment is required

© Copyright 2015-2024 Oodles Studio. All Rights Reserved.

Request For Proposal

Recaptcha is required.