Whether you’re into visual content or not, your website still contains image files. It’s worth taking some time to make sure those images are optimised for SEO, are not making your site slow and frustrating, and help support your content.
The good news is that it’s really easy to stay on top of this.
1. ALT tags
What are ALT tags?
ALT tags are a readable description of the images on your web page.
They are the little snippet of HTML code that go alongside images that you upload to your site. If you manually code your site, an ALT tag looks something like this:
<img src=”image/my-cute-cat.png” alt=”illustration of cat”>
If you have a WordPress site, filling in your Alt tags is really easy.
ALT Tags & SEO
It’s important to make your website accessible to as wide a range of users as possible, including visually impaired visitors who may access it via screen readers. That’s just good internet manners.
As a bonus, Google also rewards proper use of ALT tags, as it helps their spiders to crawl your site more easily.
So, what are some good practices when filling out your image ALT tags?
Keep the text short
Don’t use long sentences or huge, descriptive phrases. Really look at the image objectively, and come up with a succinct description.
Be descriptive
You don’t need to literally describe what’s in the image, but write it in a way to describe it in context.
Avoid keyword stuffing
In the past, SEO cheaters have tried exploiting this loophole by keyword stuffing. It doesn’t work anymore, and you will more than likely get penalised for trying it. That’s not to say don’t use a keyword that is relevant for your page, just use it in a natural way, if it’s appropriate for the image.
Try to mention the page topic
This is a little tricky, so only do so if appropriate. First and foremost, write the ALT tag for the people visiting your site. If you can mention your page topic in a natural way, then do so. In fact, using this approach may help you to select images that are relevant and add context to the page they’re on, rather than just using them as filler, which is a good practice of its own.
Google Guidelines Example
Bad: alt=””
Better: alt=”dog”
Best: alt=”Dog waiting for walk”
Avoid: alt=”dog, dog walking, dog sitting, pet, pets”
2. File names
Write SEO-friendly file names
You can generate plenty of traffic back to your site via image-based search engines, like Google Images. To increase your SEO-ability, don’t leave your file names generic (such as IMG342234.jpg), but give them a short title describing what they are.
- Create a file name using a term you want that image to rank for in Google Images search. Don’t just copy and paste your ALT tag (or vice versa), take a few extra moments to write a unique file name.
- If it’s natural to use your keyword in the file name, then do it, but don’t force the issue.
- If your business location is important or relevant, include the location in the file name.
- Use hyphens in your file name to help with readability for Google.
Add context
You’ll get extra SEO points if the text surrounding your image uses similar and related keywords.
If you’re writing a blog post about walking dogs in your pet sitting business, and you’ve created or sourced an image that’s relevant, it will all hang together naturally.
Google Guidelines Example
Bad: filename = “DSC2349384238.jpg”
Better: filename=”dog.jpg”
Best: filename=”sad-dog-ready-for-walk.jpg” (Hyphens are read as spaces by Google, whereas using underscores will read as one long word.)
Avoid: filename=”sad_dog_ready_for_walk.jpg”
3. File size
Page load times matter. A site that chugs along, taking forever to load, is not going to encourage anyone to stick around. The biggest culprit is poorly optimised image files.
The good news is that it’s easy to keep your images small in size but big in quality. There are even free tools to help you do so.
Free tools
No frills site, and easy to use. Upload your image or link to an image url.
Gives the ability to upload multiple files or URL links, and will provide you with a zip file of your optimised images. Quick, easy to use, and great for working with multiple image files.
This one is also available as a WordPress plug in.
Awesome tool alert!
Once you’ve finished optimising your images, and reuploaded the smaller versions, why not check out how your site is doing?
Feed the bot is a great tool to give you loads of feedback on how your site is doing. Run before and afters as you work on optimising your site, and see how your changes are making improvements.
Reduce the number of images on your website
Decorative images
Some decorative images (such as buttons), can be coloured and shaped through code, rather than using image files. Speak to your web designer to help you with this, or if you’re a bit code savvy you could maybe do it yourself.
Fonts
Similarly, if you want to use a ‘fancy’ font, pick something that’s embeddable through code, such as Google fonts. Don’t even think about creating image files for your headings from the text.
Background images
If you’re using a background wallpaper image, really consider whether it is necessary. Can your design work without it? If so, ditch it and your site will speed up.
Another approach is to cut out the middle of the background image (that is never visible behind the website pages), and make it a flat colour, or even transparent. This will cut down dramatically on the image file size.
4. Image type
Use the correct image file
There are 3 common image files types you can use when creating an image file – JPGs, PNGs and GIFs.
Which should you use? The answer is: it depends.
JPG images are able to be compressed considerably, giving you high quality images with a low file size. If your image is complex (e.g. a photograph), keep your file as a JPG.
Every time you save a JPG over the top of itself, the image quality degrades a little bit. Always keep the original and save smaller versions separately each time.
PNGs retain quality better, but their file size can be bigger as well. Use for small, decorative images (e.g. icons and buttons), or illustrations created from a vector program.
GIFs will give you a smaller file size than a PNG, but are generally worse quality. Don’t use GIFs for photographs, stick to using them for simple images in the same way as PNGs.
Do you make sure your images are optimised before uploading them to your site? Have I missed any vital tips here?