People love images. They capture history, tell stories, convey information. Adding images to your website can be a great way of communicating and engaging readers.
Here are 4 easy-to-remember steps to help you get the best from your website images. You can sing them to your favourite line dancing tune each time you add an image to your website.
1. Name ‘Em
Give you images a meaningful file name. Google and other search engines will take image file names into account when indexing your site. Google images search is well worth leveraging as part of your SEO plan.
The image file name is a good place for that keyword to let Google know what your image is about.
Typically, your digital camera will output images with a file name like DSC2001.JPG and a very large file size, often around 2MB or more. Sadly, every time someone uploads a file like this onto a website, somewhere a fairy dies.
This state of affairs can firstly be improved by creating a new file name for your image. Here are some things to remember when creating you image file name:
- Use all lowercase text
- Separate words with a dash or underscore
- No spaces anywhere in the file name
- Don’t use special characters (use only 0-9 & a-z)
- Keep them to a manageable length
E.g. my-perfect-pavlova.jpg
Properly formatted, creatively thought out image file names will help your images become marketing assets – and will help them play nicely with the many programmes that will be dealing them on WordPress and the internet.
2. Shrink ‘Em
A critical factor in SEO is the time it takes to load your web page. The faster the better. So compressing your images is important.
Significant savings in file size can be made to most images without any discernible loss in quality. Images used on the web don’t need to be the same quality as those used for print.
Part of this process will probably involve resizing your images appropriately. For example, you won’t need to upload an 3200px wide image if it’s only going to be displayed at 400px wide.
Most photo editing software has some form of built-in image compression tool. It may be the option to ‘save for the web’. There are also apps for your particular OS and some online tools.
There are also some WordPress plugins that will compress images that are already on your site. They are not a replacement for properly naming, compressing and resizing images before you upload them however.
If you want better control of the process use a serious program like Photoshop, or its free open source equivalent, the GIMP.
The GIMP is widely used and tutorials are only a Google search away.
Hot tip – if you’re dealing with a typical photo, the JPG format will usually be the best option. If it’s a graphic with few colours, PNG will sometimes give better compression results (and will be the default format for images with any transparent regions). Avoid GIFs (unless it’s an animation of course) and TIFFs.
3. Tag ‘Em
When it comes to actually placing your images onto a web page there are some other things to think about. First up is the ‘alt tag’.
Setting up an alt tag on your images is good for SEO and UX.
What is it? The alt tag sits in the bit of HTML code which tells your browser to render an image. A simple version of that code with an alt tag might look like this:
<img url=”/img/lensify-200×200.jpg” alt=”a 50mm camera lens”>
The alternative text tag should describe what is in the picture. Keep in mind that it will be read by machines and humans. It’s used to improve the accessibility of websites.
For example, if the images are not being displayed on a page for whatever reason, the alt tag text will display in its place. Screen readers will also use the alt tag to help the vision impaired better understand your page – they will read the alt tag text where your image is placed in the flow of the page text.
Google also factors the alt tag into search results, so key words in the alt tag – if they’re appropriate – can be a good thing.
If you’re using something like WordPress there is an alt tag field you can fill in when adding images to a post or page.
The title tag is a little bit like the alt tag. When there is a title tag associated with your image it will usually show up when hovering over the image. Add one if you think it will enhance the usability of your image. But don’t use the same text as your alt tag.
There is a bit of a debate around whether to use title tags these days. While WordPress still has a title field on its media uploader, by default it no longer inserts them into its image code – which is a good indicator that you may be better off focusing on other things. Like the alt tag.
4. Own ‘Em
If you use someone else’s copyrighted image on your website, you may get sued. Best not to find out, so skip Google Images, Pinterest etc. as a place to find pics to enhance your blog post. Tempting though it is.
If you have guest posts or people submitting images to your website, it’s important to make sure they have ownership of, or a license to use, the image – or it’s in the public domain/open source. Remember, you’ll be the one facing legal action because it’s your site.
No – “someone else gave me that image Your Honour” won’t work.
There are places to find free images that are public domain or have licenses that allow use under certain conditions.
—
There’s a bunch of other things to talk about when it comes to choosing and using images on your website. Another post may be on the cards.
If you want to read up on the more technical aspects of image optimisation, places like this are a good start.
The main thing is – take the time to get your images right first time. People love images, but the bar is set high these days. People are used to stunning, high quality images that load quickly.
If you need some image work done, I’d be happy to help. I’ve taken a few photos and work on image post-processing pretty much every other day.
Happy image processing!