Image optimisation

Optimising images for the web is essential to and web design, getting the right balance between filesize and picture quality. Most of a web sites loading time comes from images, your website will be painfully slow if you don’t reduce the file size of your images.

There are three key areas where bytes can be reduced from your graphics:

· Bit depth (number of colours),

· Resolution

· Dimension

Unlike print where you can choose any canvas size and shape, when it comes to web there are some limitations regarding the width of the page. The standard is to use canvas somewhere between 800 and 1024 pixels wide.

So as long as the images you want to use are within those limitations preferably keeping to 800 pixels max them the images uploading at 72dpi shouldn’t distort the size of your sensate.

The difference between Jpg and Gif

· Jpeg – Joint Photographic Experts Group

· Gif – Graphics Interchange Format

Jpeg is designed for use in compressing either 24 bit (full colour) or grey scale images of natural scenes in everyday life, (generally photographs). Saving as a jpg doesn’t work so well on lettering, cartoons, black and white line or vector drawings, jpg handles still images only. When it comes to representing photographs, no digital image format can retain all the information that your eyes can take in better than a jpg.

Most people would rather view  a slightly bigger download than a messy graphic on a website,  try not to sacrifice too much quality. Sometimes a better effect can be had from compressing an image as a JPEG — mess around and see what quality you get, but don’t sacrefice to much of the quality, you want the viewer to understand the reason for the image being used, rather than see a blurry image which is then irrelevant. Remember for large images use the progressive option when saving for web in photoshop the file size is reduced but the quality is not faultered, so the loading time is then increased.

Gifs comprise of an 8 bit format which means the maximum number of colours supported by this format is 256. Gifs should be used for drawings, shapes, small icons, images that contain flat colours, basically nothing to complex. You will never lose any detail form A Gif but you can reduce the palette down to reduce the overall size of the graphic, or maybe up the dithering if you are not happy with the blocks of colour your left with although this could have a reverse effect and increase the file size. If you image is going to be large no matter what, try saving your image as interlaced, when your website is loading it shows a blurry version of the image initially but gradually paints over with the clearer finished image, this does  increase the filesize by a bit, but gives the feeling of a faster download.

The best way to choose the format for a graphic if you can’t make up your mind is to experiment and save it as both, then compare both their sizes and image quality.

This entry was posted in All posts, Photography & video, Web site design & development. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *



You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>