Web Design: How to optimize the use of images

  Nik Oliva


optimize the use of images

Many websites use many forms of multimedia and imagery that are both appealing and functional. Images are the photographs, digital artwork, charts, etc, that you will use on your web site. The only problem facing many web designers, whether they are professionals or amateurs, is to ensure that using images should be done with careful thought and consideration.

The lack of knowledge with this basic principle is entirely dangerous for a design, it might decrease your chances to sell, in case you have a call-to-action page, or the chances to create good reading flow.

Following these tips will ensure your images will enhance the user’s experience, increase conversions, help with branding, and improve visual appeal of your website.

Image Formats. Use the correct file formats when exporting or saving images for the web. Here are some summary of the images types found on the web:

  • GIF. An older image format great for legacy compatibility web sites. Great for short, small animations, such as web advertisements. A decent choice for line art. Use GIF for flat color.
  • JPEG. Commonly labeled as JPG, this stands for Joint Photographic Experts Group, so, as you guessed, is typically used with photographs, as well as complicated artwork and three-dimensional renderings.
  • PNG. This format is now in widespread use across the web, and actually handles both simple artwork -and- photographs fairly well. PNG uses an alpha channel for a range of transparency.

Monitor. Working on a monitor set to a higher level of brightness will be easier to see detail, but there is the risk of losing highlight and shadow detail. Ensure the brightness is set between 90 and 120 cd/m2. When the imagery is displayed on a brighter, higher- contrast display, this will enhance the image.

Purpose. Images can not only guide the user’s focus, but also explain a lot about the product in just few seconds. Images that are included in a web page for the sole purpose of filling white space doesn’t help anyone. The image should relate and showcase the product or service clearly.

File Size. The final stages of image preparation should be scaling the image to its final size and applying an appropriate level of ‘Unsharp Mask’ at 100 per cent of its size. The images must get through Photoshop’s Save for Web & Devices function, where you can decrease the size of the picture without decreasing the quality too much If you aren’t careful, your site’s dependence on images can actually make the user’s experience worse because it slows down their ability to engage with the site.

People. Studies show web designs that include people are more persuasive than those without. But some website feature beautiful models, they tend to be the focus instead of the product. Models, instead of drawing attention towards the product, steal the attention and draw it towards themselves.

Copyrighted Images. Copyrighted images need prior permission from the owner to publish it on a website. Using images that are copyrighted or used for commercial purposes without payment can lead to large lawsuits, even if the site does not make the owner or designer a large amount of money. Purchasing images can be easily done through the web or with companies that sell stock images on cd-rom disks. You can also use public domain images that are also available without restrictions. These images are allowed to be used usually without restrictions. Always be sure to read any conditions placed on their use.


Using images the right way is very important if you want to have a successful website, especially when your goal is conversion. Don’t just use images for the sake of using images. Keep in that images are not always the solution for your website’s problems. Sometimes your website shouldn’t even have any images.