Blog | Onsharp

How Do Images Impact My Website? | Onsharp

Written by admin | August 09, 2019

Having high-quality photos and graphics on your website can greatly improve your credibility and improve user experience.

You know the saying that, “a picture’s worth a thousand words.” The same is true when it comes to images on websites. First time visitors form a first impression of your website in as little as 1/20th of a second to determine whether they trust and see value in your site, which is why having optimized images that accurately represent your brand, products, and services is so important. So how can you make sure your website photography and imagery is up to par? I talked to Mike Unser and Jerad Barbot, two of our web designers, and Ben Lamb, our photographer, to get some insight. Read on to see out what they had to say.

Do images have an impact on engagement?

Jerad: Absolutely. If I go to a website that has a lot of photos that are clearly stock photos, it doesn’t feel genuine to me. If you have pictures of your actual products or business space, it gives visitors a real sense of your company.

Mike: I agree. Take a look at Beans Coffee Bar’s website. They have pictures of their space and their food. It’s like I’m able to experience the place for myself without even having to go there.

Ben: These guys know what’s up. You instantly know a bad photo when you see one. If I visit someone’s site and the images are pixelated, oddly cropped, or look super fake—I’m out. Sometimes you only have those few split seconds after a page loads to either gain or lose a customer, and having high quality images usually grabs people’s attention long enough to get a second click.

What should you avoid when it comes to images?

Ben: The number one thing to avoid is using copyrighted images without permission. Other than that, it’s up to you to decide the look and feel of your site. Custom photos can (in theory) boost the quality of your site, but if your custom photos look like they were taken with a potato… you should probably stick with paid or royalty free stock photos. Alternatively, you can sign up for my photography services and we’ll be sure to get your site looking. 

Mike: It’s really important to not use images you don’t own without permission. And stylistically, I always try to avoid using pictures that feel too staged or inauthentic, like people standing around a conference table smiling. They come across as superficial and don’t appeal to most people. 

Jerad: I’d say to avoid large group pictures of staff members. What if one of them leaves, but a group picture is featured on your homepage or another web page? Even if they left on good terms, you’re going to be constantly making changes or dealing with having a former coworker on your site. You have to be diligent about changing the images out.

What syle of images should I use?

Mike: This really depends on your company’s brand. A lot of photography depends on your brand identity and what you’re trying to convey. For instance, if you’re selling sportswear, you’re going to want images that are more edgy. But if you’re a massage therapist, you’ll want your images to be softer and more relaxing. .

Ben: Like Mike said, it all depends on the look you’re going for. When I edit the photos I take for our clients, I try to gear my editing style toward the genre their company falls in. If their company is more industrial themed, I go for a higher contrast and lower color saturation editing style. If their company is more youthful or deals with children, I aim for a brighter, more colorful style. In other words, there is no one set “style” of images you should use. Just make sure that whatever images you use are high quality, well edited, and large enough that they don’t look pixelated on your device’s display. 

Here are some images I shot and edited for a few of our clients. Notice the style choices based on the industry (top left to bottom right: manufacturing, construction/architecture, healthcare, studio art, agriculture, and childcare/psychology).

Are There Standard Sized for Images?

Mike: That depends on your website template. When we create websites at Onsharp, I always like to get the biggest size of photos as possible. We need a minimum width of 1920 pixels.

Ben: Unlike social media image sizes, your website’s photos don’t usually change unless you are viewing them on different devices. To ensure that your photos look great everywhere, you must have photos that are large enough to fill a desktop monitor without pixelating. On the same note, in order to keep your site running smoothly and loading quickly, you will have to compress your photos in places like compressjpeg.com and compresspng.com to make sure that they have the smallest file size possible, while still maintaining their image quality.

What’s the best file type to use?

Mike: For photo-realistic images or images with a lot of gradients, JPG usually works best. For any kind of images with flat designs, like illustrations or logos, PNGs should be used. It wouldn’t be a good idea to use PNGs for photographs because the file size is too large.

