Сайт ─ это не просто текст, это фейерверк мультимедиа. И лучший способ добавить на сайт яркие краски ─ разместить изображения.
Тег img используется для размещения изображения в HTML-документе, и оно выглядит следующим образом:
<img src="http://www.htmldog.com/badge1.gif" width="120" height="90" alt="картинка про HTML">
Атрибут src сообщает браузеру, где найти изображение.
Как и тег a, он может быть абсолютным, как показано в приведённом выше примере, но обычно является относительным.
Например, если вы создадите своё собственное изображение и сохраните его как “alienpie.jpg” в каталоге с именем “images”, тогда код будет выглядеть:
<img src="images/alienpie.jpg"...
Атрибуты width и height необходимы. Если их исключить, браузер будет стремиться вычислять размер по мере загрузки изображения, а не при загрузке страницы. В результате макет документа может меняться во время загрузки страницы.
Атрибут alt ─ это альтернативное описание. Он обеспечивает значимую информацию для пользователей, которые не могут рассмотреть изображение, если у них проблемы со зрением.
Обратите внимание, что, как и тег br, тег img не содержит никакого содержимого, и закрывающий тег не требуется.
Чаще всего используются такие форматы файлов для изображений, как JPEG, GIF и PNG. Это сжатые форматы, и у них разное применение.
Формат JPEG использует математический алгоритм для сжатия изображения и слегка искажает оригинал. Чем ниже степень сжатия, тем больше размер файла, но тем чётче изображение.
Формат JPEG обычно используется для фотографий.
В GIF может быть не более 256 цветов, но он сохраняет цвета исходного изображения. Чем меньше цветов у вас на изображении, тем меньше будет размер файла. GIF-файлы также позволяют любому пикселю изображения быть прозрачным.
GIF-файлы обычно используются для однотонных изображений: иконок и логотипов.
Формат PNG воспроизводит цвета, очень похожие на GIF, но допускает использование 16 миллионов цветов, а также альфа-прозрачности (то есть область иллюстрации может быть прозрачной на 50%).
PNG обычно используются для создания универсальных изображений в сложных конструкциях, но они не полностью поддерживаются некоторыми старыми браузерами.
Очень важно, чтобы страницы сайта загружались как можно быстрее. Использование изображений со сверхвысоким разрешением снижает скорость загрузки страниц.
Сжатие изображений ─ отличный метод ускорения сайта. Большинство современных программ для обработки изображений позволяют сжимать изображения.
Страницы в тему:
Примеры CSS
