Размер изображений для сайта

Содержание:

Тег или как вставить изображение в HTML?
Формат GIF
- Особенности
- Область применения
Использование атрибутов
Как вставить в html картинку
- Пример 2.1. Использование тега <img>
- Пример 2.2. Вывод нескольких картинок в html друг за другом
- Пример 2.3. Использование альтернативного текста (alt) в img
Обтекание (выравнивание) картинки текстом.
- float
Как добавить две фоновые картинки на веб-страницу.
- background
Атрибуты и свойства тега
- Пример 3.1. Выравнивание изображения в html по правому краю
- Пример 3.2. Вывод картинки в html с рамкой (границей)
- Пример 3.3. Вывод картинки в html с цветной рамкой
Как уменьшить размер изображения в Photoshop
Обтекание рисунка текстом в HTML
Изображения в качестве фона.
- Повторяемость фонового изображения.
- Расположение фонового изображения.
- Фиксация фонового изображения.
Примечание
Способ 0: 100% width/height
Изменение картинки в графическом редакторе
Создание внешних отступов у изображений
Атрибуты hspace и vspace
Атрибуты тега
Как вставить изображение в HTML?
- Назначение размеров картинки в HTML
- Расположение картинки в HTML
- Картинка-ссылка
- Как можно сделать картинку фоном в HTML?
Где скачать изображения для сайта
- Оптимальный размер изображения для сайта. Заключение
Размеры изображения и CSS
Как задать размер изображения html?

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

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

У тега <IMG> есть два обязательных атрибута — это src, который указывает путь (URL) к изображению и alt, выводящий альтернативный текст, когда в браузере отключен показ изображений. Если src вы вряд ли забудете указать, ведь без него изображение просто-напросто не загрузится, то про alt очень часто забывают даже опытные вебмастеры. А все потому, что все браузеры спокойно воспринимают отсутствие alt, не считая это ошибкой. Ну что же, я постараюсь сделать так, чтобы вы не забыли о нем, даже разбуди вас ночью.

Атрибут src использует абсолютно такие же значения адресов, что и атрибут href тега <A>, которые мы рассматривали в уроке Ссылки и их разновидности, только ведут они к изображениям. Ну и, естественно, можно указывать как абсолютные, так и относительные адреса.

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

Результат в браузере

Такие вот разные птицы.

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

Формат GIF

Онлайн конвертер изображений

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

Особенности

Количество цветов в изображении может быть от 2 до 256, но это могут быть
любые цвета из 24-битной палитры.
Файл в формате GIF может содержать прозрачные участки. Если используется
отличный от белого цвета фон, он будет проглядывать сквозь
«дыры»
в изображении.
Поддерживает покадровую смену изображений, что делает формат популярным
для создания баннеров и простой анимации.
Использует свободный от потерь метод сжатия

Область применения

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

Использование атрибутов

Как сделать фон для сайта?

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

Пример 1. Размеры в пикселях

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Изображения</title>
</head>
<body>
<img src=»image/redcat.jpg» alt=»Размеры не заданы»>
<img src=»image/redcat.jpg» alt=»Задана ширина» width=»400″>
<img src=»image/redcat.jpg» alt=»Задана ширина и высота» width=»400″ height=»400″>
</body>
</html>

В примере использовалась одна и та же фотография, для первого <img> размеры явно не указаны, поэтому браузер добавил изображение в исходном виде. Для второй фотографии указана ширина 400 пикселей, что привело к уменьшению её размеров при сохранении пропорций. Третья фотография искажена, поскольку задана одинаковая ширина и высота, притом, что исходное изображение не квадратное (рис. 1).

Рис. 1. Размеры фотографии

Аналогичным образом задаются размеры в процентах от ширины родительского элемента, таким образом можно установить картинку на всю ширину окна браузера. В примере 2 показано добавление трёх фотографий в ряд, ширина которых привязана к ширине окна.

Пример 2. Размеры в процентах

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Изображения</title>
<style>
figure {
width: 27%; /* Ширина */
float: left; /* Выстраиваем элементы по горизонтали */
margin: 0 0 0 3.5%; /* Отступ слева */
background: #f0f0f0; /* Цвет фона */
border-radius: 5px; /* Радиус скругления */
padding: 2%; /* Поля */
}
figure:first-child {
margin-left: 0; /* Убираем отступ для первого элемента */
}
</style>
</head>
<body>
<figure>
<img src=»image/redcat.jpg» alt=»Рыжая кошка» width=»100%»>
</figure>
<figure>
<img src=»image/redcat.jpg» alt=»Рыжая кошка» width=»100%»>
</figure>
<figure>
<img src=»image/redcat.jpg» alt=»Рыжая кошка» width=»100%»>
</figure>
</body>
</html>

