Image Formats

There are many digital image formats available for use, and it a designer’s job to decide on the format that is best suited for the project at hand.

Only certain formats are suitable for the web – those that sufficiently compress and optimize the image so that they aren’t too big in terms of file size.  Resolution, meta-data, colour richness and are all optimized as there is no point in having image quality that exceeds the display limitations of computer monitors.

In the past few years, with the introduction of widespread broadband use for most users, it has become less important to consider download speeds when deciding on suitable image file sizes.  However, this concern has been replaced with the need to consider downloads speeds when designing with mobile users in mind.

JPEG’s (Joint Photographic Expert Group) use a ‘lossy’ form of compression.  They discard data that is less important to human perception – most people are unable to see any difference between an original and a compressed image.  After compression, a 13MB image will be reduced to about 1.5MB, and is therefore much more suitable for use on the web. Most digital cameras save images as JPEGs, and users can determine the balance between level of compression and maintenance of accuracy.  Overcompression can cause ‘artifacts’ (visible square shadows).  JPEG’s suffer from generation degredaion when repeatedly  JPEG’s are not suitable for images that contain text (for example, banner images with text) – GIF or PNG should be used instead in these cases.

P1010390

 

 

 

GIF (Graphics Interchange Format) were developed for Compuserve pre-web.  They are made up of 256 colours and can have transparent colour defined – whichever colour is set as the background becomes the transparent colour.

GIF’s are often used to create animations.  A series of images can be stored in the same file, with information embedded into the file to determine the interval between images.  Animated images of this nature can be considered old fashioned though.

GIFs work best with images with relatively small number of colors and large areas of the same colour.  They are often not the best choice for photographic images as these often have more than 256 colours in them.

There was a great controvesy a number of years ago when the owners of the algorithm tried to impose a licence fee on commercial software using GIF’s, which ultimately led the creation and widespread use of PNG’s

P1010390

 

 

PNG’s (Portable Network Graphics) were created by open source advocates looking to avoid infringement of the controversial patent on GIF’s.  They combine the best of JPEGs and GIFs in that they feature lossless compression, and dynamic colour palette (not limited to 256).  They benefit from a more sophisticated form of transparency than GIF, where each pixel can be stored as an alpha (transparency level) value, from completely transparent to completely opaque.  However, IE7 does not support PNG’s transparency, though there are hacks available that will fix this (http://www.twinhelix.com/css/iepngfix). Also, there is a popular argument that as designers we really shouldn’t be wasting our time on the dying breed of users with older versions of IE.

Image

TIFFs (Tagged Image FIle) were originally created as an atempt to get desktop scanner vendors of the mid eighties to agree on a common scanned image file format.  Compression is optional, and layers, alpha transparency and other special photoshop features can be preserved.  This format is rarely used in web design projects as it is not widely supported by web browsers, and the file sizes are very big. TIFFs are best used for print design and desktop publishing.  In fact, printers will often specifically request TIFF files.

<< TIFF files cannot be uploaded to WordPress, hence no image of a TIFF is shown here. >>

 

 

PICTs were developed by Apple in 1984 and are now rarely used.

<< Photoshop cannot save an image as PICT format. >>

 

 

BMP’s are Microsoft’s standard image format.  They are usually very big files with little compression.  They are usually too large to use on the web and are best avoided for web design projects.

<< BMP files cannot be uploaded to WordPress, hence no image of a BMP is shown here. >>

 

EPS files (Encapsulated PostScript) are used for vector-based images in Adobe Illustrator.

An EPS file can contain text as well as graphics. It also usually contains a bit map version of the image for simpler viewing rather than the vector instructions to draw the image.

<< EPS files cannot be uploaded to WordPress, hence no image of a EPS is shown here. >>

 

 

Pixelation

Pixels are the tiny dots that make up bitmapped pictures on computer screens. Elements on the screen, such as font and area sizes, are often measured in pixels.

Pixelation occurs when a graphic is scaled it up and the image becomes blocky and unrefined in appearance – i.e. the individual pixels are apparent to the viewer.

The more ppi (pixels per inch) the original image has, the better the image clarity. For print, 72 ppi is acceptable but will not have the same high-clarity that a 200 ppi image would have. Over 300 ppi is not necessary since the naked eye cannot distinguish any difference at this point.  As most modern monitors are limited to 72 ppi, there has until recently been  little point designing images for web sites with a greater ppi than this.  However, with the recent introduction of Retina displays, designers are now starting to design with a higher ppi for high definition viewing.

When producing or obtaining images, designers should always look to start of with as large an image as possible, regardless of ultimate image size required.  Images can always be successfully scaled down, but scaling up will always result in data loss and there pixelation of some degree.

Below is an example of an image that has suffered from pixelation (left hand image)

Image

Moire Patterns

A moire pattern is a (usually undesired) interference pattern on a digital image which is the result of overlapping grids, lines, dots and other repetitive details.

Any image printed on a printing press (like a book, magazine, newspaper, postcard, calendar, etc.) is printed with halftone screen patterns. The printed image is composed of a pattern of dots. The halftone dots are printed entirely in fine dots which cause optical problems in a scanned image because the scanned image is also composed of fine dots. When the two patterns are superimposed, there is often a resulting moiré pattern.

Many scanner driver programs provide a ‘descreen’ filter  to remove moire patters during the process of creating digital images from halftone images.

There are various techniques within Photoshop for removing moire patterns.  Here is an example of one of these methods, as provided by http://photographylife.com

  • Select the area affected by moire pattern
  • Select colour of moire area as foreground colour using eyedropper tool
  • Create empty layer
  • Select Mode as Colour for this layer
  • Fill the new layer area with foreground colour
  • The rainbowing effect should now be removed from the image
  • Keep the area selected, but hide the new layer you’ve just been working on
  • Select layer of the original image with moire on
  • Create new layer, and again blend mode should be changed to colour
  • Again fill the new layer, but this time use White as the colour
  • Select the original layer and go to Layer->New Adjustment Layer->Hue/Saturation
  • Adjust the hue and saturation levels until the moire pattern has been removed (ensure view is at 100%).
  • Turn the second (white) later back on
  • Merge all layers just worked on

Before (with Moire):

Image

After (without Moire):

Image

Interestingly, moire patterns are almost never seen in images of nature – they prodominantly appear in man-made objects and materials such as fabrics and architecture.

Many currency notes use fine circular and wavy designs as these are are likely to exhibit a moiré pattern when scanned and printed using a digital scanner.

Task 1 – Images; sourcing, digitising and defects.

Preparing and manipulating digital images are fundamental tasks for all digital-media designers when building websites.

There are three main methods for obtaining images in a digital format – scanning, screengrabbing and uploading images directly from a digital camera.

1) Scanner – Scanning requires an additional piece of hardware called an Image Scanner which connects to user’s computer, usually via USB.  Physical documents (text, drawings, handwriting, print photographs etc) are scanned using the Image Scanner, which then coverts into a digital image to be stored on the computer.  The resulting digital image is usually stored as a JPEG or PNG format file, which can then be manipulated in preparation for inclusion on a website.

