Картинки в css – Изображение (картинка) в CSS. Основы CSS для начинающих. Урок №9

15.06.2020 Советы художника

Как через CSS задать размер изображения

Из рассмотренного примера мы поняли что изображение выводится на страницу при помощи HTML тегов .
А размеры картинки мы прописали прямо в HTML коде.

Сейчас покажу как задать размеры изображения при помощи таблицы стилей. Все эти данные поместим в отдельный файл с расширением css и назовем его для примера style.css.

Размеры изображения задаются параметрами width и height.
Для того, чтобы задать размеры для изображения и прописать его через файл CSS нужно создать класс для тега src. Для примера пропишем class=”image”

Тогда в файле css размеры будут записаны таким образом

img.image { width: 300px; height: 170px; border: none; }

При таком варианте записи, если реальная высота изображения будет больше 170 пикселей, например, 400 пикселей то на странице будет показано искаженное изображение. Оно будет сплющено.
 

Для того, чтобы избежать этого можно задать только один параметр, ширину изображения, высота по умолчанию будет выставлено, автоматически не нарушая пропорции изображения:

img.image { width: 300px; border: none; }

Таким же образом можно задать высоту height, тогда ширина будет установлена автоматически сохраняя пропорции изображения.

Если мы хотим видеть реальные размеры изображения, тогда прописывать размеры картинки в файле не обязательно. Только если мы примерно знаем, что размер изображения занимает всю страницу, то на странице не должно быть никаких тегов задающих размер.
 

Например, таблица <table> или блок див <div> у которых уже задан размер. Тогда размер картинки, который находится внутри таблицы или блока div будет такой же как у таблицы или блока div.

Если мы хотим, чтобы картинка занимала всю ширину страницы браузера или всю ширину столбца сайта, тогда ширину надо прописать в процентах.

Вот таким образом:

img.image { width: 100%; border: none; }

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

Для веб-дизайнеров является плохим тоном если стили приписываются в формате HTML. В шаблоне прописываются только классы и id для каждого элемента. А все стили выносятся в отдельный файл css. 

  Кроме того, если вы хотите создать удивительно красивый и уникальный дизайн вашего сайта, то вам никак не обойтись без фонового изображения. Как же без него? Как это сделать описано в этом разделе, а куда поместить само фоновое изображение можно узнать прямо тут.

Приятного чтения. 

А если есть какие мнения по поводу прочитанного форма для комментария внизу.

baseml.ru

HTML-изображения

HTML-изображения добавляются на веб-страницы с помощью тега <img>. Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.

С помощью HTML-тегов <map> и <area> можно создавать карты-изображения с активными областями.

Вставка изображений в HTML-документ

1. Тег <img>

Элемент <img> представляет изображение и его резервный контент, который добавляется с помощью атрибута alt. Так как элемент <img> является строчным, то рекомендуется располагать его внутри блочного элемента, например, <p> или <div>.

Тег <img> имеет обязательный атрибут src, значением которого является абсолютный или относительный путь к изображению:

<img src="image.png" alt="Пример кода">

Для тега <img> доступны следующие атрибуты:

<img src="flower.jpg"
  srcset="
    img/flower-mobile.jpg 320w,
    img/flower-wide-mobile.jpg 480w,
    img/flower-tablet.jpg 768w,
    img/flower-desktop.jpg 1024w,
    img/flower-hires.jpg 1280w"
 
  alt="Роза в моём саду">

1.1. Адрес изображения

Адрес изображения может быть указан полностью (абсолютный URL), например:

Или же через относительный путь от документа или корневого каталога сайта:
url(../images/anyphoto.png) — относительный путь от документа,
url(/images/anyphoto.png) — относительный путь от корневого каталога.

Это интерпретируется следующим образом:
../ — означает подняться вверх на один уровень, к корневому каталогу,
images/ — перейти к папке с изображениями,
anyphoto.png — указывает на файл изображения.

1.2. Размеры изображения

Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и height. Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.

1.3. Форматы графических файлов

Формат JPEG (Joint Photographic Experts Group). Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.

Формат GIF (Graphics Interchange Format). Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.

Формат PNG (Portable Network Graphics). Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.

Формат APNG (Animated Portable Network Graphics)

Формат SVG (Scalable Vector Graphics). SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.

