Web Log = Blog

This is how the word blog came into existence.

How image can be used to deliver messages design more interesting

Imagery

As you all know that image can be used to deliver messages or make your design more interesting but an overuse of it might just give the opposite effect. Thus, the choice to choose the right image to use plays a crucial part to make your design attractive and interesting, most of the web design agency will follow this practice, images is part of the content quality.

What to look out for when choosing images? Here are some questions to ask yourself:

  • Is it relevant or needed to be used in your design?
  • Is it interesting enough and not be the center attention or else your design will only be focused on the image chosen?
  • Is it appealing in the sense of emotionally or aesthetically? For example, you are designing a menu, the choice of image you use will play a heavy role to decide if the food served in the restaurant is appealing to eat or not.

Legitimate Image Source

There are three ways to obtain images for your website, i.e. create it yourself, purchase stock images, or hire a professional to help you take the photos.

Make It

You can either take pictures by yourself to use them in your web design and this is not only limited to pictures but applies to illustration and animation. Depending on your skill set, if you can do what Is needed by the client with your own ability. Is better to do so to cut the expenses to develop the website.

Stock Photography

Stock photography are photo archives or image banks consist of photographs and illustrations that are created for general use instead of a specific use. You usually will resort to this way when you have limited of time or ability to get the artwork you need for your website. Now just so you know, images that has people often need to pay as they signed a model release for their faces to be used. Thus, you should expect to pay for good quality pictures of people.

Now the big question to ask yourself is how much are you willing to pay for these pictures? As you can image, free images are usually dramatically lower than those for which you’d pay but they can still be worth your while if you think that quality and design is good enough to be used. Stock images are available in three forms, i.e. free, royalty-free, and rights-managed.

  • Free
    Now the big question is why are there free photographs? They are free is because they love to do that kind of activity be it designing or taking a photo, they find it an opportunity for their work to be noticed and allows more people to enjoy their artwork. Here is a photography source for you guys to use if you need one, Stock.XCHNG.

  • Royalty-free Images
    Royalty-free means that you purchase this photo with a flat rate without paying the royalty fee or license fee for each use. This is often useful when you want to use the image repeatedly be it in the same project or different project in order to avoid negotiating usage rights. If you are interested to look for this type of licensing, head down to iStockphoto.

  • Rights-managed Images
    Rights-managed or RM in the photo industry refers to a copyright license, where you pay a fee based on the size of your business, how many people will be exposed to it and how many times are you going to use it. To make it simple, you have to pay the license fee for each time you want to use the picture. The picture that uses RM are usually of professional quality and will be hard to find elsewhere in the internet. You can visit Getty Images if you need some.

Professional Help

When you are getting for a professional help to do your photography, you must make sure that your choice of photographer will be the one that has good experience in the commercial field. This is because photography has many fields such as scenery, wedding, etc. Professionals that are in this field are not helpful because the images you plan to use are mostly your products to be sold in the internet. Hence, you must consider their biographies and portfolio before hiring a professional be it a photographer, illustrator or animator. Make sure you do your study first!

What not to do with source images

  • Google Ganking is where you google search for an image and download it for your website. You may edit the picture by cropping them, resizing them or modifying them to your needs but you need to know that not all the images you google are free from licensing. Which means that some may have copyright issues and you may face embarrassment if there Is a lawsuit or a cease-and-desist letter sent to you or your client because of this image uses.

  • Hotlinking is where you use the full url of the image you are using to display them in your website. But as you know, if you do this to the images you took. You are practically using the bandwidth of the website you are taking from because images on the web are usually stored in the servers and extra bandwidth can be expensive as there is a limit to the usage of bandwidth on servers. Here is an example of HTML code for hotlinking and non-hotlinking:

Figure 1: HTML Code

  • Clipart or known as simple pictures and symbol are often very cheap in most websites. You should avoid using this in a professional project because the quality is not what you expect from professional designer or website developer. Just imagine if you are using clipart in your website is the same as you are getting served with a non-fresh sashimi in a high-class sushi restaurant. But if your clients insist of using them, do consult them to push it back because as a designer it is also one of your job to give feedback to ensure that their website you develop will look nice.

File Formats

The common file formats use in the web today are JPEG, PNG, GIF and webp - a new image format from the web. In choosing the format, you will have to determine which will give you the smallest file and the best quality. Now let’s look at each of the format:

  • JPEG (.jpg) is a compression format where the degrees of compression can be adjusted in which the quality will change depending on the size of the image. This is developed by the Joint Photography Experts Group and this is a good format to use as JPEG can provide small file sizes at 24-bit color. Let’s look at the compression of JPEG and the quality below where left is low and right is maximum quality:

Figure 2: JPEG Compression

 

  • GIF (.gif) known as Graphics Interchange Format is an 8-bit format that compresses file on the basic of number of colors in the image and it only supports up to a maximum of 256 colors which is not useful for photographic pages. GIF mostly useful for small animations not good for a transparent background as PNG is still better in terms of quality.
  • WebP - WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

  • PNG (.png) or Portable Network Graphics which is developed by W3C as an alternative for GIF as they can be saved in 8-bit or 24-bit format. The transparency of PNG is 24-bit format means that the background of the images we saved in are still visible because it implements the image to lie alongside the red, blue and green channel of the image. This is useful when you want to put your transparent image on a different background image or texture because if you use an 8-bit format, the background is totally off, and you must modify it to blend into the different image or texture which is very troublesome. You can see the example below to get a better understanding as the gif will have white backgrounds still attached to it:

Figure 3: 8-bit vs 24-bit

Now you can choose proper images to be used for your website and remember the section of "what not to do with source images" as this will help you to be more professional!
 

Source: The Principles of Beautiful Web Design 2nd Edition, by Jason Beaird

Thumbnail: Designed by Freepik

Share Us


Loading...