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

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

Если эта область будет не соответствовать реальному размеру картинки, которую вы хотите вставить, то рисунок будет соответственно растянут или сужен, до заданного в 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.