Формат BMP (Bitmap Picture). Представляет собой несжатое (оригинальное) растровое изображение, шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных. В заголовке хранится информация о графическом изображении и файле (глубина пикселей, высота, ширина и количество цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов. Графические данные представляют саму картинку. Глубина цвета в данном формате может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель.

Формат ICO (Windows icon). Формат хранения значков файлов в Microsoft Windows. Также, Windows icon, используется как иконка на сайтах в интернете. Именно картинка такого формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со сторонами 16, 32 и 48 пикселей.

2. Тег <map>

Тег <map> служит для представления графического изображения в виде карты с активными областями. Активные области определяются по изменению вида курсора мыши при наведении. Щелкая мышью на активных областях, пользователь может переходить к связанным документам.

Для тега доступен атрибут name, который задает имя карты. Значение атрибут name для тега <map> должно соответствовать имени в атрибуте usemap элемента <img>:

<img src="url" usemap="#имя_карты">
<map name="имя_карты">
...
</map>

Элемент <map> содержит ряд элементов <area>, определяющих интерактивные области в изображении карты.

3. Тег <area>

Тег <area> описывает только одну активную область в составе карты изображений на стороне клиента. Элемент не имеет закрывающего тега. Если одна активная область перекрывает другую, то будет реализована первая ссылка из списка областей.

<map name="имя_карты">
<area атрибуты>
</map>

4. Пример создания карты-изображения

1) Размечаем исходное изображение на активные области нужной формы. Координаты областей можно вычислить с помощью программы для обработки фотографий, например, Adobe Photoshop или Paint.

2) Задаем имя карты, добавив его в тег <map> с помощью атрибута name. Это же значение присваиваем атрибуту usemap тега <img>.

3) Добавляем ссылки на веб-страницы или части веб-документа для каждой активной области, по которым пользователь будет переходить при нажатии курсором мыши на активную область изображения.

<img src="https://html5book.ru/wp-content/uploads/2014/12/flowers_foto.jpg" alt="flowers_foto" usemap="#flowers">
<map name="flowers">
<area shape="circle" coords="70,164,50" href="https://ru.wikipedia.org/wiki/Гербера" alt="gerbera" target="_blank"> 
<area shape="poly" coords="191,13,240,98,143,98,191,13" href="https://ru.wikipedia.org/wiki/%C3%E8%E0%F6%E8%ED%F2" alt="hyacinth" target="_blank"> 
<area shape="circle" coords="318,93,50" href="https://ru.wikipedia.org/wiki/Ромашка" alt="camomiles" target="_blank"> 
<area shape="circle" coords="425,129,45" href="https://ru.wikipedia.org/wiki/Нарцисс_(растение)" alt="narcissus" target="_blank"> 
<area shape="rect" coords="480,3,572,89" href="https://ru.wikipedia.org/wiki/Тюльпан" alt="tulip" target="_blank"> 
</map>

html5book.ru

Картинки в HTML – шпаргалка для новичков

Прежде, чем ответить на вопрос «как вставить картинку в HTML?», следует отметить, что перегружать веб-страницы огромным количеством графического материала не стоит, поскольку это не только улучшит визуальное восприятие ресурса пользователем, но и увеличит время загрузки страницы.

При создании веб-сайтов чаще всего используют графические форматы PNG, GIF и JPEG, а для дизайнерских работ с изображениями — графический редактор Adobe Photoshop, обладающий богатыми возможностями для сжатия и изменения размера изображений без потери качества, что является невероятно важным для веб-разработки.

Как вставить изображение в HTML?

Для того чтобы вставить изображение на HTML-страницу, используется одиночный простой тег:

где xxx — адрес изображения. В том случае, если картинка находится в одной директории со страницей, тег будет выглядеть как:

<img src=”image.png”>

Однако скоростной и стабильный интернет добрался ещё не во все уголки земного шара, и бывает так, что изображение на веб-сайте попросту не загружается. Для таких случаев существует понятие альтернативного текста.

Он показывается на месте картинки в момент его недоступности, загрузки или в режиме работы браузера «без картинок». Добавляется он с помощью атрибута alt тега <img>.

Пример добавления альтернативного текста к графическому файлу:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Альтернативный текст</title>
</head>
<body>
<p><img src="images/example.png" alt="Альтернативный текст"></p>
</body>
</html>

Назначение размеров картинки в HTML

Для того чтобы изменить размеры отображения графического файла, используют теги height и width, где height — высота, а width — ширина, измеряемые в пикселях.

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

Рисунок помещается в прямоугольник с заданными размерами, а в том случае, если параметры меньше или больше исходных, картинка растягивается или сжимается.

Если атрибуты height и width не используются, браузер загружает изображение сразу, задерживая отображение текста и прочих элементов страницы.

Данные параметры можно указать как в пикселях (размер картинки постоянен и не зависит от разрешения экрана пользователя), так и в процентах (размер картинки зависит от разрешения экрана).

Например:

<img src=”example.png” width=”60” height=”40”>

или

<img src=”example.png” width=”50%” height=”10%”>

