How NOT to Choose Image for Website and Why

How NOT to Choose Image for Website and Why

Images are one of the most important elements that make a website the way it is. As using images has become a must for a converting website, it’s not surprising that there are people who have no experience, mess up configuring the image for the website, making it less converting and even damaging the business reputation.

Images are important as this visual component makes web content more engaging and less boring. Human brains also prefer combinations of various shapes and colors compared to a wall of text. This makes people understand the context better, thus making it the best medium for complex information.

Below’s a list of how you can use the image for the website for better conversion and even branding purposes.

  • Logo
  • CTA
  • Illustrations and icons
  • Photos for blogs and static pages
  • Infographic

Now you understand why images are essential for web design and the examples of it, let’s take a look at the passage below of how NOT to choose the image for the website.

Irrelevant Photos

The image on your website should help audiences to understand the context better but what if your images are misleading and incorrect? Let says you want to read an article about jogging but the picture is about weightlifting, will you question yourself whether you are clicking the right article?

Irrelevant photos might leave your audiences puzzled, and raise more questions about the web content. And confusing users will leave the site and find other websites to solve their issues.

Replace it

Of course, you would need to replace it and find more relevant photos. Another piece of advice is to see what type of photos your competitors are using for similar articles or pages if you are running out of ideas.

Stock Photos

Stock photos are like heaven. They’re cheap. And there’s plenty of them. But would you still use it if I told you that it might tarnish your website reputation?

No, I’m not saying that stock photos are evil and you should stay away from it forever! You can still use it for blog posts and articles. However, it’s not the best move to use it all over your website from head to toe. Having no real images of your business can give out a fishy vibe to others.

Hire a Freelancers

Given that you might not have the skill, equipment, and time to take photos of your company, you might as well outsourcing for those who can. Therefore go to your local Craiglist or Facebook group to find some good freelance photographer that can also do the editing for you.

Low-Quality Photos

Let say you decided to take the matters to your own hand. Or you just unlucky and have those who have very, very little experience to handle the website images for you. The chances of you getting a pile of unappealing visual mess are high.

Low-quality photos can consist of low resolution, bad lighting, or terrible editing that can bring down the business’s name as it can be seen as unprofessional to use badly edited photos.

Hardware

Other than hiring a freelancer, you can solve it yourself by spending extra effort (and money) on equipment like camera and lighting. If money is an issue, you can use your own phone and DIY yourself some good equipment.

Software

When it comes to photo shooting, the software is just as important as hardware. Other than the famous paid Photoshop, which has gigantic amounts of free tutorials on the internet. You can also download GIMP as a free alternative to Photoshop. Canva, which is a free online graphic editing program is also available without any download.

Exaggerating Images

Exaggerating images is one of the most common images for website mistakes. Proper use of exaggerating images can add some fun to your website. But overusing dramatize images can be seen as trying too hard to convince people.

For example, showing a person holding a huge money bag all over a survey site that claims you can make money is a desperate move. People know filling survey doesn’t make you a millionaire. Some people might fall for it but it’s best to stay away from it to not appear like a scam.

Replace it and Use it Wisely

So, what can you do about exaggerating photos? Replace it of course and use maybe one or two times on your website.

Images that have Too Much Distraction

Look at your image, does it convey your message CLEARLY? A good image should let your audiences receive the message from it instantly with just a glance. The overwhelming unnecessary elements distract your audiences. This causes them extra time to figure out the meanings of images, which can lead to bad conversion.

Distracting background
Distracting background

Transparent Background

That’s why we need to eliminate other elements on the image that has nothing to do with the message itself. One of the methods for getting rid of unrelated things on the photo is to use a transparent background.

Transparent background
Transparent background

The transparent background has been used in eCommerce, CTA, and decorative elements on the website for quite some years now. It’s simple to do with Photoshop and GIMP, free online tools such as Make PNG Transparent by Online PNG Tools are also available for erasing the background.

Bad Text in Image

Badly designed text on image
Badly designed text on image

Whether you want to make an infographic, a blog banner, or an image CTA, you need to add text to the image. A lot of time, text on the image either looked as if the text blends into the image or outdated, low-quality graphic failure.

Using decorative fonts, fonts with little spacing, and fonts that have a similar structure between letters and letters can mess up the reading experience. Some people also prefer to use colors that are not complemented with images, resulting in lower readability as well.

This can affect the readability and again, extra time is needed to figure out what the text means. This can irritate users and cause impacts on the conversion rate.

Font

You need good typography so people could understand the content. Big, bold sans serif font is one of the most ideal fonts you can use on image for the website, for example, Open Sans, Helvetica, and Ariel.

Serif font isn’t as readable as sans serif due to their extra lines but certain sans serif font like Merriweather can be a great choice due to the strokes of the same width. Decorative fonts should be used carefully and should not be used as a body font because of the fancy hard-to-read letters.

However it’s important to note that not every font is free to use for commercial purposes, therefore you should definitely understand the licensing for each font. But don’t worry about that as online font provider like Google Fonts has free fonts which you can download and use in your commercial projects.