scanner

2) Screengrab – Screen grabs are the ultimate WYSIWY(L)G (What You See Is What You [Literally] Get) form of digital image capture, and the only hardware required to create them are a computer and a keyboard.

Users take a ‘snapshot’ image of the current display, exactly as it currently appears in the monitor.  On PC’s, this is achieved by pressing the PRINT-SCREEN key.  On MACS, Cmd+Shift+3 is used.  A screengrab of just the application currently active can be obtained by pressing Alt+PrintScreen on PC’s (for MACS, Cmd-Shift+4 followed by Spacebar is used).

The resulting image is placed in the clipboard (or desktop for MACS) and can then be pasted into an image editing program such as Photoshop or Paint.  The resulting image can then be cropped using the CROP tool to show only the area of image required.

Tee

This image was created using only the screengrab facility.  7 individual images were ‘grabbed’ from the internet, pasted into photoshop, cropped and then composed into a single image.
 

Screengrabs (also known as screendumps, screenshots and screen captures) are particularly useful for reporting system problems to technical support staff,  preparing instructions and procedures or obtaining images from sources that cannot be directly copied into the user’s file directory.  However, care should always be taken to ensure that copyrighted material is not being unlawfully obtained and used when capturing images for later use in this manner.

3) Digital Cameras – Digital Images can be uploaded onto a computer directly from a digital camera.  Digital photographs are usually stored on the camera as JPG or TIFF files, and these can be transferred to the user’s computer either by USB connection or by removing the memory/SD card from the camera and inserting directly into the appropriate slot on the computer.  Modern digital camera’s allow images to be stored in RAW format.  This gives the user greater freedom in terms of manipulating the image before committing to a usable format that will usually result in compression where some information (and therefore quality) will be lost.

Colour Casts

A colour cast is a tint of a particular colour across an entire photographic image.  Many old photographs suffer from colour casts, particularly of an orange hue.  These can easily be corrected by scanning to create a digital format, then either adjusting the white balance, or manually adjusting the levels through Adjustments > Levels.  Correcting a batch of nostalgic photos can be a very satisfying task as familiar images come to life and reveal details never seen before simply by removal of a colour cast and enlargement of the image as a whole.

Below is an example of an image that has had it’s excessive red colour cast removed.

Before:

Image

After:

Image