Следует помнить, что в тот момент, когда вы изменяете исходный размер изображения, необходимо сохранять его пропорции.

Для этого достаточно указать значение только одного из параметров (ширины или высоты), а значение второго браузер вычислит в автоматическом режиме.

Расположение картинки в HTML

Как и ко многим тегам HTML, к применим атрибут align, который выполняет выравнивание изображения:

<img src=”example.png” align=”top”> — картинка располагается выше текста;

<img src=”example.png” align=”bottom”> — картинка располагается ниже текста;

<img src=”example.png” align=”left”> — картинка располагается слева от текста;

<img src=”example.png” align=”right”> — картинка располагается справа от текста.

Картинка-ссылка

В HTML для создания ссылки используется тег <a>:

<a href=”адрес вашей ссылки”>Имя ссылки</a>

Для того чтобы задать графическую ссылку, необходимо всего лишь объединить тег изображения с тегом ссылки.

Делается это следующим образом:

<a href=”адрес ссылки”><img src=”адрес картинки”></a>

Как видите, графическая вставка может быть ссылкой и при клике переадресовывать на любой адрес, записанный в полном или сокращённом варианте.

Как можно сделать картинку фоном в HTML?

Изображение можно не только вставлять на страницу в качестве видимого объекта, но и сделать фоновым. Для определения картинки как фона необходимо в теге прописать атрибут background=”xxx”, где xxx — адрес картинки, указанный таким же способом, как в примерах выше.

Для примера зададим такую текстурную картинку в роли фоновой:

Сохраните изображение в папке с заготовленной заранее страницей и пропишите следующие строки:

<html>
<head><title>Страница с фоновой картинкой</head></title>
<body background=”image.jpg”>
<h2> Фон с текстом. </h2>
</body>
</html>

Фоновая картинка на странице задана.

На этом информация о тегах и атрибутах, необходимых для вставки изображения на HTML страницу сайта, исчерпана.

Желаем удачи!

www.internet-technologies.ru

Как делаются в css адаптивные картинки и фон?

И вновь приветствую всех читателей. Раз уж зашла речь об адаптивной верстке, то вы должны сделать так, чтобы ваши картинки и фоновые изображения хорошо смотрелись на всех разрешениях экранов. Как делать в css адаптивные картинки и фоновые изображения? Хороший вопрос, давайте разбираться.

Адаптивные изображения — тег img

Сначала разберемся, что делать с теми картинками, которые вставляются через тег img. Вообще с ними при адаптации шаблона под мобильные устройства может возникать всего 3 проблемы (по крайней мере сейчас мне в голову приходят именно они). Вот они:

1. При уменьшении ширины окна картинка попросту начинает не влазить в него. Лечение: использовать для блока, в котором размещается изображение, максимальную ширину, а самому изображению также задать максимальную ширину в 100% и автоматическую высоту, которая будет рассчитываться, исходя из пропорций. Вот так:

   img{
         max-width: 100%;
         height: auto;
   }

2. Вторая проблема — при сильном сужении на маленьких экранах изображения становятся слишком маленькими, так что их практически не видно. Лечение: прописывать минимальную ширину изображениям. Как правило, это 250-300 пикселей. Меньше картинки просто не станут и это хорошо.
3. Ну и, собственно, еще одна проблема связана с картинками, у которых есть обтекание. На определенной ширине может сложиться так, что картинка будет занимать почти всю доступную ширину, а текста слева или справа будет очень мало. Соответственно, на таком участке нужно сделать медиа-запрос и свойство float у изображения. То есть задать ему float: none.

Адаптивный фон — background-image

Чтобы адаптировать фоновое изображение под все экраны, я рекомендую вам использовать css-свойство background-size. У него есть следующие значения, которые нам могут подойти:

1. contain — это значение масштабирует картинку так, чтобы она целиком помещалась в блок. При этом в блоке могут оставаться пустые места.
2. cover — масштабирует фоновое изображение (с сохранением пропорций), чтобы по ширине или высоте (в зависимости от ситуации) оно растягивалось на весь размер блока. При этом по одной стороне (горизонтали или вертикали) все равно может остаться пустое место.

В общем, все советуют использовать background-size: cover. Так ваш фон будет с одной стороны растягиваться, а с другой сохранять пропорции. Есть более безотказный вариант, но при нем могут быть нарушены пропорции. Это background-size: 100% 100%. Это означает, что изображение будет растянуто на 100% и по ширине, и по высоте своего блока, вне зависимости от его размеров, однако при этом может быть сильно искажено, чтобы заполнить собой всю область.

dolinacoda.ru

способы задания ширины и высоты

