Photos Usage in Web Design Explained: Essential Facts, Tools and Tips

Alex 7 October, 2014 855

Photos and images are just another element of web design that however does need a thoughtful approach. The same picture taken from another angle or used in different places of a web page can serve different purposes and have different workflows.

Photos Usage in Web Design

It’s absolutely obvious that most web designs use photos and images. They make any design more eye-catching and visually attractive. In theory they have to perform this function, but in practice it’s not always true. Some graphics can destroy the look of the entire website. In this sense we can’t stay aside the use of stock photos. They can be both beneficial or destructive.

The Use of Stock Photos

There are two opposite points of view on the use of stock photos usage in web design. From users side stock pics seem to be the greatest invention since the web appeared. It’s easy to understand such an ardour approach because of the most obvious advantages of stock photos and images.

  • A wide variety of photos available on demand. Stock libraries and photo databases provide tons of pictures on different topics.
  • Public images are always available at a low price, especially if you’re a community member and can benefit from promotions and discounts.
  • There are also free photo archives such as New Old Stock Photos, Death to Stock Photos, Refe Photos, etc. As usual they present smaller collections of non-professional photographs. If you have enough time and patience you can find a suitable pic for your design.
  • Stock photography can save a lot of time because all graphics are ready for use and don’t need additional adjustments.
  • When buying a photo you can be sure that its use is protected with terms and conditions of buying agreements between you and the stock photo agency. It’s a 100% guarantied way to save your business from copyright issues.

If asking web designers whether they like stock pics or not they won’t be so optimistic about that. In some cases stock images serve web projects just fine. However, the need for publishing images can be limited with conceptual or specialized publications such as products presentation, promotion materials, etc. That’s why we consider it to be important to feature stock photos disadvantages.

  • Generally accessible graphics tend to be overused. There is always a risk to see ‘your’ image at competitor’s website.
  • Stock photos can make your site look like a blank theme. There are companies like we are that produce and sell website templates and almost all of them use stock photos..
  • Huge web design businesses apart, other site owners also use stock photos, so you shouldn’t expect to be unique on this way. Moreover, similar photos with the same models can be widely used by other companies.
  • Most stock images are universal and can be used within various layouts. They are impersonal and don’t reflect or provoke any emotions.
  • Purchasing license is the guarantee of your rights to use the pic, but you should be attentive to that document. Not all stock photo agencies allow the use of purchased pictures several times. So you need to read the terms and user agreement to make sure that you understand what you pay for.

So how do you go about using stock photos in your web projects? Try to think of different ways to fill your website with quality graphics.

And while you keep thinking we want you to take a look at some stock photography sales statistics. The data is accumulated for September 2014 by Henrik Lehnerer who is a true photo geek (in a good way of course). He’s been collecting and sharing stock photography stats for several years, so you can trust him.

Photos Usage in Web Design Stock Photography Sales Statistic

As you can see there are a lot of stock photography agencies At the same time 4 of them (Shutterstock, DepositPhotos, Zazzle, iStockPhoto) get the absolute market share and most web designers/site owners prefer to work with them. Now think again about chances to buy a unique photo from these sources. Weigh in the pros and cons of using each particular stock photo in each particular design.

Now let’s take a closer look at the visual appeal of sites that use photos.

Images to Present Your Business

It’s true that there are tons of awesome images on the web and probably in your personal collection. However, there is a good tip for photographers creating personal portfolios and we guess you need it too: don’t choose images based on your taste only. As long as you build a website for clients you’d better take into account their wishes and interests.

There are several more or less universal tips for those of you who’re looking for photos to be used in web designs.

Photos of People

Be careful with photos of people, especially those taken from stock photo sites. In general terms, projects that use photos of real people look more natural, seamless and persuasive than those without human photos. Web surfers are not naive children and they won’t trust standard figures with false smiles. Be more open hearted and showcase photos of actual people staying behind your product or service. Realistic photos of this kind, especially when they are quite large, evoke positive emotions and create an association of your business with those good feelings.

Back in 2011 a superb A/B testing campaign was held with the Highrise landing page.By the way, it’s still active. Visit the site and refresh the page several times – you’ll see different designs featuring different people. If you’re curious to know more about this experiment (we really hope you are) click the image below.

Photos Usage in Web Design: A/B Testing

The reason we mentioned this research is that photos of happy customers work much better than plain text and forms. We don’t mean stock photos – only custom pictures of real people.

Still not enough for you to trust in the positive impact of photos on an average customer? Take a look at Google’s experience on this field. Every time you enter Google Analytics page you see 1 of 3 home pages variations with different photos of actual satisfied clients. These large pictures in combination with short testimonials create a positive image of the service and motivate newcomers to access Google Analytics.

Photos Usage in Web Design

You can do your own testing to find out if your customers prefer images. The chances are not too high, but it may happen that you work with a specific audience that’s indifferent to graphics.

Size of Graphics

Now let’s talk about the size of photos and images. It happens that while taking a lot of care about general appearance of web pages we forget about its main goal – to sell, to engage, to convert. Product pictures as well as background images can influence this process a lot.

Millions of people all over the web use smartphones. These devices have much smaller screen resolution than desktop computers, so badly optimizes images can cover all the content or put it below the fold. Both options will reduce your conversion rates because they confuse first-time visitors and irritate regular ones.

There were a lot of studies and researches to prove that bigger product images and full-screen backgrounds improve pages visibility and decrease visitors’ bounce rates. Econsultancy accumulated several tests of this kind, so that you can observe them in one particular place. Have you ever thought that a large background image can generate about 36% more leads than bulleted lists and white space? Be sure to take a look at the article on econsultancy.com before choosing graphics for the next project.

There are many ways you can go wrong with images. It is especially important because of the fact that since November 2010 until May 2013 the average web page size has doubled. It was also caused by the rising role of photos and images that now take up to 59% of the entire loading time. Take a look at growth indicators of total web pages weight and images Kbs.

 

It’s easy to see that modern web with all of its minimalism trends is still strongly dependent on graphics. Most of people working on the web used to think that they are online gurus but they easily forget about basic rules of choosing images for the web. We bet it’s no big news that PNG images look better than JPG but their load time is higher. As long as website’s quality is a must we have to take into consideration images format, size, resolution and compression. To remember all the details we offer you to refresh knowledge of using images in web design by reviewing our guide.

Do you know how to optimize size of your graphics for the web? Here we display several free online tools that will help you remove excessive bytes from image files but save their look without quality loss.

You can also use free offline image optimisers:

And the last thing that may sound a bit frustrating but it’s very important. Give yourself a trouble to answer the question: is the photo really helpful for clients or the design will still be good without it? If you clearly understand that the particular picture is not required, look for another option to communicate with people and to generate more leads.

Conclusion

Have something to add? Some other useful tools on photos usage in web design? That would be awesome. Share them in the comments section – we’ll monitor the comments and will add good stuff that you suggest to the post.

Author: Alex Last Name