A quick guide to optimising images for SaaS products
The first steps in optimising your SaaS product photography (or any image on your website) is to first begin with creating stellar photos. After that, the majority of the optimisation process is done behind-the-scenes.
Optimising your photos can give your website the strategic that advantage many SaaS businesses need to crush their competitors. Think about it – the competition is unable to see what or how you are doing, after all, yet you will at least obtain higher search rankings that means:
More clicks
More leads / sales
More signups
How much effort do you pay to your SaaS products’ image optimisation? Probably not a lot.
And yet, you should take note.
Why search engines care about page loading times
In January 2018, Google announced that mobile search algorithms would begin to take page loading speeds into account beginning last summer, meaning this algorithm is already in progress.
This is being called the Speed Update.
Moreover, two things critically slow down page loading speeds:
More use of javascript often caused by too many apps and not enough built-in to your website
way too large images that are not optimised for various screen sizes
Regarding the latter, the widespread practice that adversely affects image loading time is that of using images that are wider than the content area within the page theme.
If the page is 1200 pixels wide and a webmaster uploads an image that is 2400 pixels wide, then readers will need to load more data than required, unnecessarily increasing the image and page loading times.
Page speed is critical for two key reasons:
Faster page speed = better user experience
Everyone loathes a website that takes forever to load. It can be infuriating, causing users to bounce off the site before the content even downloads.
Alternatively, a website that loads quickly lets the visitor peruses the content with ease. The better the users’ experience, the more probable the user is to remain on the site, consuming more of the website’s content, maybe even making a purchase or signup.
Faster page speed = better Google ranking
As mentioned above, research has demonstrated that Google’s algorithm places a high priority on page speed when its search engine crawlers rank pages in results. Thus, if you wish your website to rank higher in SERPs, you will want to check your page speed.
So then, when it comes time to launch a SaaS business, way too many early-stage companies spend too little time focusing on excellent product photography and branded imagery.
After all, you use your pictures everywhere:
on product pages
on category pages
on the homepage
in abandoned cart messages
on the blog
on social media accounts
during Facebook Advertising.
So you know it is crucial. Now let’s see how you can optimize them.
How to optimise images
1. Start with good photos
Having great SaaS photography begins with generating the right image.
Your SaaS photography doesn’t have to involve an expensive camera or setup. However, there are a few hacks you can follow to ensure you are beginning with the best possible quality photos.
use a consumer DSLR camera or smartphone
a good light source
use a white sweep to help diffuse the lighting
use a steady surface
a camera tripod.
2. Showcase your products with multiple angles
Look at any successful SaaS, and you will observe that their images are various screenshots or images from multiple angles or views.
SaaS product photography can be used to showcase the best aspects of the software, so it’s essential to include a variety of shots.
Different photos can help showcase various aspects, including using the product, even the team at events, or even job advert pictures.
3. Use white backgrounds and screens for your software
Replacing the background of images with a white background will make sure that you will have consistently great-looking pictures, no matter their order on your website or how you use them across the internet.
White backgrounds are standard on almost every website, and there are a few great reasons for that:
your images will look consistent on all pages
it will save your money and time in editing
you can easily replace or reuse the background on your photos
You can use software such as Autoclipping or Pixlr to manually remove the background from images of your product photos to create a white background.
4. Save your images with the correct dimensions
Paying attention to the dimension of your image is crucial:
if they are too large, you will cause issues with your page load time
if they are too small, the images will look grainy (poor quality)
When your images are sufficiently large enough in dimension, then the same picture can be scaled down to be used in your thumbnails or collection images.
If you don’t have access to software that can resize your images, like Photoshop, don’t worry.
Services like Autoclipping and Canva can help you with basic editing and resizing needs.
5. Improve page load speeds by using correct image formats
It’s easy to choose the default save option when you’re creating your images, but knowing the difference between file formats and settings can have a massive impact on your site speed.
GIF files are lower in quality, but importantly they are lower in file size.
PNG files support a more extensive range of colours, and also the only format that supports transparent backgrounds. However, this all comes at the cost of larger file size. If you need to edit a photo multiple times, you’ll want to export it as a PNG file.
JPEG images are the most common format used by digital cameras and online. They support a wide range of colours, but the JPEG compression settings allow you to determine a delicate balance between file size and image quality.
This article was first written for CallHippo.