От автора: приветствую вас. Картинки — практически один из самых важных элементов на веб-страницах. Благодаря им нам значительно проще и интереснее воспринимать то, что мы видим на экране. Но если заводить речь об их встраивании в веб-страницы, то нужно знать как минимум то, как управлять размером картинки в html. Именно об этом мы сегодня поговорим.

Способы задать размер изображениям

Будем смотреть все на очень простом примере. Вот такой есть код:

<div id = «img»> <img src = «tiger.jpg»> </div>

Это блок с идентификатором, внутри которого лежит картинка. Предположим, что наш блок имеет фиксированные размеры. Для наглядности зададим еще и красную рамку, чтобы четко видеть его границы:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

#img{ width: 200px; height: 160px; border: 2px solid red; }

Итак, ширина блока — 200 пикселей, а высота — 160. И вот нам нужно, чтобы в него вписалось фото. Но величины ее, допустим, мы не знаем. Ну ладно, я могу вам сказать, что я сделал примерно 300 на 200 пикселей, в таком случае фото попросту не влезет в блок. Давайте посмотрим, что будет:

На этом скриншоте очень четко видно, что оно выходит за пределы красной рамки, то есть не вписывается в блок, в котором должно находиться внутри. Каким образом можно исправить ситуацию?

Предположим, что фото лежит на сервере и изменить непосредственно ее ширину и высоту нельзя. В таком случае один из вариантов — задать фиксированную ширину и высоту картинке с помощью атрибутов тега img: width и height.

<img width = «200» height = «160» src = «tiger.jpg»>

Вот, теперь все идеально вписалось в блок, потому что теперь имеет такие же параметры, как и он сам. Но помните одну важную деталь: если вы сами прописываете и ширину и высоту, то, скорее всего, нарушаете пропорции. Чтобы не нарушать их, нужно прописать только одно значение (ширину). Тогда второе браузер посчитает сам, не нарушая пропорций.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

<img width = «200» src = «tiger.jpg»>

Теперь изображение по высоте занимает не все доступное место, но зато ее пропорции не нарушены.

Собственно, такой способ задания размера (прямо в html через атрибуты) годится лишь в том случае, когда вы работаете с каким-то конкретным изображением на конкретной страницы. Если размеры необходимо определить группе картинок, намного правильнее использовать отдельной файл стилей, в котором прописывать все необходимые правила.

В css правила можно задать как отдельной картинке (выделив ее идентификатором), группе (прописав каждому изображению класс или с помощью других доступных селекторов) либо сразу всем, обратившись по селектору img.

Как сделать в css адаптивные картинки?

Для этого уже давно веб-разработчики и верстальщики используют такой достаточно простой код:

img{ max-width: 100%; height: auto; display: block; }

То есть максимальная ширина 100% от размеров родительского контейнера, автоматическая высота (браузер рассчитывает сам, не нарушая пропорций) и блочное отображение. Последнее вовсе не обязательно и если его удалить, это никак не скажется на поведении картинок.

Если удалить атрибут width из html-кода, то результат будем аналогичным:

Но заметьте, что при изменении размеров блока-контейнера изображение растягивается уже на новые размеры, без нарушения пропорций. При этом, если вы попробуете уменьшить размеры блока, картинка не вылезет за него, а все так же послушно будет вписываться в него по ширине. Вот таким образом мы делаем “резиновые” и, по сути, адаптивные картинки.

Итак, сегодня я показал вам, как управлять размером картинок в html и css. Используйте эти знания и изображения на ваших сайтах будут смотреться ровно и красиво.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

webformyself.com

Изображения в html

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

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

Но и частить ими не стоит, если вы не инстаграм или интернет-магазин. Желательно, чтобы изображения:

• были информативными
• соответствовали цветовой гамме вашего сайта
• были уместны

Если у вас нет подходящего фото, можно воспользоваться так называемым фотостоком (фотобанком) — местом, где хранится множество фотографий, иллюстраций и векторной графики. Таких ресурсов море, вы возможно даже слышали об одном из крупнейших — Shutterstock, но скачивания там платные.

Для тех, кто не любит переплачивать, в конце статьи мы приготовили бонус — список нескольких фотобанков, где можно скачать огромное количество качественных красивых материалов совершенно бесплатно 🙂

Форматы изображений

Во Всемирной паутине в основном используются 3 вида изображений:

gif (Graphics Interchange Format — формат для обмена изображениями)

это первый формат, который начал использоваться в интернете. Плюсы такого формата — наличие анимации и маленький размер, страница загружается быстро. К тому же он поддерживает прозрачность. Недостаток — используется только 256 цветов (собственно потому и размер маленький), т.е. его нельзя использовать для полноцветных изображений.

