Изображения: альтернативный текст и / или текст заголовка? - Основы тегов изображений

1. Источник: Путь / URL изображения
2. Ширина и Высота
3. Альтернативный текст
4. Название изображения (универсальный атрибут)
5. longDesc - описание изображения
6. Атрибуты для презентации
7. Вывод: альтернативный текст и / или текст заголовка?

25 марта 2009 г.

Картинка на картинке

[ Новое (ноябрь 2017 г.): " Что важнее - альтернативный текст или текст заголовка? «И» Что должно быть написано в тексте alt и атрибуте title? « ] Для чего нужен альтернативный текст?» - «Насколько важен альтернативный текст для картинок?» - в этой статье рассматриваются основы картинок на веб-сайтах. В последние несколько дней я провел два исследования некоторых атрибутов изображения: " Img атрибуты src, alt и title «(Фокус на поиск изображений) и» Атрибуты изображений в Google Universal Search Images » (Фокус на универсальном поиске изображений). По сути, речь шла о влиянии атрибутов как факторов ранжирования. Итак, вопросы SEO. Но, конечно, поисковая оптимизация - это просто пирог. Картинки не интегрированы в сайт для поисковых систем, а для пользователя. Поэтому я хочу описать в этой статье временами основные основы тега изображения.

Источник: Путь / URL изображения

HTML-страница, представляющая браузер, структурирована так называемыми «тегами». Изображение на веб-сайте называется тегом изображения. HTML-код для вызова изображения выглядит примерно так:

<img src = "www.domain.de/folder/picture.jpg" />

Решающим для вызова изображения является, конечно же, указание источника изображения. Какой URL можно использовать для вызова изображения. Спецификация может быть абсолютной или относительной, как со всеми URL. Я в основном рекомендую сделать все детали URL абсолютно. Относительные пути являются потенциальными источниками ошибок. Атрибут SRC - это единственное обязательное условие. Логический. Все следующие атрибуты являются необязательными и используются для описания содержимого изображения или для лучшего представления и позиционирования.

Ширина и Высота

В дополнение к источнику изображения (source, src) также должны быть заданы ширина и высота (ширина и высота).

<img src = "www.domain.de/folder/picture.jpg" width = "100" height = "150" />

Причина: макет страницы быстрее, потому что браузеру не нужно ждать, пока изображение отобразится, пока изображение не будет загружено и эти значения не определены. Вместо этого браузер устанавливает «фиктивный контейнер» с указанными значениями и продолжает строить страницу. Затем изображение может быть загружено и вставлено в контейнер. Характеристики ширины и высоты могут отличаться от фактического размера изображения. Изображение затем «запихивается» в контейнер - это называется «масштабирование». Таким образом, вы можете не только настроить размер изображения, но и пропорции изображения.

Однако из соображений качества я настоятельно рекомендую не масштабировать изображения в HTML-коде. Движок, который преобразует изображение, намного хуже, чем в разумных программах для редактирования изображений (например, Adobe Photoshop или бесплатное канитель ). В результате изображения показывают грубые артефакты, размытые, нечистые и выглядят в целом безобразно. Поэтому: всегда масштабируйте изображения до правильного размера с помощью графической программы, а затем вставляйте один к одному в исходный код HTML.

Альтернативный текст

Далее вы должны определить атрибут ALT:

<img src = "www.domain.de/folder/picture.jpg" width = "100" height = "150" alt = "Я картина" />

Альтернативный текст

Альтернативный текст, как следует из названия, отображается альтернативно. Так что только если изображение не видно по какой-либо причине. Это может иметь несколько причин: проблема с сервером, неправильный путь, изображения, отключенные через браузер, или просто «поддержка чтения» для пользователей с плохим зрением или слепотой. Следовательно, с точки зрения W3C, альтернативный текст также является «обязательным утверждением». Браузер обычно может отображать изображение без альтернативного текста, но настоятельно рекомендуется установить альтернативный текст.

Название изображения (универсальный атрибут)

Кроме того, вы можете определить «универсальный атрибут» Заголовок для вызова изображения:

<img src = "www.domain.de/folder/picture.jpg" width = "100" height = "150" alt = "Я картина." title = "Я - изображение. [например, авторское право автора]" />

Подсказка

Атрибут title отображается в браузере как «всплывающая подсказка». Если вы наведете курсор на элемент с атрибутом title, через некоторое время появится вид «слой с пояснительным текстом». А именно, именно текст для чтения задается в атрибуте Title. Таким образом, атрибут Title является дополнительной информацией, а не альтернативой.

У легендарного Internet Explorer 6 было «Macke», что он отображал альтернативный текст в виде всплывающей подсказки вместо текста заголовка. Кроме того, слух гласит, что альтернативный текст является текстом «всплывающей подсказки».

Атрибуты заголовка

Многие веб-дизайнеры / программисты следуют рекомендациям W3C при создании HTML-кода, что прекрасно на SelfHTML Страница описана. На стороне тега атрибуты находятся на тег изображения однако атрибут title отсутствует в списке. Поэтому многие считают, что нельзя вообще устанавливать «Атрибут заголовка для картинок». Это не правильно. Потому что «Заголовок» является так называемым. Универсальный атрибут это можно вставить практически во все многие теги.

Атрибут title может быть полезен в качестве всплывающей подсказки для пользователя, особенно если изображение не имеет видимой подписи. Поэтому я бы порекомендовал поставить его. По крайней мере, если фотографии - по какой-либо причине - не имеют подписи.

longDesc - описание изображения

LongDesc - это сокращение от «Long-Description». Этот атрибут был введен некоторое время назад, так что альтернативный текст изображений не слишком длинный, если это необходимо. Те, кто хотел предложить подробное описание изображения, должны предоставить его на дополнительной HTML-странице. Значением атрибута longDesc является URL этого описания изображения.

<img src = "www.domain.de/folder/picture.jpg" width = "100" height = "150" alt = "Я картина." title = "Я - изображение. [например, авторское право автора]" longdesc = "https://www.tagseoblog.de/bilder-longdesc/bild.html" />

Атрибут longDesc был введен в контексте «доступности сайта». Однако, это никогда не преобладало. Основная проблема заключается в том, что браузеры просто не отображают его и не делают его пригодным для использования. В Firefox вы можете по крайней мере увидеть html-страницу описания изображения в свойствах изображения. Но вы должны скопировать URL вручную и вставить его в адресную строку, чтобы открыть страницу. Не совсем удобно. Поэтому longdesc может быть безопасно опущен, на мой взгляд. Я не использовал его ни в одном из моих проектов. Но для находчивого оптимизатора изображений оптимизатор может стать хорошим тестовым объектом.

Ранее упомянутые атрибуты «Src», «Alt» и «Title» (и «longDesc») также могут называться «чувствительными к содержимому» атрибутами. Из них можно прочитать текстовую информацию. Эта информация полезна для посетителей и дает поисковым системам возможность выводить содержание изображений.

Основы изображений Tag - Основы изображений на веб-сайтах

Атрибуты для презентации

Чтобы аккуратно интегрировать изображение в веб-сайт, существует ряд атрибутов презентации, которые берут свое начало в древние времена Интернета. Например, вы можете определить рамку (border = "4"). Значение («4») указывает ширину пикселя кадра. Но я больше не хочу вдаваться в эти «древние атрибуты», потому что, конечно, презентация сегодня решается с помощью CSS («Каскадная таблица стилей»). Здесь вы определяете внешний вид изображения в атрибуте стиля:

<img src = "www.domain.de/folder/picture.jpg" width = "100" height = "150" alt = "Я картина." title = "Я - изображение. [например, авторское право автора]" style = "border: # 111 4px solid; float: left; margin: 0 12px 0 0" />

В этом примере рамке задается рамка шириной 4 пикселя, темно-серая (# 111), сплошная (сплошная). Изображение корректируется слева от текста (с плавающей точкой: слева) и сохраняет текстовое расстояние до текста (0 вверх, 12 пикселей вправо, 0 вниз и 0 пикселей слева). Подробнее о CSS форматирование здесь ,

Ну, и, конечно, вы должны поместить на чисто построенную страницу, CSS-информация будет находиться в отдельном CSS-файле. Затем он определяет элементы класса, которые вызываются в коде HTML, как селектор класса. В нашем примере это выглядит так:

<img src = "www.domain.de/folder/picture.jpg" width = "100" height = "150" alt = "Я картина." title = "Я - изображение. [например, авторское право автора]" class = "picture-style" />

Класс Image-Style можно затем вызывать из любого изображения на веб-сайте. Ну, и, как описано здесь, я использую мои изображения: ширину и высоту, alt, title и class. Если вы не верите этому, вы можете открыть исходный код и взглянуть на него.

Вывод: альтернативный текст и / или текст заголовка?

Картинки - картинки

Итак: longDescription можно пренебречь. Атрибуты презентации индивидуальны. Конечно, имя файла уже должно иметь отношение к тому, что показано на картинке. Альтернативный текст и / или текст заголовка? А что ты пишешь на сколько обширно?

Как описано выше, альтернативный текст должен быть установлен. То, что вы записываете точно, вам кажется лучшим, если вы представляете, что в том месте, где должна появиться картинка, есть только текст. Что тогда имеет смысл? Какие условия наиболее подходящим образом заменят картину? Я обычно беру очень краткое описание. Конечно, ни один текст в мире не может даже отдаленно заменить эффект изображения. Поэтому я обычно беру ключевые слова, которые побудили меня использовать изображение. Довольно часто это не совсем то, что можно увидеть на картинке, но то, что следует визуализировать с помощью картинки.

Я также описал использование атрибута title выше: в качестве всплывающей подсказки он в основном показывает информацию, которую должен иметь заголовок. Это название картины. Кроме того, информация о месте или времени записи, об авторах, об авторских правах или тому подобное. Поэтому заголовок для меня часто длиннее, чем текст заголовка - или он точно такой же. В идентичном тексте альта и заголовка я не вижу никаких проблем, потому что это две совершенно разные вещи: одна важна, если картинка не видна, другая дополняет картину.

Картинка на картинке (картинка с картинкой в ​​центре)

Так же, как основные изображения на веб-сайтах - по крайней мере, в части HTML. Если бы я что-то забыл, я был бы благодарен за комментарий.

Другие веб-ссылки и статьи

Похожие

Комментарии