One of the most important issues when it comes to SEO for images is often file size. Many images are often too heavy and delay the speed at which the page loads. But there is more. When we look at images in Joomla, we should mainly pay attention to:
- File size for fast loading
- Proper naming of the images
- Using proper alt-text
- Supply proper width and height attributes
Google can not (yet) 'see' images, but it can read all its properties as set in HTML and can therefore use them to establish rankings for pages with images. In order to support search engines in doing so, you should supply images with relevant filenames and alternative descriptions.
File naming
First of all, you should start with images with relevant names. If you use an image about an Ipad, name it ipad.jpg (preferably only use lowercase) or something similar, as long as it contains the word Ipad. You can even use multiple words if you use dashes (preferred option) or underscores to connect them, like ipad-tablet.jpg.
Use proper alt-text
Secondly, when inserting an image, you should enter an alt-attribute. This attribute is originally meant to support disabled readers with screen readers, but Google also actively uses it. You can easily add them with most editors. Both TinyMCE and JCE have options to enter alternate text. JCE auto-populates it with the filename, replacing underscores and dashes with spaces. So, if you have logical filenames, you can simply let JCE set a correct alt-text:
JCE even does this automatically by filling in the file name without extension, so if your file name is correct, you have your alt-tags set right very easily. Of course, you can still write your own. Besides being good for SEO, it is also good for accessibility for disabled users that use screen readers.
If you need a tool that checks your whole site for proper use of alt-text, I can recommend the SEO Powersuite Website Auditor. It lists how many issues there are, plus a full list of URLs with the issue plus the actual image affected:
Width and height attributes
Width and height attributes are required for correct display and Google specifically advises this. This is especially important for lazy-loaded images. Browsers use the width and height attributes to calculate the surface of the placeholder for the image while the image loads. If these attributes are not provided, the page shows shifting behavior while it loads. This negatively impacts the CLS score (for more information, read the Google documentation about CLS).
If you need to automate adding these attributes, you can use the JCE editor, as it adds them for you automatically, as you can see in the screenprint above.