jpeg, он же jpg (Joint Photographic Experts Group — Объединенная группа экспертов по фотографии — так называется организация-разработчик)

подходит для создания полноцветных, высококачественных изображений, фотографий. Размер таких картинок велик, поэтому они обычно дают большую нагрузку на сервер. Если нужно сжать jpeg (для меньшего веса картинки) рекомендуем брать размер итогового изображения кратный восьми, так потери качества будут минимальными.

png (Portable Network Graphics — Портативная сетевая графика. Произносится так же как ping, т.е. [pɪŋ])

этот формат изначально разрабатывался для веба, т.е. изображение обычно мало «весит» и не тормозит страницу при загрузке. Этот формат создан на замену устаревшего gif, но в отличие от него, не поддерживает анимацию. Png-8, как и gif, использует всего 256 цветов. Формат png-24 поддерживает 16 млн цветов, правда и вес уже немаленький. Png-32 содержит столько же цветов, как и png-24, и плюс к этому позволяет получить изображение с прозрачным фоном, причем можно регулировать степень прозрачности. При уменьшении размеров png не происходит потери в качестве цвета.

Подытожим

gif — для анимации

jpeg — для фотографий

png — для иконок, кнопок, фонов, логотипов, скриншотов, чертежей, текстов, фотографий с прозрачным фоном

Вставка изображения в html-файл

Для добавления картинки на страницу используется тег <img> (от англ. image — изображение, картинка). Это одиночный тег, ему не нужен закрывающий. Внутри этого тега содержатся атрибуты.

Атрибут src (от англ. source — источник) указывает путь к файлу (место, где лежит изображение). Если картинка лежит у вас на компьютере (пока сайт только в процессе разработки) или на вашем сервере — используйте относительную ссылку. Если имидж из сети, тогда нужна абсолютная ссылка. Как это сделать читайте в статье «Ссылки».

При создании сайта с нуля советуем создать отдельную папку для хранения имиджей. Так вам будет проще управлять всеми файлами, когда ваш сайт разрастется.

Итак, чтобы подключить изображение к вашей веб-странице, нужно написать такой код:

<img src=»путь к файлу»>

Атрибут alt (от англ. alternative — альтернатива) указывает текст, который увидит пользователь, если изображение не загрузится. Неправильно указан путь, картинка удалена, плохой интернет — причин может быть много, и желательно, чтобы человек понял, что же кроется за этой ненавистной иконкой.

Поисковики обращают пристальное внимание на то, чтобы этот атрибут был заполнен. А html валидатор (ресурс для проверки кода на правильность) воспримет отсутствие атрибута alt как ошибку. Если же все атрибуты <alt> будут заполнены, да еще и содержать по возможности ключевые слова — видимость вашего сайта ощутимо повысится, т.е. его чаще будут показывать на поиске. Это из области SEO, а на данном этапе нам достаточно знать, что есть такой атрибут, и у «живого» сайта он должен быть заполнен. Пока сайт лежит у нас на диске — его вполне можно оставить пустым.

В примере ниже мы умышленно указали несуществующий путь для изображения, чтобы вы увидели, как работает атрибут alt

Высота и ширина изображений

Также можно установить высоту и ширину изображения, если оригинальная картинка напр. больше, чем вам нужна.

В HTML5 это рекомендуется делать с помощью CSS или атрибута style, вот так:

В данном примере мы взяли 30% от ширины, но не оригинального имиджа, а размера окна браузера. Когда ширина = 100%, то изображение открывается на всю ширину браузера. Запомните эту особенность процентов, как единицы измерения.

Кстати, если бы мы написали только ширину, результат был бы тот же, попробуйте:

<img src=»https://vertex-academy.com/tutorials/wp-content/uploads/2016/07/panda.jpg» alt=»панда на дереве»>

Также ширину и высоту можно задавать в пикселях. В случае с нашей пандой, у которой исходные размеры 1196 х 796 пикселей, чтобы при сжатии животное не пострадало, нам нужно сохранить пропорции, а здесь без калькулятора не обойдешься. Допустим, мы хотим уменьшить размер картинки в 3 раза, тогда нам нужно прописать размеры 399 х 265 пикселей.

Обратите внимание, если мы увеличиваем изображение пропорционально, то достаточно указать только один параметр, напр. ширину. Умный браузер сам вычислит полный размер картинки.

Попробуйте запустить такой код и посмотрите на результат:

<img src=»https://vertex-academy.com/tutorials/wp-content/uploads/2016/07/panda.jpg» alt=»панда на дереве»>

Всегда устанавливайте размеры изображения. Обычно картинки грузятся дольше, чем остальной html-код. Если браузер будет знать, сколько места резервировать на имиджи, он сможет продолжить загрузку сайта не дожидаясь, пока загрузятся изображения.

