An empty alt attribute or NULL alt attribute (alt=””) is used for images that are only for styling or design, offering no additional context or information for the page.
An empty alt attribute looks like this:
<img src="image.png" alt="">
In WordPress, you can leave the text field for the alt attribute empty.
Empty alt attributes make screen readers skip the image, which can offer better usability for visually impaired people in some instances.
However, an empty alt attribute is a missed opportunity to positively influence your ranking, and for images that add additional value or information to the page, will help visually impaired people access the full content. Therefore, you should try to only use meaningful images with meaningful alt tags on your page to help search engines and people understand your content better.
Your page must be publicly accessible and indexed by Google for the search engine to find images on it. Also note that Google cannot (yet) “understand” images, and relies on alt text to interpret them. Therefore, you should always add descriptive text to each image on your page. The best way to do this is to use alt tags.
They contribute to a good ranking, offer visually impaired people a better user experience and ensure that images are “understood” even if they are not displayed for technical reasons. Additionally, you should use meaningful file names, image captions and titles for further optimisation. But remember to avoid keyword stuffing at all costs, even in the alt tag.
To insert images into HTML, you use the img tag and src attribute. ‘src’ stands for the word “source” and refers to the source of the image.
To insert images into HTML, you use the img tag and src attribute. ‘src’ stands for the word “source” and refers to the source of the image.
For example, the HTML code looks like this:
<img src="Animals/Monkey.gif">
In this example, you insert the image file “Monkey” from the folder “Animals”. If you want to insert an image from an external source into HTML, you enter the graphic address instead of the path. You can find this out by right-clicking on the image and selecting “Copy image address”:
https://www.sistrix.com/wp-content/uploads/2021/11/Kempener-Zoo-9.jpg
In addition, you can use the height=”…” and width=”…” commands to specify image width (the height will be auto-calculated)
<img src="https://www.sistrix.com/wp-content/uploads/2021/11/Kempener-Zoo-9.jpg" width="300">
Additionally, add an alt text and align your image with align=”…” the way you want it to display on the page. To give the image a border, use the border= command with the appropriate number of pixels.
Once complete, the code looks like this:
<img src="https://www.sistrix.com/wp-content/uploads/2021/11/Kempener-Zoo-9.jpg" height="150" width="300" alt="Monkey on tree." border="3" align="center">
How large an image is displayed can be determined with the src attribute and the height=”…” and width=”…” commands. It is important to keep the original ratio so that the end result is not distorted.
However, this method does not change the file size, only the visual representation. To reduce the file size, you need to reduce the size of the image with a graphics program before embedding it on a web page. Free tools are usually sufficient for this.
Ideally, you reduce the file size of images to around 150 kB to speed up the loading time of your page and prevent visitors from bouncing. Both can improve the ranking of the page.
When relaunching or restructuring a website, redirects of images are often forgotten. As a result, the rankings of these images are lost and it can happen that your domain loses valuable links. Set up a 301 redirect to the new address in each case.
It is important to note that this only applies where the image data remains unchanged and only the URL has changed. Do not redirect an old image to a new one.
If images embedded from external domains are not loaded, this is either because they are no longer accessible at the address entered or because the external server prevents integration on other domains. The consequence is, for example, a 404 error message. You can avoid this by hosting the image on your own server. Remember to consider copyright when using images from other sources.
If images embedded from external domains are not loaded, this is either because they are no longer accessible at the address entered or because the external server prevents integration on other domains. The consequence is for example a 404 error message. You can avoid this by hosting the image on your own server. Be aware of copyright when using external images.