Distinguish Font from Image

You need to distinguish the font from its image, that’s why you need to color to make your text stand out. You can either darken the background image as shown below or add an extra panel or shape with a solid color as the background for text. Make sure there’s a strong contrast where the text is easily recognizable.

Text on darken background
Text on darken background
Text on a separate panel
Text on a separate panel

Bad Image CTA

Often time, you might see people create CTA with images with the image itself linked to a specific page for users to complete an action. Other than bad prompt and bad execution of adding text to image as stated above, people who don’t familiar with the web might not realize that the image is clickable.

Add Visual Indication a.k.a. Button

People are used to clicking a button or a form to complete an action. The illusion of the button is what prompts people to click to perform an action although the button itself is unnecessary.

Button on CTA image
Button on CTA image

A good button should be obvious with its color contrasting with the rest of the image, make it noticeable with a persuading text like “Click Me!” in the middle. A good idea of making a good CTA button is to create it based on color psychology, which is a study of how different color influence human behavior.

Blurry Images When Resize

When you are accessing another website on mobile, you might notice that its logo is blurry and pixelated. That is due to images being stretch and enlarge to fit the screen of the device with retina display.

The reason behind this is that while most display for PC and laptop is 100PPI (Pixel Per Inch), so your 100px = 1 inch on your site. But device with retina display like iPhone X has a display up to 458PPI, which means that 100px/458 = 0.22 inch on iPhone X.

And this tiny image will be enlarged so audiences wouldn’t see a tiny logo on the header of your mobile site, resulting in the image looks pixelated as it is scaled up.

Vector

The best and easiest way to combat low-resolution images on retina displays is to use vector files for logos and icons instead of raster images (png, jpg, and jpeg). Vector files such as Scalable Vector Graphics (SVG) allows vector images to resize without disrupting the quality of the image.

Raster vs. Vector: What's the Difference and When to Use Which - Shutterstock
Raster vs. Vector: What’s the Difference and When to Use Which – Shutterstock

You can create vector graphics with the paid Adobe Illustrator or Inkscape which is free for download. Online tools like Vector Magic also converts JPG and PNG into vector files.

CSS for Retina Displays

In certain cases where loading speed becomes the first priority, people will use low-resolution photos for PC and laptop, and high-resolution images for retina displays. This ensures that websites on PC and laptop won’t spend too much bandwidth on rendering high-resolution photos if low-res images are sharp enough for it.

Compare to the vector which can be only used on simple graphics like logo and icons, this technique is definitely the one for complex images like high-res scenery photos.

CSS Techniques for Retina Displays by Syed Fazle Rahman on SitePoint is a beginner-friendly article that shows you how you can implement media queries for retina displays.

Large Image Files

Talking about site speed, do you know that a large image file can slow down the loading time? Slow loading speed equals to lower conversion rate, with people clicking the “X” on the corner. That’s why you need to speed up the site by optimizing images.

Compress

Compress images are great for decorative, not-so-important images. There are a lot of misconceptions about compressing the image in which one of them is having the quality of images for websites to drop low. But that is certainly false.

If you’re running a WordPress site, you can use a plugin called Smush to compress your image. Or you can also use online tools like Online Image Compressor to compress PNG and JPEG for free.

Lazy Load

Lazy load is a process when the media files start to load only when it comes up to the users’ screen, instead of loading all at once during the start which as a result, content doesn’t show up fast enough. Making people click the “X” on the corner.

The good news is that WordPress plugin, Smush also comes with the lazy load feature. So, no need to add more plugins for the sake of optimizing the image for the website!

Replace it with Icons and Illustrations

Not everything needs to be high-res photos. In fact icons and illustration might be a better alternative as they are simple and probably better at expressing the content with their minimal use of color and lines.

In fact, you can even incorporate your brand identity into your icons like using color as your brand identity along with consistent style. You can hire a freelancer on Fiverr or Upwork to create stunning icons for you.

Images don’t have Recognization

You spent an hour creating this infographic and people who saw it elsewhere don’t know who is the author of this graphic. This can be a great lose considered it’s a great opportunity to spread your name out there.

Watermark

Watermark doesn’t only avoid people from stealing your images, it also makes your image for website easily recognizable by others. You can add it to the corner or top and bottom of your images without disturbing the reading experience.

No Sharing Option for Images

People love images. It’s colorful, fun, and easier to understand compared to a wall of text. So, what if your audiences just want to share the image from the website instead of the link to the page?

Sharing Buttons

Sharing button like Pin It is a great addition to add to your images. People can share your images with their friends and colleagues. Image Share Buttons by ShareThis has the perfect tool for you, it can integrate with popular CMS and site builders like WordPress, Wix, and Jimdo and also allow embedding in HTML manually.

Image Share Buttons - ShareThis
Image Share Buttons – ShareThis

Summary

With just little effort you can improve the performance and conversion rate of your website by tweaking images. It plays a huge role in website design and each of it needs to be planned carefully before placing it on your website.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.