Немножко нафталина

Если вам доведется ковыряться в коде сайта, созданного на HTML-4 или еще более ранних, то вы заметите, что размеры изображений устанавливаются с помощью специальных атрибутов width и height. Это устаревший метод, хотя всё еще валидный в HTML5. Тем не менее советуем использовать style, т.к. на атрибуты width и height могут влиять внутренние или внешние стили, которые будут жить в браузере или вашем CSS-файле. Мы остановимся на этом детальней, когда будем рассматривать CSS, а пока просто посмотрите пример, как стили влияют на атрибуты высоты и ширины.

В этом окне 3 вкладки: на первой вы видите html-код, на 2-й код CSS, ну а на последней — как всегда результат. Это работает, как если бы первая вкладка была файлом index.html, вторая — файлом style.css, а третья браузером. Так вот, сейчас в нашем CSS написано, что все элементы с тегом img имеют ширину 100%. Размеры атрибутов width и height по умолчанию в пикселях, поэтому здесь не надо дописывать никаких единиц.

Разница в результате на лицо 🙂

Также в старых версиях html использовались такие атрибуты:

align, с помощью которого выравнивалось изображение по горизонтали или вертикали.

hspace — отступ слева и справа от изображения до окружающего контента (напр. текста или соседней картинки)

vspace — отступ сверху и снизу от картинки до контента вокруг.

border — задавал толщину рамки вокруг изображения (по умолчанию она равна нулю)

Сейчас все эти манипуляции (и гораздо больше) делаются с помощью CSS, поэтому мы решили здесь не забивать вам этим голову. Если все же интересно, как работать с этими атрибутами — пишите в комментариях, мы добавим этот пункт 🙂

Размещение картинки в коде

От того, где мы расположим наш тег <img> зависит то, как он будет отображаться в браузере.

Пример №1 — перед параграфом:

Такие элементы как <p> и <h2> относятся к блочным элементам. Они всегда начинаются с новой строки и занимают всю доступную ширину окна браузера. Если сначала разместить <img>, а после него блочный элемент, например параграф, то он будет перенесен на следующую строку.

Пример №2 — в начале параграфа

<img> это встроенный элемент, он помещается внутри блочного и не начинает новую строчку. В примере выше текст обтекает изображение, так как код <img> прописан внутри <p>

Подписи к иллюстрациям

Чтобы пометить или подписать фото на странице используется тег <figure> (от английского figure — рисунок). Этот тег указывает на то, что внутри него помещается контент типа иллюстраций, фотографий, диаграмм и т.п.

Тег <figcaption> (заголовок рисунка) позволяет добавить подпись к изображению. Вот как это работает:

Обратите внимание, что по умолчанию у браузера существуют некоторые настройки стиля для тега <figure>, в частности слева и справа есть отступы по 40 px. 

Итак, мы с вами научились

• добавлять изображение на страницу: с помощью тега <img>
• узнали обязательные атрибуты для этого тега: src для указания пути и alt для описания картинки
• поняли какой формат лучше для чего использовать: jpeg для фотографий, png для логотипов и скриншотов, gif для анимации
• как лучше задать картинке размеры: с помощью атрибута style с параметрами width и height
• разобрались как будет отображаться картинка в зависимости от места в коде: отдельно, если перед блочным элементом и с обтеканием, если внутри блочного элемента (например <p>)

А чтобы нам было с чем работать, нужно откуда-то взять эти изображения, при этом не нарушив ничьих авторских прав.

Значит, пришло время бонуса 🙂

Список бесплатных фотобанков 

Прежде, чем начнём, обратите внимание, что каждый скриншот здесь — это ссылка на сайт. Как делать изображения в виде ссылок, читайте в статье «Ссылки».

На pixabay вы найдете 680 тыс. бесплатных изображений на любую тематику, которые распространяются по лицензии Creative Commons CСО (CC Zero), т.е. их можно использовать, распространять, изменять в любых целях, даже коммерческих.

В фотобанке freeimages 390 тыс. бесплатных фото и картинок. Здесь сложнее найти крутой имидж, но тоже попадаются неплохие экземпляры. Порядком отвлекает реклама платных фотобанков. Мы поставили этот ресурс на второе место из-за количества изображений, но по дружелюбности он будет пожалуй на последнем в нашем рейтинге.

У фотостока morguefile более 250 тыс. бесплатных фотографий, в основном высокого качества. Можно скачивать даже без регистрации. Доступен только на английском.

На unsplash множество стильных фотографий под лицензией CC Zero. Можно качать без регистрации. Этот фотобанк тоже поймет вас только по английски.

