Seven steps to optimised web images
Written by Sarah Rowland
Last updated: 21/03/2017
Combining great images with great content makes for an effective website, with images helping to create some beautiful web pages and to showcase your products and services in all their glory.
With images accounting for some of the most eye-catching content on your website, and holding the key to some great SEO benefits, it is here that you will find some of the largest performance improvements for your website.
With the marine and superyacht industry offering up some stunning sights, Yachting Pages has created a seven-step guide to optimising web images, so marine marketers can showcase stunning superyachts and their associated products and services in all their glory.
Optimising web images
If you’ve ever wondered why your web images are rendering slowly on screen, or why they do not show up when you do a Google image search, it could be time to look into optimising your web images.
Why optimise web images?
When we talk about ‘optimising’ web images, we don’t just mean for users – we also mean for great SEO (search engine optimisation), manipulating them to perform well in online searches.
There are two main reasons why we should optimise web images as marine marketers:
1. For users - with image quality and web design in mind
When considering the images to add to each web page, it is easy for business owners to get carried away in choosing the best and the biggest images possible: You want to showcase your products and services properly, and to create a pleasant and attractive place for visitors to visit, after all.
It is therefore important to ‘optimise’ images for the web to ensure that the website will still perform well and pages will load quicker, holding onto its visitors and organic search rankings.
2. For search engines - with performance in mind
Bandwidth may be increasing on board today’s vessels, with improvements in internet technologies at sea, but those searching in remote areas or on congested mobile networks and free Wi-Fi systems may struggle to load web pages with large images and detailed backgrounds.
With the average web page being made up mostly of images (around 64%), optimising images with web performance in mind will help to speed up page load times and web performance more than any other ‘quick’ tactic.
The moral of the story is therefore to ensure that you are getting the right balance between picture quality/quantity and file size.
Seven-step checklist for optimising web images
Once you have selected your images, how do ensure they are ‘optimised’ for appealing web design while enlisting an appropriate SEO strategy for peak web performance?
1. Source high-quality images
First, take (or source) high-quality images; a good-quality photo will appeal to users more than blurry and unclear images, but do not add images to your site for the sake of it! Know when to sacrifice an image (or images) for performance gains - if the image does not help to achieve the goal you are setting out to achieve then cut it out.
Good web design is simple, and will ultimately give the best performance. One beautiful, well-placed image is certainly better than three random and haphazard images. The well-known English idiom, “a picture paints a thousand words” does, however spring to mind here, as great images can help to cut down on the amount of rambling text required - just be careful in your choices.
Ensure all chosen images are relevant to the page content to enhance the user experience as well as your site’s web performance – we will cover this more later.
2. Resize, resample and format images correctly
Without getting too far into the technicalities of image formatting, you will need to ensure that you are editing and formatting your web images correctly. When preparing an image for web, always make sure to resample the image rather than resize. This alters the amount of pixels in the image (and the size at which it will appear on screen), which in turn alters the file size. It’s important to keep file sizes as low as possible to avoid slowing down page load speeds.
Different image formats support different features; therefore there is a ‘right’ format for each particular image to give the desired visual results and functional requirements. GIF, PNG and JPEG are the three universally supported image formats, which will display in all browsers.
When uploading images to the web, always ensure to resample and export them in an image editor like Photoshop – do not use code or your CMS system to amend the image size, making sure the image has the same dimensions as the area it will be displayed in. If you have a main image which needs a thumbnail, create two separate images, rather than resizing in code.
3. Save images for web
When preparing images for the web, you often need to compromise between image display quality and image file size. When saving images from Photoshop, always select the ‘Save for web and devices’ option. You can view multiple versions of an image simultaneously and modify optimisation settings as you preview the image in order to select the best combination of settings for your needs.
Once the images have been exported, it is important to ensure they are being tagged up correctly.
4. Name your images descriptively
It is never good practice to upload images with the default name that your camera or download provides. Instead, you should be renaming web images with short yet descriptive keyword-rich file names.
A descriptive file name provides search engines with a clear pointer of what your image (and therefore the overall page content) is about. Think about the search terms that users may be using to find those products or services online and apply them to your image file names.
5. Optimise your alt tags
Alt tags provide a text alternative to images when browsers can’t render them, or are set to not display them. When filled out correctly, these provide additional SEO benefits, giving opportunity to further associate your chosen keywords with the images displaying on your page.
When a great alt tag is combined with a descriptive file name, your images are more likely to show up in online image searches, and will in turn improve your organic search rankings. Ensure alt tags are filled out for all images on your site, but ensure they are unique even for similar images, and that they are not over ‘stuffed’ with keywords.
6. Use descriptive anchor text
In line with the above two steps, it’s also a good idea to use descriptive in-text anchor text to link to photo galleries, enhancing the user experience and search engine ‘bots’ by helping them to understand the link destination.
7. Create an image site map
Search engine bots cannot crawl or index images that are not tagged properly in the web page source code, so you must let them know about the images by listing their location in a site map – this can be part of your website’s existing site map, or an individual image site map.