Атрибут альт (alt) — это альтернативный текст, описание того, что на картинке.
В Сафари альт будет не видно, если в стилях тега img явно не заданы размеры или если этих размеров недостаточно, чтобы текст альта в них уместился
Альт будет видно, когда картинка не загрузилась. Например, из‑за нестабильного интернета или когда картинки по ссылке не нашлось на севере. В этом случае альт поможет понять, что было на картинке.
В Сафари альт будет не видно, если в стилях тега img явно не заданы размеры или если этих размеров недостаточно, чтобы текст альта в них уместился
<img
src="https://cats.com/persian/9001.jpg"
alt="Рыжая персидская кошка точит когти об когтеточку">
Ещё на альт смотрят поисковые роботы, чтобы лучше понять содержимое страницы и чтобы отдельно продвигать картинку по ключевым словам из её альта. Может быть ситуация, когда сама страница в глубине поисковой выдачи, а картинка из неё по тем же запросам висит в топе Яндекс‑ или Гугль‑картинок.
Наконец, альт помогает людям с проблемами зрения, которые используют скринридеры — устройства для чтения с экрана. Если человек не может увидеть картинку, будет здорово хотя бы описать ему, что там изображено.
Альты отличаются в зависимости от сайта и его задач. Для любовно собираемых вручную статей в блог не грех добавить в альты деталей, а для выдачи интернет‑магазина с тысячами товаров разумнее генерировать альт под поисковое продвижение, включать в него бренд и характеристики товара.
В любом случае лучше избегать больших объёмов текста и откровенного переспама ключевых слов — это будет неудобно для людей, а поисковики понизят рейтинг сайта за переспам.
P. S. Внешний вид альта можно стилизовать ЦССом, иногда пригождается:
<style>
img {
font-family: Arial, sans-serif;
font-size: 13px;
text-align: center;
color: #0450fe;
}
</style>
<img
src="https://cats.com/persian/9001.jpg"
alt="Рыжая персидская кошка точит когти об когтеточку">
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.