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

MotoCMS Editorial

10 years ago

Photos and images are just other elements 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.

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 from 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 ardor approach because of the most obvious advantages of stock photos and images.

Stock Photo Advantages

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% guaranteed 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 to 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.

Stock Photo Disadvantages

Generally, accessible graphics tend to be overused. There is always a risk to see ‘your’ image at the 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 in 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 a 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.

Stock Photography Sales Statistics

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.

As you can see there are a lot of stock photography agencies At the same time 4 of them (Shutterstock where you can get a discount code, 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.

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 in this field. Every time you enter the 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.

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 the 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 from 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 people working on the web used to think that they are online gurus but they easily forget about the 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 the 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.

Image Size Optimization Tools

Do you know how to optimize the 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 optimizers:

And the last thing that may sound a bit frustrating but it’s very important. Give yourself the trouble to answer the question about the photos usage in web design. 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.

Summing up Photos Usage in Web Design

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.