Website Imagery: How to Use & Format Photos for Your Website
One of the most important features of any great website is high quality imagery.
After all images can often communicate the essence of a brand even better than words can! But it’s often an area my clients struggle most with, or fail to see the importance of when updating or creating a new website.
It’s not just about sourcing the images, it’s also important that your photos are formatted correctly and optimised for the best performance on your website, which I’ll get into in the latter part of this article.
Where to find images for your website
Your own photos
If you’re an existing business, chances are you may already have some of your own photos that you’ve taken yourself, and if not, you can easily learn how to take great photos using just a smartphone or inexpensive camera if you’re keen to learn (my friend Olivia has an excellent ebook all about this!).
However it’s extremely important that if you’re taking your own photos, they don’t look amateur, and they don’t drag the rest of your brand & website down. Make sure the photos are crisp (not grainy or pixellated), the subject is in focus (not blurry), and the colours, editing and styling of the images fit consistently with your branding.
Professional photography
I’ve had Olivia come on and write all about the importance of professional photography here on the blog before, as it’s definitely the best option in my opinion. As a website designer, having professional photography to work with while building a site is a total dream, as it compliments a professional layout & design. No matter the newness & design of a website, adding in poor quality imagery can quickly reverse a good impression.
Hiring a photographer might seem like a big investment, but the benefits of doing so are honestly so worth it:
Create a library of images to use across your website AND social media and marketing materials.
Uplevel your business mindset (seeing professional images of yourself & what you do helps make it all more real!)
Attract your ideal customers & project your brand personality (a professional will know how to do this in the best way)
Your images will be unique & original (unlike stock images, that anyone else could use too)
Premium stock photography
If you can’t afford a professional, and you’re looking for high quality photos around specific topics, purchasing premium stock photography is the best option. Paid stock images can range from anywhere between £4 and over £100 per photo, depending on the stock website you use and the types of images you need.
Shutterstock and iStock tend to have pretty much everything you can think of, but there are hundreds of sites out there to choose from.
One of the main benefits of purchasing from a quality, legitimate stock site is you’re safe in the knowledge you won’t come up against any copyright or licensing issues, which is a risk with many ‘free’ stock sites out there, and you don’t need to give credit to the photographers.
Free stock photography
This is obviously the cheapest (free!) option for using images on your website, but it comes with the highest risk and can often look cheap too. Websites that offer free stock images will usually claim that the images fall under the ‘CC0’ (Creative Commons 0) license, which means no credit is required and people can use the images however they like, both for personal and commercial/business use (if you’re using a photo on a business website, this counts as commercial use).
This is great, but many of these sites allow anyone to create an account submit images. Most of the time, photographers themselves will do this, but you can never know who is really uploading the images and whether they actually do own the copyright or have permission to essentially give the copyright away. This could land you in serious trouble if you accidentally use an image that has been uploaded like this, as the law states it is the person who publishes the content who is at fault (ie. this would be you if you publish an image on your website!).
You can read more about the risks of using free stock photography here, but many people still use these sites at their own risk.
By using free stock imagery, you are also communicating a message to your customers that you are not willing to invest in and take your business seriously. It can give the impression that your business is very new (as it looks like you haven’t had the time/resources to put towards photography yet) which may make clients doubt you have the experience to work with them. It can also make people question whether you are a legitimate company or not, which may affect their trust in your work or authenticity.
How to prepare Images for uploading to your website
Once you have your images, you’ll then need to prepare them for uploading to your website. Images should be large enough (in terms of dimensions) to appear high quality (and not pixellated) on all screen sizes, whilst also being small enough (in terms of file size) that they load quickly on your website. Website load time is extremely important when it comes to customer experience, but also is one of the key factors Google looks at for your SEO as well. The quicker your website load time, the better, and large images can slow your site down a lot!
Dimensions
I always recommend clients have images that are between 2000px and 2500px in width, which allows for scaling up on large screens as well as giving some room for cropping on a website if necessary. A mix of landscape and portrait image orientations is a good idea to have variation on your site.
Resolution
With professional photography and some high quality stock photography, the resolution of the images can sometimes go all the way up to 300dpi (read more about ‘dpi’ and resolutions here), which is perfect for high quality image printing, but is too high for digital screens. Having a higher dpi will almost certainly make the file size a lot bigger, so it’s best to keep it only to what is necessary for screens. The resolution for screens is 72dpi, and you can often change this in the save settings when editing an image in Photoshop etc.
File Size
For the quickest load speeds, you should aim to have your image files under 800kb (0.8MB) in size, and ideally less than 500kb if you can!! As I say, reducing the dpi/resolution of the image (and make sure the dimensions aren’t something unnecessary like 5000px wide!) should help reduce the file size substantially, but sometimes you may need to reduce the ‘quality’ slightly in the save settings too.
File Type
Saving image files as .JPEGs, rather than .PNGs, will also help reduce the file size substantially as well.
File names
Before you upload your images to your site, renaming the files can be a good idea for SEO as Google can actually read these. Rather than having your files all called ‘IMG2056.jpg’, rename them using keywords and describe what the images show, using hyphens to separate words (eg. ‘boho-wedding-dress-1.jpg’ or ‘purple-brand-design.jpg’). More advice on filenames can be found here.
* Once uploaded: Alt tags / File name
Once your images are uploaded and you’re adding them to the pages of your website, it’s also really important to add an ‘alt tag’ to each image. This is what screen readers use when reading your site to the blind, but as well as for accessibility, these are also read by Google so should be a part of your SEO strategy as well.
Be sure to keep your alt tags relevant and describing the image, while using keywords that you want to be found for on the page/article overall. When using Squarespace, the ‘alt tag’ is called a ‘file name’ when you upload - just to be confusing!
*You can unsubscribe at any time. Please read my full privacy policy.
