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

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

25 марта 2009 г. 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 = "Я картина" /> <img src = www

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

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

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

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

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

Подсказка

Атрибут 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. Если бы я что-то забыл, я был бы благодарен за комментарий.

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

» - «Насколько важен альтернативный текст для картинок?
Вывод: альтернативный текст и / или текст заголовка?
Альтернативный текст и / или текст заголовка?
А что ты пишешь на сколько обширно?
Что тогда имеет смысл?
Какие условия наиболее подходящим образом заменят картину?

Популярное
Атомэнергопром - атомная отрасль России - главная
АО «Атомэнергопром» (полное название — акционерное общество «Атомный энергопромышленный комплекс») — интегрированная компания, консолидирующая гражданские активы российской атомной отрасли . Атомэнергопром

ЗАВОД №9, Екатеринбург
"ЗАВОД №9", ОТКРЫТОЕ АКЦИОНЕРНОЕ ОБЩЕСТВО Регион Свердловская область, Екатеринбург Адрес 620012, г. ЕКАТЕРИНБУРГ, пл. ПЕРВОЙ ПЯТИЛЕТКИ Телефон (343) 327-29-32 Факс (343)

Аграрное общество (признаки и разрушение)
В отличие от современных людей, человек древности и средневековья был значитель­но ближе к земле-кормилице, к традициям и обычаям своих предков. Поэтому и тот тип цивилизации, что существовал до Нового

Личный кабинет НПФ Доверие
НПФ «Доверие» — акционерное общество, предлагающее программы переноса в Фонд накопительной части пенсии по договору ОПС и программы формирования дополнительной негосударственной пенсии по договору НПО.

МУ СБР в ПФО (г. Нижний Новгород) - АООТ ТНК «Гермес-Союз» (ОАО «Промышленная компания «Гермес-Союз»)
  АООТ  ТНК «Гермес-Союз» (ОАО «Промышленная компания «Гермес-Союз») Акционерное общество открытого типа Транснациональная нефтяная компания «Гермес-Союз» (АООТ ТНК «Гермес-Союз») – наименование

ФЛ "БАРНАУЛЬСКИЙ" ЗАО "РАЙФФАЙЗЕНБАНК" - г. БАРНАУЛ, пр-т ЛЕНИНА, д. 163 - ФИЛИАЛ "БАРНАУЛЬСКИЙ" ЗАКРЫТОГО АКЦИОНЕРНОГО ОБЩЕСТВА "РАЙФФАЙЗЕНБАНК" В Г. БАРНАУЛЕ
ОКАЗАНИЕ УСЛУГ ПО ОТКРЫТИЮ И ВЕДЕНИЮ РАСЧЕТНЫХ СЧЕТОВ УПРАВЛЕНИЯ ФЕДЕРАЛЬНОГО КАЗНАЧЕЙСТВА ПО АЛТАЙСКОМУ КРАЮ ДЛЯ УЧЕТА ОПЕРАЦИЙ ПО ОБЕСПЕЧЕНИЮ ПОЛУЧАТЕЛЕЙ СРЕДСТВ БЮДЖЕТОВ БЮДЖЕТНОЙ СИСТЕМЫ РОССИЙСКОЙ

Традиционное (аграрное) общество
Традиционное (аграрное) общество представляло доиндустриальную стадию цивилизационного развития. Традиционными были все общества древности и средневековья. Их экономика характеризовалась господством

Новости компаний
Другие отчётные документы "Автоматика" в ИПС "ДатаКапитал" ОПУБЛИКОВАННЫЕ СООБЩЕНИЯ ЭМИТЕНТОВ АО "Концерн "Автоматика" - Проведение общего собрания акционеров акционерного

АО "НОВЫЙ РЕГИСТРАТОР"
Предлагаемая компанией продукция и услуги: Трансфер-агентское и регистраторское обслуживание Приобретаемая компанией продукция и услуги: - Дополнительная информация о компании: Член ПАРТАД

Банк "ГЛОБЭКС" - кредитование, вклады, банковские карты, денежные переводы, банковские услуги.
Примечание к курсам для безналичных операций по банковским картам При совершении безналичных конверсионных операций по банковским картам (покупки/продажи) Банком применяется механизм установления

Счетчики