В данном примере все размеры заданы в процентах, так что приходится пользоваться математикой, чтобы суммарная ширина не получилась больше 100%. Ширину каждого элемента <figure> устанавливаем как 27%, к ней добавляется поле слева и справа по 2%, итого каждый элемент занимает 31%, а всего 31х3=93%. Оставшиеся 100-93=7% делим пополам, в итоге 7/2=3.5% — столько получается ширина промежутка между блоками. Для первого <figure> отступ слева нам не нужен, поэтому его убираем через свойство margin-left. Результат данного примера показан на рис. 2.

Рис. 2. Масштабирование фотографий

Как вставить в html картинку

Как легко экспортировать таблицы excel в виде изображений

Для вставки картинки в html используется тег <img>. Синтаксис мы рассмотрели чуть выше. Давайте приведем практические примеры.

Пример 2.1. Использование тега <img>

Этот код преобразуется на странице в следующее:

В данном примере мы указали прямой адрес изображения из картинок на Яндекс Фото. Чаще всего указывается ссылки на картинки, которые лежат на том же URL. Например, src=»/img/kartinka.jpg», т.е. указывается относительный адрес.

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

Пример 2.2. Вывод нескольких картинок в html друг за другом

Преобразуется на странице в следующее:

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой оно бы уже не уместилось.

Пример 2.3. Использование альтернативного текста (alt) в img

Рекомендуется прописывать альтернативный текст (атрибут alt) в теге <img>, чтобы застраховать себя от случая, что картинка не доступна. Ниже приведен пример с использованием альтернативного текста. В первом случае мы не задавали размеры картинки, а во втором задаем.

Преобразуется на странице в следующее:

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой строке оно бы уже не уместилось.

Теперь рассмотрим подробно все атрибуты тега <img>.

Обтекание (выравнивание) картинки текстом.

float

Как сделать в CSS так, чтобы на странице изображение обтекало текстом? Выравнивание картинки в CSS аналог HTML-выравнивания картинки <IMG align=”right” …>, вот только в CSS по какой стороне будет выравнивание элементов определяет float.

float: left | right | none;

Значение:

left — выровнять картинку по левому краю, текст обтекает его по правой стороне.

right — выровнять картинку по правому краю, текст обтекает по левой стороне.

none — выравнивание и обтекание не задается (значение по умолчанию).

Пример

<html>
 <head>
 <title>Обтекание</title>
 <style>
 .leftimg {
 float:left; /* Выравнивание по левому краю */
 margin: 5px 5px 5px 0; /* Отступы вокруг картинки */
 }
 .rightimg {
 float: right; /* Выравнивание по правому краю */
 margin: 5px 0 5px 5px; /* Отступы вокруг картинки */
 }
 </style>
 </head>
 <body>
 <h2>Основы CSS</h2>
 <p><img src="images/1.jpg" class="leftimg">
 Приветствую всех читателей и случайных посетителей моего блога.
 Сегодня я бы хотел вам рассказать о незаменимом инструменте веб-дизайнера - CSS.
 CSS (Cascading Style Sheets) – это каскадные таблицы стилей, которые хранят в
 себе правила для группы или одиночного элемента. CSS используют для изменения
внешнего вида дизайна сайта (цвет, размер текста, фон и др.).</p>
 <h2>Основы CSS</h2>
 <p><img src="images/2.jpg" class="rightimg">
 Давайте перейдем к основам CSS.CSS файл имеет расширение *.css.
 Часто веб-мастера присваивают CSS файлу имя style (style.css).
 CSS файл тесно связан с HTML. Другими словами, это можно объяснить
 так: CSS без HTML работать не будет.
 Предлагаю для общего понимания рассмотреть пример, как можно объединить
 HTML с CSS файлом.</p>
 </body>
</html>

Здесь я указал отступы текста от картинки

margin: 5px 0 5px 5px;

Результат:

Как добавить две фоновые картинки на веб-страницу.

background

Бываю такие моменты, когда нам необходимо создать два фона для сайта. Например, один фон повторяется по вертикали или по горизонтали, а второй фон выводится без повторения.
Добавим две фоновые картинки старым добрым способом. По крайне мере я знаю точно, все браузеры отображают этот метод.
Зададим фоновое изображение к элементам — HTML и BODY.

