Как вставить картинку — html теги Img

Для вставки картинок на страницу служит html тег Img. Представленная ниже картинка вставлена с помощью следующего кода тега Img:

<Img src="http://ktonanovenkogo.ru/image/finik.jpg" Width="200" Height="150">

Атрибут Src html тега Img позволяет указать имя и место хранения файла изображения. Пути задаются с помощью символа '/', который служит разделителем между названиями папок, в которых хранятся файлы рисунков.
Абсолютный путь в html теге Img будет начинаться с http://vash_sait.ru. Дальше, используя '/' для разделения имен папок, прописывается полный путь до файла картинки, заканчиваясь в конце именем и расширением самого файла картинки.
Например, http://domeuropa.eu/images/1.ipg
Относительный путь в html теге Img задается с помощью определения относительного пути от исходной папки, в которой лежит файл самого HTML документа, из которой вы пытаетесь открыть изображение, до файла картинки. Если файл картинки находится на сервере в той же папке, что и HTML документ, из которого к нему обращаются, то путь к нему указывать не нужно — требуется указать только имя файла с картинкой (сохраняя регистр букв).
Если файл изображения находится на том же сервере, но в другом каталоге, требуется указать путь к файлу от каталога, где находится HTML документ, из которого к нему обращаются (в примере, показанном выше, используется как раз относительный путь до файла картинки — image/finik.jpg).

Html тег Img — задаем ширину и высоту изображения с помощью атрибутов Width и Height для ускорения загрузки сайта

Html атрибуты Width и Height позволяют задать размер области (ширину и высоту соответственно), которая будет отводиться на странице под данное изображение. Эти атрибуты вставляются внутри тега Img, например, так:

<Img src="http://ktonanovenkogo.ru/image/finik.jpg" Width="200" Height="150">

Если эта область будет не соответствовать реальному размеру картинки, которую вы хотите вставить, то рисунок будет соответственно растянут или сужен, до заданного в html теге Img размера. Тем не менее, не следует использовать это способ, скажем, для уменьшения размера вставляемого в Html документ рисунка. Ведь вес рисунка по-прежнему останется большой, а это будет замедлять загрузку страницы с этим рисунком.
Лучше предварительно изменить размер картинки в графическом редакторе, а уже затем вставлять картинки в Html документ через любой удобный вам Html редактор. Также, при сохранении рисунка в графическом редакторе следует обращать внимание на итоговый вес рисунка. Он не должен быть слишком большой. Иногда лучше немного пожертвовать качеством изображения (благо, что при небольших размерах картинки это будет практически не заметно в Html документе) для уменьшения итогового веса графического файла.
Используйте при сохранении рисунков компактные форматы типа GIF (для вставки схематических картинок) или JPG (для вставки фотографий). Html атрибуты Width и Height, в отличии от атрибута Srс (единственный обязательный атрибут тега Img), являются необязательными. Многие их просто не указывают, но они, тем не менее, позволяют незначительно ускорить загрузку документа с изображениями.

Дело в том, что если браузер не находит атрибуты Width и Height внутри html тега Img, то ему потребуется время на то, чтобы узнать размер картинки, загрузить само изображение и только после этого продолжить загружать Html документ.
В случае же когда вы прописали атрибуты Height и Width для тега Img, браузер автоматически резервирует место под картинку указанных в этих атрибутах размеров и продолжает загружать веб-страницу дальше.
Если изображения, выводимые на данную страницу очень тяжелые и их очень много, то вставка в html тег Img всех этих картинок атрибутов Height и Width позволит пользователям приступить к чтению текста сайта, в то время как изображения еще будут загружаться.
Также, если вы не укажете атрибуты Width и Height внутри html тега Img, то может возникнуть ситуация, когда при маленькой картинке и очень длинном альтернативном тексте (задается атрибутом Alt в теге Img, об этом речь пойдет ниже), до того как загрузится изображение, временно произойдет сдвиг дизайна сайта, т.к. длинный альтернативный текст из атрибута Alt будет занимать столько места, сколько ему понадобится.
В случае же использования атрибутов Width и Height внутри html тега Img, место для выведение альтернативного текста будет ограничено размерами, заданными в атрибутах размера изображения Width и Height. По большей части, именно из-за этого я стараюсь прописывать атрибуты Width и Height в теге Img.