SEVEN STEPS TO OPTIMISED WEB IMAGES
Written by Sarah Rowland
Last updated: 11/04/2018
Combining great images with great content makes for an effective website, with images helping to create some beautiful webpages and 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's here that you'll often 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 without boundaries.
Optimising web images
If you’ve ever wondered why your web images are rendering slowly on screen, or why they don't show up in online 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 webpage, it's easy to get carried away in choosing the best and biggest images possible: After all, you'll want to showcase your products and services properly, and to create a pleasant and attractive place for visitors to visit. It's therefore important to ‘optimise’ images for the web to ensure that the site 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 with improvements in internet technologies, but those searching in remote areas or on congested mobile networks and free Wi-Fi systems may still struggle to load webpages with large images and detailed backgrounds.
With the average webpage being made up mostly of images (around 64%), uploading images with web performance in mind will help to speed up page-load times and web performance more than any other ‘quick’ SEO tactic.
The moral of the story is therefore to ensure that you're getting the right balance between picture quality/quantity and file size.
Seven-step checklist for optimised web images
Once you've 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 remember not to add images to your site for the sake of it! Know when to sacrifice an image (or images) for performance gains - if the image doesn't help to achieve the goal you're 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'll cover this in more detail later.
2. Resize, resample and format images correctly
Without getting too far into the technicalities of image formatting , you'll need to ensure that you're 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 page-load speeds.
Different image formats support different features; therefore there's 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, making sure the image has the same dimensions as the area it will be displayed in – don't use code or your CMS system to amend the image size. 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 file size. When saving images from Photoshop, always select the ‘Save for Web and Devices’ or alternative 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's important to ensure they're being tagged up correctly...
4. Name your images descriptively
It's 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 and 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, in turn improving your organic search rankings. Ensure alt tags are filled out for all images on your site, but ensure they're unique even for similar images, and that they're not 'overstuffed’ 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 anchors (hyperlinked 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 webpage 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.
Here at Yachting Pages, we use Adobe Photoshop to manipulate our web images. If you don't have Photoshop, there are plenty of online image editing tools that can help you in optimising your web images, some of which are free of charge. Pixlr, PicMonkey, GIMP and FotoFlexer are just some good examples.