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


Изображение на сайте - один из ключевых элементов. Фактически, разместить изображение на странице сайта совсем не трудно. Для этого потребуется тег <img> с его атрибутами, которые задают параметры расположения изображения.

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

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

Можно выделить еще некоторые факторы. Например, в одних случаях нужно передать качество фотографии, чтобы видны были родимые пятнышки под мышками и тату размером с комара на пятке - в таком случае подойдет формат JPEG/ JPG (Joint Photographic Experts Group), который содержит до миллиона цветов и оптимизирован под сложные изображения. В этом формате, как вы поняли, лучше всего сохранять свои фотографии, фото кумиров, пейзажи, фото картин и т.д. Но время загрузки будет немного больше, правда качество иногда оправдывает терпение.

как установить изображение на сайт

Но чаще всего нужно поставить картинку, или много картинок на одну страницу. При этом нужно чтобы страница быстро загружалась, что требует малого объема изображений. Качество немного будет хуже, но основное направление темы или дизайна будет сохраняться. В таких случаях подходит формат GIF (Graphics Interchange Format). Как вы поняли, этот формат лучше всего подходит для графических изображений и рисунков, так как он содержит только 256 цветов и отлично сжимает простые изображения, а чем выше сжатие, значит меньше файл изображения, тем быстрее загрузится и страница будет намного "легче".

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

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


Простой способ установки изображения на страницу сайта.


Проще всего устанавливать изображения с использованием обычных параграфов. Естественно это тег <P>. Во первых, удачно показывается во всех браузерах. Очень легко позиционировать. Отступы можно задать в стилях самого параграфа, что бывает намного удобней, чем применять атрибуты height и width, которые не всегда корректно работают. Также можно располагать с применением таблиц. Довольно удобно, но мне больше нравиться первый вариант. И естественно, располагать изображения в блоках <div>. Этот метод очень универсален, но могут возникнуть некоторые трудности из за незнания свойств блоков <div>, что рекомендую подробно изучить. Конечно это не все способы, но в остальном правила диктуют требования и возможности.


Способ установки изображения в блок DIV.


Очень часто нужно на страницу вставить изображения разных размеров, при ограниченных размерах страницы, или вставить несколько картинок в ряд, используя свойства блоков DIV. Делается это очень просто. В стилях первого блока DIV добавляем свойство overflow:auto;, которое добавляет горизонтальную и вертикальную прокрутку, если места мало, а изображение большое. В среднем (по размеру и расположению) блоке заданы чуть большие размеры блока. В третьем варианте - размеры блока заданы автоматические, тогда изображение показывается в полный размер.


как вставить изображение в блок DIV
как обрезать изображение
как установить изображение

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


Описание тега <img>.


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


Синтаксис тега <img> в HTML.



Атрибуты тега <img> в HTML.


Атрибут align - имеет значения:


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

Атрибут src - обязательный параметр, который указывает путь к графическому файлу.

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

Атрибут border - задает рамку разной величины вокруг изображения. По умолчанию рамка отсутствует, если изображение не является ссылкой, в таком случае рамку можно убрать, присвоив тегу border="0" (значение ноль)

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

Атрибуы hspace и vspace - задают невидимые отступы вокруг изображений,
hspace="отступ по горизонтали",
vspace="отступ по вертикали",
любым целым положительным числом, что бывает очень полезно при вставке изображения в текст, или подписать фото и т.д.

по материалам сайта http://kapon.com.ua/

Поделитесь ссылкой на статью...


Всего комментариев - 2.    Можете оставить свой комментарий.

antoniox   2012-08-05 03:05:03   сайт автора - http://comp-on.ru/

всё верно

skovshar   2013-01-05 16:00:47   сайт автора - http://www.kipi-gold.net/

Очень полезно и доступно описано, спасибо ВАМ, буду благодарен, если оставите прямую ссылку на мой блог Kipi-там где исполняются мечты!


   Login *
   E-mail *
   URL (не обязательно)
- подписаться на сообщения        - я не спамер