Автор Тема: Вставка изображения на сайт  (Прочитано 617 раз)

Denisido

  • Гость
html код изображения

На web-странице изображение может быть в виде картинки, фотографии, логотипа, значка, пиктограммы и прочего визуального объекта. Дело в том, что в html-документе изображение представлено в виде встроенного элемента. Другими словами код изображения содержится в теле документа вместе с текстом. Чтобы вставить изображение на сайт пропишите в нужном месте тела документа одинарный тег <img>. В html-разметке он не является парным и не требует закрывающегося тега. В качестве атрибута впишите src="", в значении которого укажите путь к файлу изображения. Например так:

<img src="photo.jpg">
В html-разметке среди множества расширений используют три типа файлов: .jpg, .gif и .png. Перед тем как вставить изображение на страницу, его можно обработать в графическом редакторе. Один из самых популярных, бесспорно, является Adobe Photoshop, который содержит в себе много функций по обработке изображений, в том числе и для уменьшения размера и сохранения файла в формате web. Старайтесь оптимизировать изображение так, чтобы оно не превышало оптимального размера для html-документа в 60Кб. Большие изображения долго загружаются и пользователи вашим ресурсом могут в таком случае не дождаться загрузки и перейти к конкурентам. Кроме вышесказанного, есть пользователи, которые намеренно отключают изображения на web-странице либо для ускоренной загрузки, либо у них мобильный интернет с высокой оплатой за Мб или есть еще какие-нибудь причины так делать. Поэтому, хорошим тоном считается в теге изображения прописывать атрибут alt="", в котором указываете альтернативный текст с описанием изображения. Существует также атрибут title="", в значении которого указываете название картинки:

<img src="photo.jpg" alt="альтернативный текст" title="название картинки">
Размер изображения

Если изображение на веб-странице выглядит большим или наоборот слишком маленьким, то с помощью кода html можно манипулировать размерами. Для того, чтобы изменить ширину нужно вписать атрибут width="", для высоты - атрибут height="", в значении которых указываете размер в px(пиксилях) или в процентном соотношении:

<img src="photo.jpg" width="100" height="80">
Вы также можете использовать графический редактор, который даст полный контроль над изображением и позволит оптимизировать его для web-страницы. И не забывайте об авторском праве!