Сайт designerspics создан Индийским веб-дизайнером, который понимает, как тяжело бывает найти качественное фото. Все фотографии сняты лично им, и с ними можно делать что угодно. Любит фотографировать еду, рабочий стол, компьютеры и всякие предметы. Поиск — только на английском.

vertex-academy.com

Изображения в HTML: тег img, атрибуты alt, width, height, picture, изучаем самостоятельно

Всех рад видеть в очередном 15 уроке посвященному изучению изображений в HTML. По большому счету, все сайты в интернете — это структурированный набор картинок, графики, текста, упорядоченный и стилизованный посредством CSS. Благодаря изображениям сайты выглядят более привлекательно, что улучшает внешний вид проекта.

Синтаксис изображений в HTML

Здесь все достаточно просто. Все изображения, картинки в HTML отображаются с помощью одинарного тега  <img>

Сам по себе он пустой и внутри него содержатся только атрибуты, определяющие картинку и путь до нее, который определен атрибутом src (source — источник картинки).

Атрибут картинки ALT у изображений

ALT — это альтернативный текст к нашим изображениям или проще говоря, мы описываем нашу графику с помощью текста, благодаря этому атрибуту. Напоминаю про его важность в SEO продвижении. Поскольку поиск документов также осуществляется по картинкам, ваше изображение должно быть подписано, чтобы ваш ресурс или статью с данным изображением нашли пользователи мировой паутины.

Также использование альтернативного текста с помощью атрибута alt необходимо, если у человека в браузере отключены картинки, или ошибочно задан путь к картинки (когда она оказалась «битой»), с целью экономии трафика или по каким-то другим причинам. Тогда вместо картинки, будет блок с альтернативным текстом.

<img src=»img_chania.jpg» alt=»Цветы в Ханье»>

Если браузер пользователя не сможет найти картинку, он возьмет ее описание и покажет:

<img src=»wrongname.gif» alt=»Цветы в Ханье»>

Примечание: использование атрибута alt крайне важно и обязательно. В конечном счете без него страница не будет корректно проверяться.

Кроме этого в изображениях html зачастую используются также и эти атрибуты width (ширина) и height (высота), которые задают размеры картинки в пикселях.

<img src=»img_girl.jpg» alt=»Девочка в жакете»>

Важно! Всегда указывайте размеры изображения, в противном случае картинка не отобразится в браузере в полном объеме и страница может мерцать при загрузке.

Использовать атрибуты width и height или все-таки стили CSS?

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

<!DOCTYPE html> <html> <head> <style> img { width:100%; } </style> </head> <body> <img src=»html5.gif» alt=»HTML5 Icon»> <img src=»html5.gif» alt=»HTML5 Icon»> </body> </html>

Немного поясню пример выше. В стилях, которые мы применили ко всем изображениям в документе мы задали размер изображения тегу img равное 100%, т.е наша картинка растягивается на всю ширину экрана. При этом, как вы успели заметить, размеры картинки были заданы атрибуты внутри нее в теле веб документа, а именно:  width=»128″

При этом браузер взял за основу правило, которое задавалось внутри парных тегов style:

<style> img { width:100%; } </style>

А вот уже следующая картинка не подверглась этим изменениям. А почему, спросите вы? А потому что по принципу приоритета внутри картинки в теле веб документа мы задали отдельный стиль:  style=»width:128px;height:128px;»  Таким образом, стили, которые заключены между парными тегами style на картинку «не подействуют», потому что внутри нее заданы свои стили. Думаю, что понятно объяснил.

Изображения, хранящиеся в других директориях/папках

Если путь не задан, то браузер будет искать наше изображение в той же папке, где находится наш веб документ. Однако принято хранить все картинки и медиафайлы в специальной папке с названием или images или img.

Чтобы браузер правильно и корректно отобразил вашу картинку до нее нужно указать правильный путь (т.е src).

<img src=»/images/html5.gif» alt=»HTML5 Иконка»>

Немного проясню. В примере выше наше изображение находится относительно папки с названием images.

Изображения на стороннем сервере

Некоторые веб-сайты, чтобы снизить нагрузку на хостинг, хранят изображения на стороннем сервере. Т.е по факту вы можете получить доступ к изображениям с любого адреса в мире.

<img src=»https://www.w3schools.com/images/w3schools_green.jpg» alt=»W3Schools.com»>

Анимированные изображения

Благодаря HTML вы можете добавлять анимированные картинки или gif анимацию.

<img src=»programming.gif» alt=»Компьютерный человек»>

Изображения в HTML как ссылка на документ

В предыдущем уроке мы рассказывали про текстовые ссылки и вскользь упомянули о том, что изображения можно также задавать ссылкой на любой другой веб документ. Для этого нашу картинку с тегом img нужно поместить внутри тега <a><img src=»url here» /></a>

