What is the purpose of alt in an img / tag?

It is to put the description of what the image contains. It will be shown in place of the image if it can not be displayed. Useful for:

• make content easier to index, so it's for SEO,
• show something informative if the browser does not load the image for some reason or is slow,
• be able to report something to anyone with visual impairment.

The latter is important because reading software for those who are visually impaired can read what is written and "speak" to the person. There is no way to "tell" the person what the image is, you can only do it with a description.

Many people think that everything will always work, but there are several reasons why the image should not be displayed:

• has browser that can not show the image, it is textual,
• the browser can be configured not to display images,
• has a network that can block the location where the image is located,
• the image may no longer exist where you were and you do not notice,
• There may be several errors in the middle of the process,

Do not use space to put the name of the image or something less useful. The text should describe the image as best as possible to meet these requirements stated above. If necessary you can put a long text, but this is not always necessary, you do not need to make an artistic critique of the image :). If there is conflict between the goals, do your best to address the most important and try to help the others.

Do not use if the image is merely decorative, use <alt = ""> in these cases, only images important to the general context of the page will require this. Be sure to use this form so that the browser does not show anything, so you do not try to describe it as having an image there, which in fact would only be useful for the page rendered completely.

The appropriate example is what is in the question itself :) It does not have much secrecy.

MDN Documentation .

Here on the site you can do this when you add an image and few do, that's bad.

In my opinion, the great importance of alt is in accessibility, including W3C ( World Wide Web Consortium ) has this slide about accessibility on the web.

There are some screen readers like ORCA, for Linux and JAMS for Windows, in this site > has an explanation about them. With the tag alt these softwares inform disabled users what is in the image. This is why the main function of the tag is to provide an alternative description for the image.

If you are interested in learning more about accessibility on the web, I recommend reading book from W3C.

Remember that small details such as <img src="https://goo.gl/3pS3AU" alt='Essa é uma imagem sobre Minions' /> in your HTML make a big difference for disabled users.

The alt tag is of utmost importance for accessibility and SEO. It will also appear if your image can not be loaded.

Accessibility: It is she who will tell screen readers (software used by the visually impaired) what that image is about, so always write something that really describes what that image is, Chocolate cake with chocolate coating, with this description you can fully understand what the image is.

SEO: Looking for Google Images alt tag is one of the parameters that is taken into account for your image to appear or not in the listing, then there's another reason to make a very descriptive alt.

Do not forget to put the alt tag on all the images, here I wrote a post with a tip well mass to never forget them.