What's better: Big images or small images? Does it make a difference?

Jerad: What’s important is keeping the best quality photo as small as you can. Keep in mind that most people access websites via their phone, and most mobile devices can’t fit huge images on them. Mike: I try to keep large images (like banners) under 100kb, but closer to 50kb if possible. If your download speed is 1MB at its slowest, you want to make sure your images load within one second. Most people have good connections in our area, but mobile phones may load a little slower.

Mike: I try to keep large images (like banners) under 100kb, but closer to 50kb if possible. If your download speed is 1MB at its slowest, you want to make sure your images load within one second. Most people have good connections in our area, but mobile phones may load a little slower.

Would you rather see websites with custom images or stock photos?

Ben: Now that’s a difficult question. Just like custom images can either make or break your website, the same goes for stock photos. While hiring a quality professional photographer may not always be within your budget, it is definitely the best option when it comes to the images on your website… but it’s certainly not the only option. Yeah, there’s Shutterstock and other paid sites you can use to buy stock photos that are decent enough, but you can also find tons of quality (not fake-looking) free, royalty-free stock photos on sites like pxhereunsplash, and stocksnap.

Here’s a good stock photo vs two bad stock photos, respectively, if you have to have group photos. And the last one is exactly what Mike was talking about earlier.

Notice that the first one feels more natural while the second one feels cheesy and unnatural.

Jerad: While I agree with Ben, I’d encourage you to take a shot at taking your own pictures. Cameras have come a long way these days, and even if you don’t have a professional camera, there are plenty of local photographers, YouTube tutorials, and more out there that can help you out. Who knows, you might even have someone on your team who knows something about photography. But if they don’t turn out quite how you’d like them, you should use the sources he mentioned.

Mike: I agree with trying it yourself first, then using stock photos if you can’t hire a photographer. And with the right lighting, even your iPhone can work. What you need to avoid is taking photos with flash. Make sure you have good lighting.

In addition to what Ben said earlier, I also like to encourage people NOT to go to Google and find stuff to use. There can be legal consequences with that as not all images are free to use. A lot of people don’t know that you can’t just take something and use it just because it’s from Google.

Jerad: Exactly. And that’s why taking your own photos, using stock photos, or hiring a photographer can be the best option. It alleviates any question about whether or not the photos are rightfully yours. The only thing you need to remember is that if you’re taking pictures with customers in them—like for a restaurant business—you need to have signed release forms. 

Ben: Agreed.

How many images should I have on my website? Do I even need them?

Jerad: Yes, you need images on your website. It’s hard to make a connection with a business without them. As a brand, you want to create a familiarity with your company through your images. Even if it’s an image of one of your plumbing trucks, people will be able to recognize it when they’re out and about because they’ve seen it on your website. If you’re going to have a website, think written content and photos to accompany the content. 

Ben: A website without images is like having a birthday party without cake or presents. It’s entirely possible to do it without them, but WHY would you want to?? You could have the best written content in the world, but if it doesn’t have brilliant images to draw in and connect with potential clients or customers, you’re only hindering your business’s success. 

So yes, you definitely need images on your website. How many though? As little as one hero image (a large banner image or large header image) can be enough to give your website a fighting chance in the online world. The more images you include, the more you are able to connect with your customer. However, you don’t want to completely fill your site with images. White (or blank) space is very under-appreciated, but necessary, to give your content room to breathe. 

Mike: I agree. You should always think of your website photography as something that connects with your written content. I think that every page should have at least one photo to make it interesting. Product images are good. For example, if you have a software or another solution, screen shots work great to showcase what you sell and how your product works. And if you’re going to showcase your staff, it’s worth the investment to hire a photographer or try to get them to be uniform.

Check out our website redesign guide

Are you considering a website redesign? We have compiled our top 21 tips for a successful website redesign. They are easy to understand and include videos, links, lists, and examples to guide you. Click the button below to check out the guide.