<a href=»http://smarticle.ru»> <img src=»smiley.gif» alt=»Обучение созданию сайтов на WordPress»> </a>

Примечание: Для того, чтобы не появлялась граница (рамка) вокруг изображения, когда оно будет являться ссылкой, просто добавьте в стилях значение  border: 0;  для браузеров IE 9 (и ранние версии).

Обтекание изображения

Используя в CSS свойство float , можно добиться обтекание картинки текстом справа или слева:

<p><img src=»smiley.gif» alt=»Smiley face»> The image will float to the right of the text.</p> <p><img src=»smiley.gif» alt=»Smiley face»> The image will float to the left of the text.</p>

Свойство float может принимать значения right, left, none. Более подробно мы это разберем на последующих уроках, связанных с CSS.

Image Maps или карта изображения

Есть такой тег в html и называется он <map> . Его миссия в интернете, а конкретно для картинок — выделить нужную область изображения по координатам. Карта изображения — это некоторая выделенная интерактивная область. В примере ниже мы выделили область компьютера, чашки с кофе и телефоном:

<img src=»workplace.jpg» alt=»Workplace» usemap=»#workmap»> <map name=»workmap»> <area shape=»rect» coords=»34,44,270,350″ alt=»Computer» href=»computer.htm»> <area shape=»rect» coords=»290,172,333,250″ alt=»Phone» href=»phone.htm»> <area shape=»circle» coords=»337,300,44″ alt=»Coffee» href=»coffee.htm»> </map>

Можете создать отдельный пустой веб документ с расширение .html с помощью программы Блокнот рядом скопируйте данную картинку, скопируйте код и вы получите результат в браузере.

Атрибут name тега <map>  связан с атрибутом usemap <img>  и создает связь между изображением и картой. Внутри него содержится несколько тегов area , которые определяют области, на которые можно навести курсом мышки и покликать.

Очень часто данную технологию используют веб-разработчики для создания сайтов для застройщиков, где нужно выделить конкретную область (этаж или пролет) на рендере (картинке со зданием). В будущих уроках я об этом поговорю. Это будет очень интересно. Я расскажу про свое ноу-хау!

Фоновое изображение

При создании сайтов очень часто картинка может быть использована как фон (подложка). Чтобы сделать фоновое изображение вам необходимо прописать в стилях CSS следующее свойство под названием background-image :

<body> <h3>Фоновое изображение</h3> </body>

Его мы задаем для элемента body

Получим такой результат:

Немного поясню, наша картинка в заданном размере просто замостила всю площадь веб-страницы.

А теперь еще один пример: зададим фоновое изображение для тега p (параграф)

<body> <p> … </p> </body>

Вот, что получим:

Элемент <picture>

В HTML 5 добавился новый элемент с названием <picture>  для большей гибкости при указании ресурсов для изображений.

Элемент <picture>  содержит внутри себя несколько элементов <source> , каждый из которых ссылается на разные источники изображений. Таким образом, браузер может выбрать изображение, которое наилучшим образом соответствует текущему виду и / или устройству.

Каждый элемент <source> имеет атрибуты, описывающие, когда их изображение является наиболее подходящим.

Браузер будет использовать первый элемент <source>  с соответствующими значениями атрибутов и игнорировать следующие элементы <source> .

Пример ниже все наглядно показывает. В первом случае, если окно браузера имеет размеры минимум в 650px покажется одно изображение, а в другом случае если больше, чем 465 пикселей, то будет уже другая картинка.

<picture> <source media=»(min-width: 650px)» srcset=»img_pink_flowers.jpg»> <source media=»(min-width: 465px)» srcset=»img_white_flower.jpg»> <img src=»img_orange_flowers.jpg» alt=»Flowers»> </picture>

По умолчанию у нас отображается обычная картинка в теге img

А теперь начнем уменьшать наш размер экрана до планшетного состояния и получим первую картинку:

Затем продолжаем уменьшать размер экрана до мобильного формата и уже получаем другое изображение:

Примечание. Всегда указывайте элемент <img>  в качестве последнего дочернего элемента <picture> . Элемент <img>  используется браузерами, которые не поддерживают элемент <picture> , или если ни один из тегов <source>  не был сопоставлен.

Читатели HTML экрана

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

На этом все, что я хотел вам рассказать про изображения в html, я считаю, что донес в удобной форме. Вам остается только практиковаться в умении создавать простенькие странички, благодаря серии моих уроков. Совсем скоро встретимся с вами в новом выпуске. Следите за обновлениями блога! Удачного дня!

smarticle.ru