<style ENGINE="text/css">
HTML { background: url(картинка 1); /* Путь к графическому файлу с первым фоном */ }
BODY { background: url(картинка 2) no-repeat top center; /* Путь к графическому файлу со вторым фоном */ }
</style>

Пример:

<html>
<head>
<title>Фон в CSS</title>
<style>
HTML
{
background: url(картинка-1) no-repeat bottom; /* Путь к графическому файлу с первым фоном, запрет на повтор картинки, прижать к низу части экрана */
}
BODY
{
background: url(картинка-2) no-repeat top center; /* Путь к графическому файлу со вторым фоном, запрет на повтор картинки, прижать к верху по центру */
}
</style>
</head>
<body>
<p>Контент сайта</p>
</body>
</html>

Результат:

Атрибуты и свойства тега

1. Свойство align=»параметр» — определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:

left — выравнивание по левому краю
middle — выравнивание середины изображения по базовой линии текущей строки
bottom — выравнивание нижней границы изображения по окружающему тексту
top — верхняя граница изображения выравнивается по самому высокому элементу текущей строки
right — выравнивание по правому краю

Пример 3.1. Выравнивание изображения в html по правому краю

Преобразуется на странице в следующее:

2. Свойство alt=»текст» — подсказка/описание картинки. Выполняет сразу две важные функции:

Выдает подсказку при наведении
Если в браузере отключены изображения, то выводится этот текст

Этот атрибут также очень важен при ранжировании изображений в Яндекс Картинках и Google Картинках. Его следует прописывать к каждому изображению, поскольку это является одним из факторов в алгоритмах поисковых системах.

3. Свойство border=»ЧИСЛО» — задает толщину рамки обтекающей изображение. Измеряется в пикселях. Более подробно читайте в отдельной статье: свойство CSS border

Пример 3.2. Вывод картинки в html с рамкой (границей)

Преобразуется на странице в следующее:

4. Свойство bordercolor=»цвет» — задает цвет рамки, которая обтекает изображение. Имеет смысл, только если атрибут border больше 0.

Пример 3.3. Вывод картинки в html с цветной рамкой

Результат можно видеть чуть выше.

Примечание

Атрибуты border и bordercolor можно задать в стилях CSS к img:

5. Свойство height=»ЧИСЛО» — задает высоту изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 400х200, а мы укажем высоту 150 пикселей, то оно сжимается до 300х150 (на 25% меньше), т.е. пропорционально.

6. Свойство width=»ЧИСЛО» — задает ширину изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 1000х800, а ширина указывается 1200 пикселей, то оно автоматически расширяется на 20% до 1200х960.

7. Свойство hspace=»ЧИСЛО» — задает горизонтальный отступ изображения в пикселях от других объектов html.

8. Свойство vspace=»ЧИСЛО» — задает вертикальный отступ изображения в пикселях от других объектов html.

Примечание

Вместо hspace и vspace советую применять старый и проверенный margin (более подробно про него можете прочитать в уроке про описание стилей html). Кратко напомню:

margin-top: X px; (X — отступ сверху)
margin-bottom: Y px; (Y — отступ внизу)
margin-left: L px; (L — отступ слева)
margin-right: R px; (R — отступ справа)

Задают отступы от объектов в пикселях. Допускаются отрицательные значения. По умолчанию либо наследуется значение предка, либо имеет значение 0.

Например. Отступ слева составляет 50 пикселей, а сверху 10 пикселей.

Преобразуется на странице в следующее:

В данном примере — отступ сверху составил 10 пикселей, слева 50 пикселей.

9. Свойство class=»имя_класса» — можно присвоить класс изображению, чтобы задать стиль всем изображениям этого класса.

Как уменьшить размер изображения в Photoshop

1. Открываем файл в редакторе, в верхней панели выбираем вкладку Image (Изображение) – Image Size (Размер изображения).

2. В открывшемся окне можно менять параметры ширины (Width), высоты (Height) и разрешения (Resolution). Причем, для сохранения пропорций должен быть отмечен флажок Сохранять пропорции (Constrain Proportions), в этом случае при изменении одного из параметров, другие меняются автоматически. Для публикаций графики в вебе разрешение составляет 72пк/дюйм.

Вводим необходимые параметры и жмем «ОК».

3. Сохраняем изображение.Для сохранения изображения есть три варианта:

Сохранить (Save (Ctrl+S));
Сохранить как (Save As (Shift+Crtl+S));
Сохранить для веб ( Save for Web (Shift+Ctrl+Alt+S)).

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

