Choosing Images For Your Website
When it comes to your website the old adage of a picture says a thousand words is definitely true. Imagine how boring and uninterested people would be on the internet and your website if it was just text.
In this article, we will discuss the key components of images for your website including image sizes, image formats, storytelling with images and your image metadata used in search engines.
When choosing images for your website the final images used are often low resolution and highly optimised in order to not slow your site down. This final low resolution has led to a lot of misconceptions that images need to be small to start off with but this is simply not the case.
In my 20+ years of experience, I don’t think I have seen a single project where I have been able to use all of the images provided by clients.
Typically clients take a snapshot on their mobile phone or their point and shoot camera and think that it will be suitable for the website.
Typically these snapshots are often too small in size, mobile phones often squash images, resize them upon sending, and some point and shoot cameras simply don’t provide clean enough images. This is often due to the small sensor size or poor quality sensors.
I always recommend to my clients to invest that little bit extra in their project and get good quality photos captured by a photographer.
If you can’t spare the budget for a professional photographer then use a high-quality camera or at worst buy some stock images. Stock images are not ideal as often they won’t tell the story you are wanting to convey accurately, but in a pinch are much better than using low-quality images.
When selecting your images we recommend getting images of the largest size possible as this will allow the designer or developer of your website to crop the images and resize them as needed.
You can always crop an image down in size but you can’t make it bigger without losing image quality. We recommend that all images used on your website should have a minimum width or height of at least 900 pixels. Ultimately if you can provide an image with a minimum width or height of 1200 pixels or more than your final result will be much better.
When providing images for your website we recommend using only the following formats:
- SVG (Not all websites support these check with your designer/developer)
The main image formats you will want to use are the PNG or JPG formats.
These formats are the most commonly used image types because they are compressed images. This means that the image takes up less space on the server and loads quicker straight out fo the box. The main difference between the two is PNG is often more of a lossless format meaning it does not lose as much quality due to compression, JPG, on the other hand, is often a lossy format meaning that to save space often small artefacts will appear in the image as part of the compression.
The GIF format is not used as much these days on websites however the format is still used for short animations or animated icons. Typically these have been replaced more and more by videos and video content.
SVG is a newer format that allows for high-resolution scalable images to be included on your website. Typically this format is used for illustrated content such as logos and diagrams that need to retain their sharpness and clarity at any viewable size. Please note that not all website systems support SVG out of the box and often a plugin may be needed to utilise the format.
Storytelling With Images
Your website is only as effective as it’s content and the story it tells. This is even truer when it comes to images and that is why we recommend utilising the skills of a professional photographer.
Before you engage a photographer, capture your own images or start looking for stock photos you firstly need to do some thinking.
It is important to plan your website imagery just as you plan every other aspect of the website. Your website images should tell a story, your story.
After creating your page structure and planning your content sit down and think about what type of image would work to best describe the content or reinforce the message of the content. This is important for all of your written content but even more important on your blogs and regularly changing content.
Once you have your plan for images its time to either capture or purchase the images to use. You should now have a brief of sorts for images to use on each page or post. This is where the use of a professional photographer is always best because they can capture the exact image required to meet the brief and it is both unique and showcases your brand and message.
Now, of course, you can capture your own images just make sure you use some decent equipment and capture the image as close to brief as possible. If you plan to buy stock photos make sure you get good quality images that best fit the brief.
Image Meta Data
When you’re using an image on your website you need to make sure that it covers all the bases. This means creating the right metadata for the image so that your image is optimised for both search engines and the visually impaired or deaf.
This means each image needs to have a complete set of metadata that includes the following items:
- Alt Information
Your title needs to be both descriptive and include the keywords used on your page or post. This is important to help with your SEO rankings. A good title whether on a page, post or media is extremely important when attracting viewers.
Your description is typically a short paragraph describing what the image is about and often contains or should contain your page or post keyword. By creating a good quality written description your image becomes a part of your overall SEO strategy and will help with online growth especially in the image search parts of various search engines.
Your alt information is the human-friendly version of your title and description often used by specialised browsers for viewers with disabilities. Specialised browsers include screen readers for the blind and the deaf that will read your alt tag out in order to describe the image. Typically you do not need to make sure your keywords are included in this as you are aiming this content specifically at accessibility, not SEO.