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.
- Illustrations and icons
- Photos for blogs and static pages
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.
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.
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 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.
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.
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.
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 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.
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.
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
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.
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.
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.
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.
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.
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 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.
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 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 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.
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.