При выборе Сохранения для Веб в открывшемся окне можно задать параметры:

Формат ( как говорили выше, jpeg);
Качество (Quality) – этот параметр изменяется от 0 до 100, соответственно при этом итоговое изображение будет лучшего или худшего качества. В окне слева от параметров на вкладках вы можете выбрать варианты отображения: Оригинал, Оптимизированное, 2 варианта (одновременно отображается сохраняемое и итоговое изображение), 4 Варианта (отображаются оригинальное изображение, изображение с параметрами, которое вы задали, и 2 промежуточных).Я обычно выбираю 2 Варианта (2-Up) — меняя качество можно одновременно видеть изменения в изображении и подобрать оптимальное для конкретного случая. Для статьи меня устроило качество 50, но это не постоянная величина, чаще я сохраняю изображения в пределах 60-75. Снизу под отображаемыми вариантами выводятся данные итогового изображения в зависимости от заданных настроек;
Отмечаем галочку Прогрессивный (Progressive). Итоговое изображение будет загружаться не построчно, а за несколько подходов. Вам наверняка приходилось сталкиваться с такими случаями, когда вы видите не половину загруженной картинки, а сначала — полностью — плохого качества, потом — все лучше и лучше. Но с самого начала загрузки пользователь имеет представление о том, что на изображении. Вес прогрессивного может быть на несколько килобайт больше оптимизированного, но эта разница незначительна. Практика показывает, что прогрессивный джипег позитивнее воспринимается пользователями.
Размеры. Если вы хотите изменить размеры изображения, они задаются в этом же окне снизу.

После выбора необходимых настроек жмем «Сохранить» (Save) и получаем оптимизированную для сайта картинку.

Анализируем результаты оптимизации изображения в Фотошопе:

исходное изображение все то же 2184*1456 пк, 735 Кб, после уменьшения до 750*500 пк: при обычном сохранении 159 Кб — вес больше, чем при уменьшении в Paint, Сохранение для Веб (при качестве 50) — 63,7 Кб. Сжатое изображение весит 11.5 раз меньше. Не забываем, что ко всем прочим плюсам джипег еще и прогрессивный.

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

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

Обтекание рисунка текстом в HTML

Если большие картинки обычно вставляются между абзацами, то маленькие чаще вставляются в текст, то есть текст обтекает картинку. Однако если в HTML не принять дополнительных мер, то картинка будет вставлена в текст просто как “буква”, и текст будет продолжаться после картинки одной строкой. Соответственно, если рисунок имеет размер более одной строки, то между строками получится большое пустое пространство, что не очень красиво:

Для выравнивания картинки в тексте в теге можно
применить атрибут . Выравнивание как раз и позволяет добиться обтекания картинки текстом.

Стандарты HTML определяют пять значений для атрибута :

— выравнивание по левому краю
— выравнивание по правому краю
— выравнивание по верхнему краю
— выравнивание по нижнему краю (это значение по умолчанию)
— выравнивание по середине

Если вы не используете атрибут , то выполняется выравнивание картинки по нижнему краю (как на рисунке выше).

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

Итак, если вы хотите, чтобы текст обтекал картинку справа, то значение
атрибута должно быть равно . Это немного странно, если думать о выравнивании текста. Но мы то выравниваем не текст, а картинку. Поэтому всё правильно — картинка будет слева, а текст — справа.

Пример выравнивания картинки по левому краю (обтекание текстом справа):

А вот так примерно это будет выглядеть в браузере:

Изображения в качестве фона.

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

html {background: #D2BFB0 url(images/img1.jpg);
}

Повторяемость фонового изображения.

По умолчанию фоновое изображение повторяется как по горизонтали так и по вертикали. Чтобы это отменить для свойства background пишем значение no-repeat.

html {background: #D2BFB0 url(images/img1.jpg) no-repeat;
}

Чтобы картинка повторялась только по горизонтали, пишем

background: repeat-x;

по вертикали:

background: repeat-y;

Расположение фонового изображения.

Картинка в левом верхнем углу: background: left top;

В правом верхнем углу: background: right top;

В левом нижнем углу: background: left bottom;

В правом нижнем углу: background: right bottom;

По центру: background: center;

По центру вверху: background: center top;

По центру внизу: background: center bottom;

Фиксация фонового изображения.

По умолчанию фоновое изображение прокручивается вместе с контентом.

Чтобы его зафиксировать, свойству background задаём значение fixed.

