Good Image Processing (pt.1) The Basics on Image files.

Next Post

Preparing images for use on your website might seem pretty simple and it certainly can be. However there are a few factors that you might not appreciate that can have a big impact on your websites performance.

For this first in a series of blog posts I will be discussing how you, the site owner, prepares images for use in the site; typically those inline images using to make your text pages more interesting and product images for ecommerce (more specifics on product image creation will come later).

Image Attributes

When you view an image on a website you can see how wide and tall it is but what isn’t so obvious is how much data needed to be transferred for you to be able to see it.

Images have 4 basic attributes: 

  • Height.
  • Width.
  • Colour depth (aka DPI).
  • File size (aka Megabyte [Mb] or Kilobyte [Kb] size).

Height and width are pretty obvious; it’s the depth and file size that are harder to appreciate.

Height & Width

When you view an image online a modern website the developer often constrains their image proportions (width and height) shrinking them to fit the site design and to keep images uniform in appearance across the site.

This means the site owner can upload an image 1000 x 1500 pixels (which if displayed at full size would take over the whole page) but when displayed in a page the site can dynamically constrain it to visually shrink it so it appears in a more manageable size typically all images will be resized to a fixed width while the height is allowed to scale so the image doesn’t become distorted by stretching or shrinking one of the axis disproportionally.

Colour Depth

Depth is a little trickier and not at all obvious just by looking at an image. Images used in print work are often stored at 300 Dots Per Inch (DPI) or over. This means the image will print well in glossy magazines with high-quality printing and avoids a low quality ‘newspaper image’ look where the density of dots that make up the image are more spaced out and using less ink.

Most modern computer screens display at 72 or 96 DPI which means a 300DPI image has 3-4 times more detail than is necessary for clarity of displayed, all that extra information the image stores is lost on the viewer resulting in unnecessary large file sizes.

File Size

As mentioned above images have a file size which is sometimes known as the weight or storage size. This is the amount of space an image (or any other file for that matter) takes up on a harddrive and therefore the amount of data required to be transmitted from the storage (webserver) to a user’s web browser. Very generally a web page is under 30Kb in size (you can fit around 15,360 words in 30Kb file) but a single image can be orders of magnitude larger.

Since every Kb of data that makes up your webpage needs to transfer from your hosting server to a user’s browser the more data that needs transmitting the longer it takes for the user to get the complete webpage.

The weight of an image is dependent on all the previously mentioned factors (height, width & depth) and so it’s useful to spend a little time with an image editor to size images correctly and to use the Quality setting to help optimise your images for faster delivery.

It helps to think of an image like metal cube. You can have 2 cubes the same size and colour but one is made of lead and the other aluminium. The lead one takes far more effort to transport while being visually identical and since it’s how the image looks that’s important why make your customers and servers do all that extra lifting?

 

Part 2 continues with Editing & Saving for Web.


By Alanna at 23 May 2014, 13:07 PM