The importance of image processing in web design should never be underestimated. In this article I take a look at why it is important to get the best out of images in a website, and how to avoid images slowing website performance.
The Use of Images in Web Design
A picture paints a thousand words and that is just as relevant in a website as anywhere else. A well placed image can grab a visitor’s attention and fire their imagination. An image of a product or the end result of a service can also allow a prospective client to see just what they are buying into. Conversely, a site that is nothing more than pages of text will put off a visitor.
Image processing in web design is important. There are a number of factors that can make an image unusable. Some of these factors can be mitigated with good image processing, something that is sometimes overlooked in website design.
Quality Images Are Important
The quality of an image is very important. Grainy, fuzzy, out of focus, or muddy images will not give a good impression. Whereas high quality, pin-sharp, and vibrant images will stand out on a page.
When faced with a collection of images from a client, the first thing I do with each image is check for distortion, and use a distortion correction tool to straighten up the perspective. This invariably leaves blank section which then need to be either cropped out, or filled with a clone brush.
Cropping is a good next step. This gives me the chance to remove not only any blank areas created by distortion correction but remove anything unsightly on the edges of the picture.
After cropping, it time to run the gamut of colour correction and sharpness tools, adjusting white balance/colour balance, brightness, contrast, saturation, clarify, edge preserving smooth, and sharpness. Each image needs a different selection of these and often I have to try one to see how it looks, before either keeping it or undoing it.
It’s best to save using clone brush until after the above processes, as many of the above adjustments can make a cloned area suddenly seem obvious. Using the clone brush can be a painstaking process, depending on how big an area I’m working on.
At the end of this, I have a picture ready to put on a website. Or do I?
The Performance Compromise
Before submitting that 8192 by 6144 image with the unsuspecting internet, I need to consider its size. The higher the resolution the better it looks but the longer it will take for a site visitor to download. This is where the performance compromise conundrum comes in. I want as big and as high quality as possible but you don’t want your visitors to give up waiting. This is where the other side of image processing in web design comes in.
First I resize the image, the target size rather depends on where the image is going. The largest I would normally consider for and image is 2048 by 1536 and the smallest is 800 by 600.
Once I have resized it, I then look at compression, a TIFF file is not the best format for use on a web page. PNG has its uses, normally for vector graphics, but I favour either JPEG or JPEG 2000 (if supported) for photographic images. Compression, like colour correction, is something I usually have to play with on trial and error for each picture – to find the best level of compression I can get with the minimal loss of quality.
Bringing It Together
Having run the full spectrum of image processing tools, from improving the image to compressing it, my pictures are ready to use on a website. It can be a time consuming process but well worth the effort to get the best results.
SAMWare UK creates bespoke solutions and websites. Contact us to arrange a chat to discuss your needs and for a free no obligation quote.