html {
background: #D2BFB0 url(images/img1.jpg) no-repeat center fixed;
}

Примечание

Все примеры, указанные выше, непосредственно касались всех элементов веб-страницы. Если вы помните урок «Синтаксис CSS», то знаете, что можно задать правило для некоторых картинок. Например, вы хотите сделать картинку с тенью только на странице контактов.

Для этого пропишите в HTML для первого тега «img» класс, например, «stepkiblog».

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Работа с картинками в CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="images/1.jpg" class="stepkiblog">
<p>Текст на сайте</p>
<img src="images/1.jpg">
</body>
</html>

В CSS:

.stepkiblog
{
box-shadow: -19px 0 22px -19px #000; /*тень картинки*/
}

Если прописать ID:

<img src="images/1.jpg" id="stepkiblog">

То в CSS это будет так:

#stepkiblog
{
box-shadow: -19px 0 22px -19px #000; /*тень картинки*/
}

Жду вас на следующих уроках!
Подписывайтесь!

Способ 0: 100% width/height

Первый способ заключается в использовании значения 100% для одного из параметров тега img – ширины или высоты. При этом второй параметр должен быть установлен в auto для сохранения пропорций изображения. Картинка растянется до размера контейнера по одному из измерений, а второе значение будет рассчитано автоматически. В результате по краям картинки могут образоваться поля, но она поместится в отведённой области целиком, без обрезки.

