Атрибуты Alt и Title для картинок: как прописать, что это и зачем нужно
Alt и Title – SEO-параметры фото, которые помогают в раскрутке страниц сайта. Далеко не все сеошники тратят время на такие нюансы, как оптимизация иллюстраций. Но именно от подобных мелочей и зависит успешное продвижение сайта. Обратив внимание на этот момент, вы обойдёте своих конкурентов. Тем более что сделать это совсем несложно.
В сегодняшней статье вы узнаете, что такое атрибуты Alt и Title изображений, где их добавлять и как использовать для максимального эффекта.
Реклама: 2VtzqwCpaPT
Читайте также: 10 курсов для SEO-специалистов
Что такое атрибуты Alt и Title в теге img
Оптимизация иллюстраций подразумевает три этапа:
- создание уникальной иллюстрации;
- сжатие для быстрой загрузки;
- заполнение текстовых атрибутов.
Сегодня мы остановимся именно на последнем этапе. Готовы увеличить посещаемость своего сайта за счёт правильного использования Alt и Title? Тогда читайте дальше!
Итак, Alt – это альтернативный текст, благодаря которому поисковики распознают картинку. Эти данные помогают ботам безошибочно индексировать вашу иллюстрацию. Альт считается неотъемлемой частью картинок, отсутствие при валидации равносильно ошибке кода. По сравнению с Title Альт больше ориентирован на SEO. Описание фотографии улучшает релевантность страницы и позволяет привлечь дополнительную аудиторию из поисковой выдачи по картинкам.
В принципе атрибут Alt имеет значение и в глазах посетителей, особенно тех, кто пользуется мобильными устройствами. Некоторые из них отключают показ графики для экономии трафика, и благодаря Альту они, по крайней мере, смогут узнать, что в каком месте отрисовано.
В коде Alt виден так:
<img src="Путь к картинке" alt="Альтернативное описание изображения" />
Теперь поговорим о Title.
Тайтл нужен, прежде всего, для улучшения поведенческих факторов. Когда посетителю сайта сложно понять, что демонстрируется на фото, он машинально может навести на него курсор – Тайтл станет для него желанной подсказкой. Хотя поисковики не придают особого значения этому атрибуту, благодаря ему вы сумеете косвенно повлиять на SEO.
Как и в случае с Alt, Тайтл можно указать в настройках изображения или прописать в HTML-коде:
<img src="Путь к картинке" alt="Альтернативное описание изображения" /> title=”Заголовок фото”>
Вот как это выглядит в административной части сайта на «Вордпресс»:
Статья в тему: Оптимизация изображений на сайте
Как использовать Альт и Тайтл у изображений
Сначала рассмотрим вопрос: должен ли Тайтл быть с Alt одинаковым? По поводу этого на различных форумах существуют спорные точки зрения.
Поиск по изображениям включает в себя оба варианта.
Alt и Title могут быть идентичными. Гораздо важнее – предельно чёткое, точное описание изображения.
Необходимо ли включать в атрибуты ключевики? Здесь также не существует единого мнения. Среди лидеров поисковой выдачи есть иллюстрации без ключевых слов в атрибутах. В инструкциях популярна рекомендация по добавлению главного ключа из h2. Но есть нюанс: если иллюстраций в посте десятки, и все они включают этот поисковый запрос, страница будет с переспамом. А значит, вас ждёт наложение санкций от Яндекса, Гугла и ухудшение позиций в серпе.
Менее рискованным решением является использование в атрибутах Тайтл и Альт разных низкочастотников.
Непременно учтите:
- Альт проработайте обязательно, а Тайтл – по возможности;
- атрибуты можно писать как с большой, так и с маленькой буквы;
- когда сайт создан на русском языке, лучше заполнять Alt и Title изображений кириллицей;
- оптимизировать картинки можно и после того, как текст уже проиндексирован поисковиками.
Как прописать Alt для картинок
Давайте определимся, каким должен быть атрибут Альт, который понравится и поисковым системам, и пользователям.
Придерживайтесь этих правил:
- текст обязан коротко, но чётко раскрывать суть иллюстрации;
- оптимальным размером считается короткое предложение или словосочетание из двух–четырёх слов;
- в идеале это должны быть дополненные или разбавленные ключи;
- для каждой картинки лучше использовать разные ключи.
Рассмотрим на примере, как лучше оптимизировать Alt. Допустим мы продвигаем сайт по автопрокату. В карточке товара для основного фото нужно задать Alt и Title. Если в качестве Альт использовать «image_123» и «Фото для сайта 345», то это не принесёт никакой пользы. Такой Alt не даст нужных сведений о картинке, значит, она не отобразится в поиске. По словам техподдержки Яндекса, в выдачу попадают лишь картинки с чётким описанием, которые могут быть найдены по конкретным запросам. Лучше вписать в Alt «Toyota на прокат в СПБ», можно даже кратко рассказать об особенностях авто.
Что написать в Тайтл
Требования напоминают советы по настройке Альт:
- по возможности добавьте ключевое слово;
- заглавие обязано объяснять смысл фото;
- идеальный размер – до 240 знаков.
Снова вернёмся к примеру с автопрокатом. Нам следует указать следующий Title: «Серебристая Toyota Allex на прокат в СПБ: 5 пассажирских мест, расход топлива – 7,2 л на 100 км».
Это интересно: Заголовки h2 и Title — делать одинаковыми или разными
Как прописать атрибуты Alt и Title для картинок
Способ добавления атрибутов зависит от движка сайта.
HTML
Если у вас самописный сайт (не на движке), то добавлять атрибут для картинок придётся в ручном режиме.
Чтобы сделать это, откройте файловую систему сайта на хостинге или через специальную программу по FTP. Найдите код иллюстрации ( тег <img), сразу после него и надо вписать Alt и Title.
Это должно выглядеть так:
<img src="Путь к картинке" alt="Альтернативное описание" title="Дополнительная информация">
Советуем сохранить себе образец, чтобы заполнение атрибутов происходило для вас быстро.
WordPress
Здесь всё проще. Если ваш сайт расположен на этом движке, перейдите в консоль (административную часть), а дальше в пункт «Медиафайлы». Затем зайдите в библиотеку и отыщите графику. После чего вам останется ввести данные.
Эти действия можно повторить и путём редактирования публикации: нажмите на картинку, для того чтобы на ней появился знак карандаша.
Tilda
Чтобы задать альтернативный текст для изображения у сайта на Тильде, откройте меню «Контент» и нажмите знак многоточия напротив загруженного изображения.
Чтобы добавить alt тег для изображений в блоках из категории «Галереи», откройте меню «Контент» и напротив загруженной картинки нажмите ссылку «Текст». Затем в поле Image alt for SEO укажите описание картинки.
ЗаключениеВ заключение хотим напомнить, что для успешного продвижения в интернете нет мелочей. Оптимизируйте картинки с помощью атрибутов Alt и Title – это поможет вам обойти конкурентов!
Полезные ссылки:
- 38 коммерческих факторов ранжирования сайтов
- Как бесплатно продвигать сайт
- 11 парсеров Яндекс.
Вордстат
Сравнение онлайн-курсов
Перед тем, как купить любой курс, сравните условия от разных школ — стоимость обучения, скидки, длительность, есть ли программа трудоустройства. Подобрать онлайн-курс >>
Реклама
Больше статей по теме:
РЕКОМЕНДУЕМ:
Реклама
НОВОСТИ
ОБЗОРЫ
СТАТЬИ
Реклама
— HTML | MDN
HTML-элемент <img>
встраивает изображение в документ. Это замещаемый элемент.
Приведённый выше пример показывает очень простое использование элемента <img>
. Атрибут src
обязателен и содержит путь к изображению, которое вы хотите встроить в документ. Атрибут alt
содержит текстовое описание изображения, которое не обязательно, но невероятно полезно для доступности — программы чтения с экрана читают это описание своим пользователям, так они знают какое изображение показано, и так же оно отображается на странице, если изображение не может быть загружено по какой-либо причине.
Есть много других атрибутов, которые могут быть указаны для достижения различных целей, например:
- управление Referrer/CORS в целях безопасности. Смотрите ниже атрибуты
crossorigin
иreferrerpolicy
; - настройка внутреннего размера (en-US) с использованием
width
иheight
, которые полезны, когда вы хотите задать пространство занимаемое изображением, чтобы обеспечить стабильность макета страницы перед его загрузкой; - адаптивные изображения рекомендуется использовать с атрибутами
sizes
иsrcset
(смотрите также элемент<picture>
и наше руководство «Адаптивные изображения»).
Категории контента | Потоковый контент, фразовый контент, встроенный контент, явный контент. Если элемент имеет атрибут usemap , он так же принадлежит к категории интерактивного контента. |
---|---|
Разрешённое содержимое | Никакое, так как это пустой элемент.![]() |
Пропуск тега | Должен иметь открывающий тег и не должен иметь закрывающий. |
Разрешённые родительские элементы | Любой элемент, который разрешает встроенный контент в качестве содержимого. |
Разрешённые роли ARIA | Любые |
DOM-интерфейс | HTMLImageElement |
Стандарт HTML не содержит списка форматов изображений, которые должны поддерживаться. Поэтому разные пользовательские агенты поддерживают разные наборы форматов.
Firefox
Форматы изображений, поддерживаемые Firefox:
- JPEG;
- GIF, включая анимированные GIF;
- PNG;
- APNG;
- SVG;
- BMP;
- BMP ICO;
- PNG ICO.
Если ошибка происходит во время загрузки или отрисовки изображения и обработчик события onerror
был настроен на обработку события error (en-US)
, тогда этот обработчик события будет вызван. Это может произойти в ряде ситуаций, в том числе когда:
- атрибут
src
пустой или null; - указанный URL в атрибуте
src
совпадает с URL страницы, на которой в данный момент находится пользователь; - указанное изображение каким-то образом повреждено, что препятствует его загрузке;
- метаданные указанного изображения повреждены таким образом, что невозможно получить его размеры, и в атрибутах элемента
<img>
не было указано никаких размеров; - указанное изображение имеет формат, который не поддерживается пользовательским агентом.
К этому элементу применимы глобальные атрибуты.
alt
Примечание: Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или неподдерживаемый тип.
В этих случаях браузер может заменить изображение текстом записанным в атрибуте
alt
элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибутеalt
. Примечание: Пропуст этого атрибута в целом указывает, что изображение является ключевой частью контента и текстовый эквивалент не доступен. Установка этого атрибута в значение пустой строки (alt=""
) указывает, что это изображение не является ключевой частью контента (декоративное), и что невизуальные браузеры могут пропустить его при рендеринге (en-US).crossorigin
Этот атрибут указывает, следует ли использовать CORS при загрузке изображения или нет. Изображения с включённой поддержкой CORS могут быть повторно использованы в элементе
<canvas>
не будучи «испорченными». Допустимые значения:anonymous
: Запрос cross-origin (т.е. с HTTP-заголовком
Origin
) выполняется, но параметры доступа не передаются (т.е. нет cookie, не используется стандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (не устанавливая HTTP-заголовокAccess-Control-Allow-Origin
), изображение будет «испорчено» и его использование будет ограничено;use-credentials
: Запрос cross-origin (т.е. с HTTP-заголовкомOrigin
) выполняется вместе с передачей параметров доступа (т.е. есть cookie, используется стандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (посредством HTTP-заголовкаAccess-Control-Allow-Origin
), изображение будет «испорчено» и его использование будет ограничено.Если этот атрибут не задан, то CORS при загрузке изображения не используется (т.е. без отправки HTTP-заголовкаOrigin
), ограничивая его использование в элементе<canvas>
.Если задан неправильно, то он обрабатывается так, как если бы использовалось значение
anonymous
. Для получения дополнительной информации смотрите «Настройки атрибутов CORS».
decoding
Предоставляет рекомендации браузеру по декодированию изображения. Допустимые значения:
sync
: Декодировать изображение синхронно для одновременного отображения с другим контентом;async
: Декодировать изображение асинхронно, чтобы уменьшить задержку отображения другого контента;auto
: Режим по умолчанию, который указывает на отсутствие предпочтений к режиму декодирования. Браузер решает, что лучше для пользователя.
height
Внутренняя высота (см. Внутренний размер (en-US)) изображения в пикселях.
importance
Её поведение в будущем может измениться»> Экспериментальная возможностьУказывает сравнительную важность ресурса. Приоритет выбирается с помощью значений:
auto
: Указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритета изображения;high
: Указывает браузеру, что изображение имеет высокий приоритет;low
: Указывает браузеру, что изображение имеет низкий приоритет.
intrinsicsize
Экспериментальная возможностьЭтот атрибут говорит браузеру игнорировать действительный внутренний размер (en-US) изображения и делать вид, что это размер, указанный в атрибуте. В частности, изображение будет растровым в этих измерениях, а
narutalWidth
/naturalHeight
изображения будут возвращать значения, указанные в этом атрибуте.Объяснение, примеры.
ismap
Это атрибут логического типа, указывающий, что изображение является частью серверной карты ссылок. Если это так, то точные координаты клика отправляются на сервер.
Примечание: Этот атрибут разрешён, только если элемент
<img>
является потомком элемента<a>
с валидным (соответствующий требованиям) атрибутомhref
.loading
Экспериментальная возможностьУказывает на то, как браузер должен загрузить изображение:
eager
: Загружает изображение немедленно независимо от того, находится оно в области просмотра или нет (является значением по умолчанию).lazy
: Откладывает загрузку изображения до того момента, пока оно не достигнет подсчитанного расстояния области просмотра, определяемого браузером.Данное значение помогает избежать использования ресурсов сети и хранилища, необходимых для обработки изображения, пока это действительно не понадобится. В большинстве случаев использование этого аргумента улучшает производительность.
Примечание: Загрузка откладывается только тогда, когда включён JavaScript. Это анти-трэкинг мера. Если бы пользовательский клиент поддерживал опцию отложенной загрузки изображения при отключённом JavaScript, то сайт имел бы возможность отслеживать приблизительную позицию области просмотра в течение сессии пользователя, размещая изображения на странице таким образом, чтобы сервер мог отслеживать, сколько изображений загружено и когда.
referrerpolicy
Экспериментальная возможностьСтрока, указывающая, какой реферер (referrer) использовать при выборке ресурсов:
no-referrer
: ЗаголовокReferer
не будет отправлен;no-referrer-when-downgrade
: ЗаголовокReferer
не отправляется, когда происходит переход к источнику без TLS (HTTPS).Это поведение по умолчанию для пользовательских агентов, если не указано иное;
origin
: ЗаголовокReferer
будет содержать схему адресации ресурса (HTTP, HTTPS, FTP и т.д), хост и порт;origin-when-cross-origin
: Переход на другие источники ограничит включённые реферальные данные схемой адресации ресурса, хостом и портом, в то время как переход из того же источника будет включать полный путь реферала;unsafe-url
: ЗаголовокReferer
будет включать источник и путь, но не фрагмент URL, пароль или имя пользователя. Этот метод небезопасен, потому что будет утечка источников и путей от ресурсов, защищённых TLS, к незащищённым источникам.
sizes
Список из одного или нескольких строк, разделённых запятыми, указывающих набор размеров источника. Каждый размер источника состоит из:1. Условия медиа-запроса. Должно быть пропущено для последнего элемента.
2. Значения размера источника.Значения размера источника устанавливаются исходя из предполагаемых размеров изображения. Пользовательские агенты используют текущий размер источника, чтобы выбрать один из источников, предоставленных атрибутом
srcset
, если эти источники описываются с помощью дескриптора ширины ‘w
‘ (сокращение от width). Выбранный размер источника влияет на внутренний размер (en-US) изображения (отображаемый размер изображения, если не применены стили CSS). Если атрибутsrcset
отсутствует или не содержит значений с дескриптором ‘w
‘, то атрибутsizes
не будет иметь никакого эффекта.src
URL изображения. Этот атрибут является обязательным для элемента
<img>
. В браузерах, поддерживающихsrcset
,src
обрабатывается как изображение-кандидат с дескриптором плотности пикселей1x
, если только изображение с этим дескриптором уже не определено вsrcset
или еслиsrcset
не содержит дескрипторы ‘w
‘.srcset
Список из одной или нескольких строк, разделённых запятыми, указывающих набор возможным источников изображения для использования пользовательскими агентами. Каждая строка состоит из:1. URL изображения. 2. Необязательного, пробела, сопровождаемого:
- дескриптором ширины или положительным целым числом, за которым сразу же следует ‘
w
‘. Дескриптор ширины делится на размер источника, полученный из атрибутаsizes
, для расчёта эффективной плотности пикселей; - дескриптором плотности пикселей, который является положительным числом с плавающей точкой за которым сразу же следует ‘
x
‘.Если не указано ни одного дескриптора, то источнику присваивается дескриптор по умолчанию:1x
.Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибутеsrcset
. Повторение дескрипторов (например, два источника в одномsrcset
с одинаковым дескриптором ‘2x
‘) так же является недопустимым.Пользовательские агенты выбирают любой из доступных источников на своё усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или пропускная способность. Смотрите наше руководство «Адаптивные изображения» для примера.
- дескриптором ширины или положительным целым числом, за которым сразу же следует ‘
width
Внутренняя ширина (см. Внутренний размер (en-US)) изображения в пикселях.
usemap
Неполный URL (начиная с ‘
#
‘) карты-изображения, связанной с элементом.Примечание: вы не можете использовать этот атрибут, если элемент
<img>
является потомком элемента<a>
или<button>
.
Устаревшие атрибуты
align
Этот API вышел из употребления и его работа больше не гарантируется.Выравнивание изображения относительно окружающему его контексту.
Этот атрибут больше не должен быть использован — вместо этого используйте CSS-свойства
float
и/илиvertical-align
. Вы можете так же использовать CSS-свойствоobject-position
для позиционирования изображения внутри границ элемента<img>
. Допустимые значения:top
: Аналогvertical-align: top
илиvertical-align: text-top
;middle
: Аналогvertical-align: -moz-middle-with-baseline
;bottom
: Отсутствует значение по умолчанию, аналогvertical-align: unset
илиvertical-align: initial
;left
: Аналогfloat: left
;right
: Аналогfloat: right
.
border
Этот API вышел из употребления и его работа больше не гарантируется.Ширина рамки вокруг изображения. Вы должны использовать CSS-свойство
border
вместо этого атрибута.hspace
Этот API вышел из употребления и его работа больше не гарантируется.Отступ слева и справа от изображения в пикселях. Вы должны использовать CSS-свойство
margin
вместо этого атрибута.longdesc
Этот API вышел из употребления и его работа больше не гарантируется.Ссылка на более подробное описание изображения. Возможными значениями являются URL или
id
элемента.Примечание: Этот атрибут упомянут в последней версии от W3C, HTML 5.2, но был удалён из живого стандарта HTML от WHATWG. У него неопределённое будущее; авторы должны использовать альтернативы WAI-ARIA, такие как aria-describedby или aria-details.
name
Этот API вышел из употребления и его работа больше не гарантируется.Имя для элемента. Вы должны использовать атрибут
id
вместо этого атрибута.vspace
Этот API вышел из употребления и его работа больше не гарантируется.Отступ сверху и снизу от изображения в пикселях. Вы должны использовать CSS-свойство
margin
вместо этого атрибута.
<img>
является замещаемым элементом; по умолчанию он имеет значение свойства display
равное inline
, но его размеры по умолчанию определяются внутренними значениями (см. внутренний размер (en-US)) встроенного изображения. Вы можете установить на изображение такие свойства, как border
/border-radius
, padding
/margin
, width
/height
и так далее.
Однако, часто бывает полезно установить для изображений свойство display
в значение block
, так что вы имеете максимальный контроль над стилизацией (например, margin: 0 auto
не работает на изображениях с display: inline
, легче размещать изображения в контексте с окружающими элементами, когда они являются блочными).
У <img>
нет базовой линии, когда изображения используются в ситуации со строчным форматированием (display: inline
) вместе с vertical-align
: baseline
, нижняя граница изображения будет размещена на базовой линии контейнера.
Вы можете использовать свойство object-position
для позиционирования изображения внутри границ элемента <img>
и свойством object-fit
регулировать размеры изображения внутри этих границ (например, должно ли изображение помещаться в границы элемента или заполнить элемент полностью, даже если потребуется обрезка).
В зависимости от типа, изображение может иметь собственную (внутреннюю) ширину и высоту. Для некоторых типов изображений тем не менее внутренние размеры (en-US) не обязательны. SVG-изображения, например, могут не иметь внутренних размеров, если для корня их элемента <svg>
не заданы width
и height
.
Альтернативный текст
Следующий простой пример встраивает изображение с альтернативным текстом в страницу для улучшения доступности.
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg" alt="Логотип MDN - изображение динозавра с текстом MDN web docs">
Изображение-ссылка
Этот пример основан на предыдущем и показывает как превратить изображение в ссылку. Это очень просто сделать так — вы вставляете тег <img>
внутрь элемента <a>
. Также вы должны изменить альтернативный текст, чтобы он описывал назначение ссылки.
<a href="https://developer.mozilla.org"> <img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg" alt="Посетить сайт MDN"> </a>
Использование атрибута srcset
В этом примере мы добавляем атрибут srcset
, содержащий ссылку на версию логотипа в высоком разрешении; оно будет загружено вместо изображения в src
на устройствах с высоким разрешением. Изображение указанное в атрибуте
src
, считается 1x
кандидатом в пользовательских агентах, которые поддерживают srcset
.
<img src="mdn-logo-sm.png" alt="MDN" srcset="mdn-logo-HD.png 2x">
Использование атрибутов srcset и sizes
Атрибут src
игнорируется в пользовательских агентах, которые поддерживают srcset
, когда добавлены дескрипторы ‘w
‘. Когда условие медиавыражения (max-width: 600px)
совпадает с состоянием устройства, будет загружено изображение шириной 200px (оно то самое, которое наиболее близко соответствует 200px, указанным в медиавыражении), иначе будет загружено другое изображение.
<img src="clock-demo-thumb-200.png" alt="Часы" srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w" >
Хотя у элементов <img>
есть множество безобидных применений, они могут иметь нежелательные последствия для безопасности и приватности пользователя. Смотрите «Заголовок Referer: проблемы приватности и безопасности (en-US)» для получения дополнительной информации.
Создание значимых альтернативных описаний
Значение атрибута alt
должно чётко и кратко описывать содержимое изображения. Он не должен описывать наличие самого изображения или название файла изображения. Если атрибут alt
намеренно пропущен, потому что изображение не имеет текстового эквивалента, рассмотрите альтернативные способы представления содержимого, которое изображение пытается передать.
Плохо
<img alt="image" src="penguin.jpg">
Хорошо
<img alt="Пингвин на пляже." src="penguin.jpg">
Когда у изображения отсутствует атрибут alt
, некоторые программы чтения с экрана могут объявить вместо него имя файла изображения. Это может привести к путанице, если имя файла не соответствует содержимому изображения.
- Дерево решений атрибута alt • Изображения • Веб-руководство WAI по доступности.
- Альтернативные тексты: максимальное руководство — Axess Lab.
- Как создать отличный альтернативный текст: введение | Deque.
- MDN Понимание WCAG, Руководство 1.1. объяснения.
- Понимание критерия успешного исхода 1.1.1 | W3C Понимание WCAG 2.0.
Атрибут title
Атрибут title
не является приемлемой заменой атрибута alt
. Кроме того, избегайте повторения значения атрибута alt
в атрибуте title
, объявленном на том же изображении.
Атрибут title
также не должен использоваться в качестве подписи, сопровождающей альтернативное описание изображения. Если изображению нужна подпись, используйте элемент <figure>
вместе с элементом <figcaption>
.
- Использование HTML-атрибута title — обновлено | The Paciello Group.
Specification |
---|
HTML Standard # the-img-element |
BCD tables only load in the browser
with JavaScript enabled.
- Изображения в HTML.
- Адаптивные изображения.
- Элементы
<picture>
,<object>
(en-US) и<embed>
. - Связанные с изображениями CSS-свойства:
object-fit
,object-position
,image-orientation
(en-US),image-rendering
(en-US), иimage-resolution
(en-US).
Last modified: , by MDN contributors
10 Признаков хорошей фотографии
Нас часто спрашивают, как сделать хорошую фотографию. Как студия, мы пытались разработать методологию, чтобы мы могли постоянно создавать потрясающие изображения. Изучая наше искусство за последнее десятилетие, мы составили список из десяти характеристик, наиболее часто встречающихся на лучших фотографиях. Хотя мы используем примеры из нашего свадебного портфолио для изображений ниже, эти правила применимы ко всем жанрам фотографии.
Если есть одна всеобъемлющая характеристика, важность которой предшествует всем характеристикам, перечисленным в этой статье, так это то, что у каждого изображения должна быть цель. Изображение должно рассказывать историю или осмысленно отражать уникальный момент. Если вы просматриваете свое портфолио и задаетесь вопросом, почему вы сделали то или иное изображение, то есть большая вероятность, что ему не хватает некоторых или всех следующих характеристик.
Хотя маловероятно, что данное изображение (даже потрясающая фотография) будет включать в себя все эти характеристики, постарайтесь объединить как можно больше и всегда помните о композиции. Без дальнейших задержек, вот 10 характеристик отличных фотографий.
1 – Хорошая фотография имеет привлекательную композицию
Большинство основных руководств по фотографии включают в себя общие композиционные концепции, такие как правило третей и правила симметрии, но какие еще методы мы можем использовать для создания привлекательных композиций? Некоторые менее распространенные методы включают негативное пространство, направляющие линии, глубину резкости и кадрирование. Я упомянул об этом правиле первым, потому что не имеет значения, какому именно стилю, технике или правилу вы следуете, главное, чтобы каждое изображение было продуманно составлено. Будут времена, когда композиция отойдет на второй план, чтобы просто захватить кадр, но в противном случае ее следует учитывать, когда это возможно.
Изображение выше использует одно из наиболее распространенных композиционных правил, правило третей, двумя способами. Во-первых, дюны занимают две трети изображения по горизонтали, а солнце и небо занимают последнюю треть. Во-вторых, пара была размещена возле верхнего левого пересечения горизонтальной и вертикальной третей. Хотя это правило широко практикуется, это изображение показывает, почему оно так эффективно, особенно в этой сцене из Дубая.
Изображение выше показывает динамическую симметрию непрерывной спирали, которая часто встречается как в природе, так и в архитектуре. Существуют математические уравнения, касающиеся отношений, которые технически объясняют, почему это приятно для глаз, но достаточно легко заметить, как линии эффективно ведут к объектам, которые были помещены в нижнюю левую треть изображения. Конечно, драматическое освещение также играет роль в минимизации отвлекающих факторов и привлечении внимания зрителя к самой яркой части фотографии.
На фотографии выше есть несколько композиционных компонентов, в том числе направляющие линии, правило третей и уникальное обрамление. Ведущие линии в сцене привлекают внимание зрителя к паре, которая занимает пространство, обрамленное стенами по обе стороны прохода в Концертном зале Диснея в Лос-Анджелесе. Кроме того, вся композиция обрамлена третями: левая треть, где проживает пара, и правые две трети, занятые стеной и направляющими линиями. Отражение пары в стене справа также добавляет изображению ощущение (почти симметричного) баланса.
Обрамление является ключевым на изображении выше, так как пара обрамлена несколькими слоями квадратов. Они также были размещены на пересечении нижних левых третей, а освещение использовалось, чтобы привлечь внимание к паре.
На изображении выше боке, которое в основном относится к частям изображения не в фокусе, работает в тандеме с малой глубиной резкости, чтобы отделить объекты от фона (а в случае этот прострел, передний план тоже). Объекты занимают очень узкую полосу пространства, которая остается в фокусе, а также находится в нижней правой трети изображения.
Здесь у нас есть отличная демонстрация силы симметрии. Пара была помещена на вершину треугольной скалы на переднем плане, создавая первый слой симметрии. Горный массив на заднем плане также добавляет симметрии изображению, поскольку он перекликается с треугольной формой на переднем плане, а также обеспечивает свой собственный симметричный элемент.
Дополнительную информацию о композиции и о том, как комбинировать элементы композиции, можно найти здесь.
2 — Проявление эмоций может создать хорошее фото
Как человеческие существа, мы тянемся к эмоциям. Смеемся мы или плачем, эмоции связывают всех и каждого из нас вместе. Изображения, передающие искренние эмоции, часто оказываются вечными, и эти значимые моменты всегда будут привлекать внимание зрителей.
Изображение выше было снято во время Видаи, который знаменует собой окончание индуистской свадебной церемонии и начало пути жениха и невесты как мужа и жены. Видаис может быть очень эмоциональным, когда друзья и семья невесты желают ей прощания (как показано выше).
Оборотная сторона грустных эмоций, искреннее счастье также эффективно связывает зрителей с объектами на изображениях. Обычно, чем откровеннее и естественнее кажется снимок (даже если он был на самом деле направлен), тем большее впечатление производит изображение.
[См. литература: Как позировать и режиссировать портреты в натуральную величину: 10 советов от работающих профессионалов]
3. Рассказывание историй делает хорошую фотографию
Некоторые из лучших изображений просто рассказывают историю. Вместо того, чтобы полагаться на отличную композицию или другие уникальные характеристики, они сосредотачиваются на повествовании. Некоторые из лучших изображений для повествования можно найти в новостях и других источниках фотожурналистики. От триумфального возгласа только что коронованного спортивного чемпиона до протестующего, стоящего перед танком во время резни на площади Тяньаньмэнь, эти изображения фиксируют и замораживают моменты истории, чтобы каждый мог стать свидетелем. Вот несколько примеров свадеб, которые мы снимали.
Вы почти чувствуете предвкушение в воздухе, когда отец невесты ведет ее вниз по лестнице к месту церемонии в Малибу Роки-Оукс. С этой уникальной точки зрения вы можете увидеть, как разворачивается история, поскольку семья невесты, друзья и будущий жених с нетерпением ждут ее прибытия.
Что такое подготовка невесты без небольшой помощи друзей или семьи невесты? Здесь ансамбль подружек невесты восхищается красотой невесты со всех сторон, помогая ей с последними штрихами в подготовке к ее большому дню.
Для свадебных фотографов первый взгляд на алтарь дает прекрасную возможность запечатлеть предвкушение и удивление жениха и невесты, впервые увидевших друг друга в день свадьбы (в зависимости от того, сделали ли они первый раз или нет). смотри днем раньше). Это один из основных моментов всего дня.
4 – Эллиптическое повествование
Большинство изображений, рассказывающих историю, уже заслуживают внимания, но еще лучше изображения, которые рассказывают истории, оставляя что-то для воображения зрителя. Вы, наверное, слышали, как люди говорят, что книга всегда лучше фильма, потому что она позволяет нам использовать наше воображение для создания в уме самых удивительных и персонализированных спецэффектов. Изображения, которые оставляют что-то для воображения, имеют тенденцию делать то же самое. Они предлагают достаточно информации, чтобы питать наше воображение, когда мы заполняем недостающие фрагменты.
Этот снимок был сделан в местном аэропорту во время съемок помолвки. Хотя мы не можем быть уверены в личности субъектов, нам дают достаточно подсказок, чтобы представить, что они отправляются в дальнее путешествие. Мы не знаем, куда они идут и при каких обстоятельствах, но именно поэтому изображение работает так хорошо. Ограниченные подсказки позволяют вам представить все остальное.
Нам дано очень мало подсказок, чтобы определить ситуацию на изображении выше, но этого достаточно, чтобы позволить творческие предположения. Непосредственная близость между субъектами подразумевает близкие отношения, а стиль обуви и гардероба в сочетании с граффити на заднем плане придают этой нерассказанной истории городской оттенок.
5 – Из культовых моментов получаются хорошие фотографии
Снимая культовый момент, вы запечатлеваете момент, созданный или смоделированный по образцу значимых моментов в поп-культуре и/или истории. Будь то воспроизведение сцены из классического фильма или момент, основанный на чем-то модном, эти кадры позволяют зрителям почувствовать эмоциональную связь с моментом в изображении.
Хотя Джеймс Дин никогда не ездил на мотоцикле в своих фильмах, существует множество фотографий звезды, когда он сидит на старом Triumph, источая образ крутого парня, бунтаря, с которым он часто ассоциируется. В кадре выше, вдохновленном Джеймсом Дином, зрители переносятся в эпоху крутизны, когда мы мельком видим пару в зеркале заднего вида, как раз перед тем, как они уезжают в закат.
Портрет пары выше напоминает о золотом веке Голливуда благодаря использованию щегольских нарядов, редакционных поз, драматическому освещению и реквизиту на съемочной площадке (например, светильник в стиле ретро, который был частью декора в комнате в отель «Голливуд Рузвельт»).
6 – Хорошая фотография часто позволяет запечатлеть уникальные моменты
Какой простой способ создать интересное изображение? Просто снимите что-то уникальное для соответствующей аудитории. Например, в то время как христианская свадьба может показаться довольно распространенной в Соединенных Штатах, традиционная индуистская свадьба не так распространена и, следовательно, автоматически более интересна аудитории в штатах. Другие уникальные моменты могут раскрыться во время необычных событий или в уникальных местах.\
Во время предсвадебного бараата жених-сикх выглядывает из-под своей сехры, чтобы осмотреть достопримечательности. Хотя барааты довольно распространены на индуистских и сикхских свадьбах, они уникальны для тех, кто никогда их не видел. Кроме того, богато украшенная и красочная одежда, которую носят большинство присутствующих, делает уникальные фотографии.
Нечасто удается сделать семейный портрет в рамке под эффектный фейерверк. Изображение выше было снято за пределами зала во время свадебного приема и использовало подсветку, чтобы отделить семью от фона.
Дополнительные советы о том, как снимать портреты под фейерверком, можно найти здесь.
Изображение выше было снято на закате сразу после того, как облака начали рассеиваться в Малибу Роки-Оукс. Используя выносную вспышку, чтобы выделить пару, мы смогли запечатлеть уникальный портрет пары в обстановке, внешний вид и освещение которой менялись каждую минуту.
Здесь вы можете увидеть, как мы сделали снимок выше.
7 – Сопоставление/сопоставление понятий
Некоторые из наиболее интересных изображений сопоставляют (сравнивают) совершенно противоположные объекты и понятия. Примеры этого могут включать красивую невесту в полностью белом струящемся свадебном платье, снятую на фоне, усеянном мусором и граффити, таким образом сопоставляя красоту и чистоту с уродством и нечистоплотностью. Или, возможно, бездомный в центре города сидит со всеми своими вещами на фоне светящейся вывески Merryl Lynch, противопоставляя крайнюю нищету символу богатства и власти. Смотрите изображения ниже для большего количества примеров.
Возможно, вам интересно, что происходит на этом изображении. Мы смотрим из импровизированной лачуги в центре Лос-Анджелеса. Возможно, это не первое место, которое можно было бы использовать в качестве фона для портрета помолвки, но оно соответствует теме городской помолвки и представляет собой уникальную обстановку для освещения и обрамления пары.
Изображение выше было снято в Центре исполнительских искусств Лонг-Бич на фоне фрески в стиле граффити. Элегантные гардеробы жениха и невесты на этом снимке в редакционном стиле хорошо контрастируют с нарисованным фоном.
8 — Уникальное освещение и цвет могут сделать хорошую фотографию
Освещение и цвет — это то, с чего начинаются многие великолепные изображения. Отличное освещение может превратить обыденную сцену в удивительно красочную сцену, полную текстуры и жизни. В природе подобные сцены происходят постоянно во время восхода и заката, и хотя мы не можем контролировать освещение этих мимолетных мгновений, если вам случится оказаться в нужном месте в нужное время, вы просто сможете захватить его (см. пункт номер шесть выше). Тем не менее, мы можем контролировать и создавать уникальное освещение самостоятельно, обладая необходимыми знаниями, используя освещение вне камеры, вспышки и многое другое.
Изображение выше было создано с использованием техники панорамирования, которую можно использовать для добавления динамического движения с помощью перетаскивания затвора (длинные выдержки). Хотя фон на этом изображении уже привлекателен, добавленная техника освещения выделяет этот портрет среди других, снятых в том же месте.
Уменьшив экспозицию в камере и подсветив пару внешней вспышкой, мы смогли запечатлеть этот уникальный портрет пары под прекрасным небом Аризоны.
Силуэты — это изображения с контровым светом, которые легко снимать и которые помогут вам создать хорошую фотографию. На изображении выше, снятом в дюнах за пределами Дубая, мы поместили объекты прямо перед заходящим солнцем и уменьшили экспозицию, чтобы показать очертания пары, едущей на верблюде по песку. Баланс белого также играет важную роль в этом изображении, поскольку он добавляет ощущение пустыни с ярко-оранжевым небом.
Мы рассмотрим эти и другие методы освещения в книге «Освещение 201», а также в нашей серии «Незаписанные».
9 – Внимание к деталям
В наше время и в обществе, где все зависит от скорости и эффективности, изображений, которые фиксируют упущенные детали, может быть достаточно, чтобы кто-то остановился, чтобы понюхать розы. В то время как изображения уникальных и невидимых деталей изумительны и захватывают дух, вы часто можете получить такую же реакцию от своей аудитории, просто снимая детали в повседневной жизни.
Детальное изображение туфель невесты было снято на столе отеля во время свадьбы в Хантингтон-Бич. Драматическое освещение и отражающая поверхность превращают эту фотографию в снимок продукта, который вы могли бы ожидать увидеть в рекламе обуви.
Хотя макрообъективы часто используются для фотографирования цветов и насекомых, макрообъективы открывают целый мир возможностей для фотографирования всевозможных крошечных объектов, включая обручальные кольца (как показано на изображении выше). Самое приятное то, что помимо покупки макрообъектива, вы можете использовать недорогое освещение, чтобы получить желаемый результат.
На изображении выше индийская невеста делает короткую паузу, прежде чем отправиться на место церемонии. Богато украшенное платье и аксессуары, а также хна на руках и руках невесты наполнены деталями и заслуживают более пристального внимания. Хорошая фотография — это иногда та, на которой детали слишком сильно увеличены.
Для получения дополнительной информации о том, как фотографировать детали, подобные описанным выше, см. наши свадебные мастер-классы «Фотографирование жениха» и «Фотосъемка невесты».
10 – Уникальная перспектива
Большинство из нас проживает свою жизнь, рассматривая мир с относительно одинаковой точки зрения. Это то, что делает уникальные перспективы такими интересными для аудитории. Вместо того, чтобы снимать ребенка с точки зрения взрослого, почему бы не присесть и не снять его с точки зрения ребенка. Очень низкий уровень снизу вверх и высокий уровень сверху вниз часто могут создать гораздо более уникальное и интересное изображение.
Это изображение было снято во время мероприятия, когда некоторые дети устраивали собственную небольшую вечеринку. Что может быть лучше для съемки детей, чем снимать с их точки зрения. Вы можете себе представить, как этот кадр не был бы таким особенным, если бы он был снят с точки зрения стоя (взрослого).
Для этой фотографии жениха и невесты, танцующих в ротонде отеля Monarch Beach Resort, дрон не понадобился. Независимо от того, используете ли вы дрон, балкон или даже удлиненный монопод, захват изображения с более высокой точки зрения может улучшить ваше изображение и помочь вам создать хорошую фотографию.
Изображение выше было снято с низкого ракурса, чтобы запечатлеть этот уникальный ракурс и показать красивый фон над парой. Помните, что фоны могут быть выше или ниже вас!
На этом портрете, сделанном на соляных равнинах Бонневиль в штате Юта, мы использовали технику панорамного сшивания с широкой апертурой, называемую методом Бренизера, чтобы продемонстрировать пару. Без использования этой техники было бы сложно снять такой большой кадр с такой малой глубиной резкости.
Мы более подробно обсудим эту технику в нашем мастер-классе по панорамному сшиванию.
Надеемся, вам понравилась эта статья! Если это так, пожалуйста, поделитесь этой статьей, чтобы показать нам свою любовь! Кроме того, пожалуйста, добавляйте свои дополнительные идеи по созданию отличных изображений в комментариях ниже.
Как правильно атрибуировать изображения Creative Commons
Feature Photo: Label, Tag, String, Shape
Правильные действия — это не только оплата за изображения, но и правильное указание авторами их работы. В большинстве случаев, если вы используете изображение, по закону вы обязаны указать его атрибут, и невыполнение этого требования может привести к судебному разбирательству. К счастью, атрибуция изображения довольно проста; читайте дальше, чтобы узнать, как именно это сделать.
Атрибуция изображений Creative Commons
Если вы не используете изображение, опубликованное под лицензией Creative Commons Zero (CC0), указание авторства является обязательным требованием закона. Структура Creative Commons (CC) определяет атрибуцию как предоставление «надлежащего кредита», который некоторые люди ошибочно считают открытым для интерпретации. На самом деле CC означает TASL, простой и гибкий метод, учитывающий требования различных лицензий CC.
Чтобы убедиться, что изображения правильно атрибутированы, включите следующие детали и убедитесь, что они четко отображаются рядом с соответствующим изображением (в идеале прямо под ним):
- Название: Название изображения.
- Автор: Имя создателя.
- Источник: URL-адрес, по которому размещено изображение (плюс необязательная ссылка на профиль автора).
- Лицензия: тип лицензии Creative Commons, по которой он доступен, включая ссылку на соответствующую лицензию.
Согласно Creative Commons, идеальным примером TASL может быть:
«Зима в городе», Дэвид Дж., лицензия CC BY 2.0
Вот несколько полезных советов для правильной атрибуции изображения Creative Commons:
- Убедитесь, что вы выполнили работу по атрибутированию изображений в соответствии с методом TASL, включая поиск недостающей информации, если это необходимо.
- При наличии нескольких авторов необходимо указать каждого из них.
- Заменяйте имя пользователя или дескриптор только в том случае, если полное имя создателя недоступно.
- Если есть какие-либо сомнения относительно того, как должны указываться авторы, свяжитесь с владельцем авторских прав.
- Убедитесь, что авторство полностью видно. Если невозможно определить тип лицензии и/или право собственности на изображение, значит, вы неправильно его атрибутировали.
- Для изображений под лицензией CC 4.0 включение заголовка не обязательно.
- Наша статья содержит полную информацию о том, как использовать изображения Creative Commons.
- На этой странице приведены примеры передовой практики для указания авторства в рамках Creative Commons.
Атрибуция модификации изображений Creative Commons
Некоторые лицензии Creative Commons позволяют вносить изменения в изображение. Прежде чем что-либо делать, убедитесь, что модификации разрешены условиями лицензии. Если вы вносите какие-либо изменения в исходное изображение, важно, чтобы эти изменения были указаны в атрибуции, как для защиты оригинальной работы, так и для того, чтобы отделить создателя от дальнейших производных работ.
Вот пример подробного описания модификаций:
«Зима в городе», Дэвид Дж., лицензия CC BY 2.0, ненасыщенная по сравнению с оригиналом
Атрибуция изображения Creative Commons, если владелец не может быть идентифицирован
Вы можете прийти среди изображений Creative Commons, которые не имеют четкой связи с их создателем или типом лицензии. Публикация изображения без указания автора немедленно нарушает условия лицензии Creative Commons (если только это не CC0). Если нет четкой ссылки на создателя или тип лицензии изображения — просто не используйте его.
Атрибуция за пределами Creative Commons
За пределами Creative Commons изображения должны указываться их создателем в соответствии с лицензионным соглашением, в соответствии с которым они были приобретены.