Website photos are a powerful communication tool that will increase visitor interest and decrease your bounce rate. Choosing the right images and photos will go a long way toward helping you tell the story of your brand and maintaining the interest of visitors.
Use Strategic Image Selection
Too many websites sloppily use images simply to fill up space without having a clear purpose. It’s advised to select images with the idea of making your brand’s products or service more enticing and compelling. For example, use images that showcase a product in an attractive way to potential customers who visit your website.
Use Relevant Images
The images you choose should be highly relevant to your brand and its products or services. Select images that line up with the values of your business and that will resonate with your potential customer base.
For example, if your website sells floor cleaners, you could use photos of mom smiling as she cleans her laminate wood flooring with her kids playing in the background. Images like this punctuate the attractiveness of your product.
Use Images that Illustrate Brand Selling Points
The images on your website should showcase the primary brand selling points of your product or service. For example, illustrate the advanced tools of your cleaning product or the technical features of your software program. It’s always advised to use photos of people using your products or services so potential new customers who visit your site can envision themselves doing so too.
Other ways to leverage the brand promotional value of your images are using illustrations, charts, and infographics.
Use Authentic Images
Showcasing real people using your products comes across as more authentic rather than simply showing sterile photos of your products themselves. Visitors will more likely relate to your brand if you use “action” photos to illustrate the selling points, or the unique selling proposition, of your product or service.
You should also forgo stock photos and instead opt for custom photography when you can. You want your photos to accentuate the character and personality of your brand. Again, they help tell the compelling story of your products or services.
Use Website SEO Best Practices
Optimize Images
Whenever possible, it is best to optimize your photos by compressing your images. Large images tend to take much longer to load on a website. By compressing photos, you will drastically improve website performance. People might otherwise lose interest waiting for your website to load if it’s longer than a couple of seconds.
Alt Text Uses For Your Images
Like a choreographer in a theater production, alt text serves a similar role with images in that alt text describes the appearance and function of your images on a Web page.
- Adding alternative text to a photo started out as a principle of web accessibility. Visually impaired users using screen readers will be read an alt attribute to better understand an on-page image.
- Alt tags will be displayed in place of an image if an image file cannot be loaded.
- Alt tags provide better image context/descriptions to search engine crawlers, helping them to index an image properly.
Optimal Alt Text Format
The ideal format for alt text is adequately descriptive but with no attempts at keyword stuffing. A helpful trick is to close your eyes and have someone read the alt text to you, and you could imagine a fairly accurate version of the image. If that happens, then you’ve applied alt text correctly.
Importance of Alt Text
Image SEO Benefits
Using alt text on images will make for a superior user experience. It also comes with many SEO benefits. Although search engine image recognition technology has greatly improved over time, search crawlers still cannot “see” the images on a Web Page like we can.
Alt Text offers you another opportunity to include your target keyword. With on-page keyword usage still pulling weight as a search engine ranking factor, it is to your advantage to create alt text that both describes the image and, if possible, includes a keyword or keyword phrase you are targeting.
Accessibility Features
Alt Text is a principle of accessible web design. Its primary purpose is to describe images to visitors who are unable to view them. This would include screen readers and browsers that block images. However, it also encompasses users who are sight-impaired or otherwise unable to visually identify an image.
By leveraging alt text with your images, you ensure all users, no matter their visual ability, can appreciate the content of your site.
Use The Right Image File Types
Images on the Web come in myriad formats, such as JPEGs, GIFs, PNGs, and more. This article will address and explore the advantages of these and other image formats and how each format delivers distinct advantages when it comes to aesthetics and functionality of photos on your website.
The image format will impact a website in several ways.
They include:
Performance — Some image formats take up more space than others, which can affect a site’s loading times.
Appearance — There are some image formats that encompass greater detail and are higher quality than others.
Scalability — When you stretch or shrink an image too much, its quality will be negatively impacted. How much flexibility you have depends on the image format used. This affects your site’s ability to look good on both large and small screens.
Consistency is important when it comes to the application of image formats for a website. For example, you should use one or two image formats throughout a website to maintain a consistent standard. The formats you choose should ideally provide a nice balance between quality and performance.
Types of Image Formats Used On Websites
JPEG (Joint Photographic Experts Group)
JPEG is perhaps the most common image format used on the Web. It’s very compatible and enjoys a small file size with very little loss of quality. JPEG images are saved using lossy compression, so there is always a loss of quality when using this format.
JPEG files are typically used for photos on the Web, as they create smaller files and can easily be loaded on a Web Page. This reduces the rendering time of a website significantly and the Web Pages load fast. When JPEGs are a disadvantage are for line drawings or logos or graphics, as the compression makes them look pixelated.
In short, JPEGs are versatile and offer a small file size, but you do sacrifice detail of the image. They do make for colorful photographs, however. The main benefits of this format are that it can display millions of colors, and it’s particularly well-suited to high compression levels.
GIF (Graphics Interchange Format)
GIF uses lossless compression, meaning that you can save the image over and over and not lose any data. A GIF uses an 8-bit lossless format which supports a maximum of 256 colors.
What is distinct about a GIF format is its ability to be animated. Many images can be “played” one after the other to give an animated, moving images appearance, making it one of the most fun image formats.
So, what is positive about GIFs is the small file size. However, there is a loss of quality. GIFs are ideally suited for icons, logos, line drawings, and other simple images that need to be small.
PNG (Portable Network Graphics)
A PNG contains a bitmap of indexed colors and uses lossless compression, similar to a GIF file but without copyright limitations. It was created as an open format to replace GIF. A PNG also allows for a full range of color and better compression. It is also the most popular lossless image compression format on the Internet.
As far as photographs go, PNG rates lower than JPEG, because it creates a larger file. PNG is the best format for screenshots and most computers will save screenshots automatically as a PNG as a majority of screenshots are a mix of images and text.
The ideal use for a PNG is for graphical elements. That is because PNGs are versatile and support transparency. That is, you can place a PNG image on different background colors of your website and the image will adopt that background color. You can also mix the Opacity of the image and have the background of the website affect the color of the image.
WebP
WebP (pronounced as “Weppy”) is an image format developed by Google. This format was designed to be used specifically on the Web. WebP uses features of both lossy and lossless compression algorithms that significantly reduces the file size while maintaining the quality of the original image.
WebP takes the best parts of both the lossy JPEG format and the lossless PNG format and makes them available in a compact file! A WebP can be used on numerous graphical and translucent images and it enables the user to adjust the degree of compression to make a trade-off between file size and picture quality. WebP is supported in Chrome and Opera browsers.
In short, it is very easy to convert images to the WebP format and begin using them right away.
WebP excels at being very versatile, and is suitable for smaller file sizes and it produces exceptional quality images.
Use Photo Compression For Website Images
Photo Compression is a process that lowers an image’s file size in such a way that it allows the website to load much faster. A compressed photo also consumes less computer memory without significantly tarnishing the quality of the image.
According to HTTP Archive, as of November 2018, images make up on average 21% of a total Web page’s weight.
Large images slow down your website pages which creates a less-than-optimal user experience. Optimizing images is the process of decreasing their file size. You can use various free and premium tools to compress your images which in turn speeds up the load time of the page.
Image optimization is a best practice for posting images online, and compressing photos to reduce file size is one popular way to optimize images.
There are free tools available to compress images on the internet such as TinyPNG.com which will compress JPG and PNG files for free. The file size limit for this free service is 5MB.
How to Choose Best Image Format for Your Website
For the majority of websites, JPEGs and PNGs make for an excellent choice for the bulk of your images. Keep in mind that it is ideal to stick with one image format, for the purpose of consistency. As for GIFs, you will want to reserve those for when you need to display animations.