<html>
  <head>
    <style>
      .wrapper {
        width: 300px;
        height: 300px;
        border: 5px solid #515151;
      }
      .exmpl {
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .exmpl img {
        height: 100%;
        width: auto;
      }
    </style>
  </head>

  <body>
    <div class="wrapper exmpl">
      <img src="/images/braineater.png">
    </div>
  </body>
</html>

Так как при высоте 100% от высоты контейнера изображение вылезает за пределы этого контейнера по ширине, для обрезки лишнего используется свойство overflow со значением hidden. При этом, если мы хотим, чтобы в видимую область попала центральная часть изображения, его надо выровнять по центру контейнера. Проще всего это сделать задав контейнеру display: flex, и далее позиционировать изображение по вертикали и горизонтали с помощью свойств justify-content и align-items.

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

Чтобы избавиться от полей можно заменить свойства width и height на min-width и min-height (при этом ширина и высота по умолчанию примут значения auto). Тогда вне зависимости от ориентации изображения, оно заполнит область целиком.

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

<style>
  .wrapper {
    width: 300px;
    height: 300px;
    border: 5px solid #515151;
  }
  .exmpl {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .exmpl img {
    min-width: 100%;
    min-height: 100%;
    flex-shrink: 0;
  }
</style>

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

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

<style>
  .wrapper {
    width: 300px;
    height: 300px;
    border: 5px solid #515151;
  }
  .exmpl {
    overflow: hidden;
  }
  .exmpl img {
    width: auto;
    height: 200%;
    margin: -60px 0 0 -240px;
  }
</style>

Изменение картинки в графическом редакторе

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

Плюсы метода:

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

Минусы:

Графические редакторы некачественно сжимают картинки менее 200 пикселей по ширине и высоте.

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

Создание внешних отступов у изображений

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

Так вот, в старом HTML у тега были два атрибута, hspace и vspace, которые изменяли размер внешних полей (отступов) между изображением и окружающими элементами, но теперь их нет и неизвестно, сколько еще времени браузеры будут их поддерживать. Поэтому вновь применяем атрибут style, общий синтаксис такой:

style=»margin:размер» — Устанавливает одинаковый размер полей для всех сторон изображения.

style=»margin:сверху справа снизу слева» — Размеры полей для каждой стороны, пишутся через пробел по часовой стрелке.

В качестве значений можете указывать известные вам единицы измерения: пункты (pt), пиксели (px), проценты (%), чаще всего применяют пиксели. Кстати, если каким-то из значений у вас является ноль (0), то единицы измерения можно не ставить, а можно и ставить — в данном случае без разницы.

Пример изменения полей вокруг изображений

Результат в браузере

Текст перед картинкой. После картинки.

Атрибуты hspace и vspace

Итак, выравнивание рисунка в HTML теперь для вас сложности не представляет. Однако есть один неприятный вопрос — текст слишком близко прижат к картинке. Это не очень красиво смотрится.

Как же сделать отступы между текстом и картинкой? Для этого есть атрибуты
и , которые задают отступы от горизонтального (справа и слева) и вертикального (сверху и снизу) края картинки соответственно. Пример:

<img src="images-in-html.jpg" width="300" align="left" 
          hspace="50" vspace="10">

В этом примере мы задаём отступы слева и справа по 50 пикселей, а сверху и снизу — по 10 пикселей. А в браузере это будет выглядеть примерно так:

Атрибуты тега

В HTML5 используются такие атрибуты для изображений:

width — ширина картинки;
height — высота картинки

Оба атрибута предусматривают, что задать размеры изображения можно в px или %. Пиксели подразумеваются, когда атрибуты записываются так:

Ширина и высота изображения в px

1	<img src=»animals/dogs.jpg»alt=»Собаки»width=»150″height=»113″>

Стоит отметить, что, если вы задаете и ширину, и высоту изображения, вы не только сообщаете браузеру, сколько места он должен оставить под картинку, но и указываете ее пропорции. В идеале, атрибуты width и height должны совпадать с реальными размерами изображения, но так бывает не всегда. И если вы укажете один из размеров без соблюдения пропорций, браузер отобразит ее сплющенной или растянутой по одной из сторон.

Открыть пример в новой вкладке.

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

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

в новой вкладке

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

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

подгонка размера изображения по размеру контейнера

CSS

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

1
2
3
4

.img-responsive {

max-width100%;

heightauto;

}

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

Открыть пример в новой вкладке.

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

Еще один момент для особо внимательных — в последнем блоке отступ от картинки до нижнего края блока-контейнера меньше, чем в предыдущих блоках. Связано это с тем, что встроенный html-элемент в виде картинки является строчным (inline), и перевод строки после того, как вы нажали клавишу Enter добавляет к нему пробельный символ. Именно этот пробельный символ и создает дополнительные отступ после картинки. Для того чтобы избавится от этого отступа, необходимо задать для тега css-свойство .

Блочное изображение

.img-responsive {
…;
display: block;
}

1
2
3
4

.img-responsive{

…;

displayblock;

}

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

title — всплывающая подсказка, поясняющая смысл изображения. Часто используется в jQuery-плагинах для вывода подписи под изображением;
class — класс для выравнивания изображения или для визуальных эффектов (например, для анимации);
id — уникальный идентификатор, для того чтобы выделить изображение из массы других на странице или использовать его в коде JavaScript.

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

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

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

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

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

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

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

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

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

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

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

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

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

Например:

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

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

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

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

— картинка располагается выше текста;

— картинка располагается ниже текста;

— картинка располагается слева от текста;

— картинка располагается справа от текста.

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

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

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

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

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

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

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

Страница с фоновой картинкой

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

Где скачать изображения для сайта

На мой взгляд, на данный момент самым безопасным вариантом использования картинок – это сервис

Почему безопасным?

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

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

— для поиска разного рода иконок.

Оптимальный размер изображения для сайта. Заключение

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

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

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

В HTML5 приемлемы оба вышеприведенных способа задания размеров изображения.
Однако, вместо того чтобы использовать атрибуты width и height элемента <img>, как указано выше, целесообрзнее установить размер с помощью CSS. Это может дать вам дополнительную гибкость при отображениии картинки на странице.

Если изображение не помещается внутри области содержимого при просмотре на устройстве с небольшим экраном (например, мобильный телефон), пользователю приходится прокручивать страницу по горизонтали или уменьшать масштаб, чтобы увидеть картинку полностью, при этом, он испытывает большие неудобства.
В таких случаях предпочтительнее указать в атрибуте style значения max-width или max-height вместо абсолютных размеров.
В следующем примере мы используем max-width:100% для того, чтобы изображение не было слишком большим для своего контекста. При использовании только max-width (без использования max-height), браузер будет масштабировать изображение пропорционально. Другими словами, высота будет масштабируется вместе с шириной, а изображение не будет искажаться.

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

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

Для этого в HTML существуют специальные атрибуты для тега img

width – для задания ширины картинки
height – для задания высоты картинки

Размер картинки мы можем задавать как в пикселях так и в процентах.

Например:

PHP

1 2	<img src=»”http://site.ru/images/example.jpg»alt=»Вставка изображения»width=»500″height=»300″> <img src=»http://site.ru/images/example.jpg»alt=»Вставка изображения»width=»50%»>

Лично мне больше нравится задавать размер изображения в CSS так как там можно задавать ещё минимальную и максимальную ширину и высоту для изображений. Это особенно актуально если нужно несколько разных по размеру изображений выровнять по высоте или ширине.
Для этого можно использовать CSS свойства: