Как изменять размер изображения css

Содержание:

Интерполяция
Тег
- Форматы файлов для WEB:
Как вставить в html картинку
Как уменьшить размер HTML
Обтекание рисунка текстом в HTML
Иконка соцсети без текста
Фоновая картинка.
- background | background-image
Подготовим простой шаблон HTML-страницы для вставки в неё графики
Уменьшение размера с помощью плагинов сжатия изображений
Какой формат изображения лучше?
Выравнивание изображений
Выравнивание изображений
Размеры изображения и CSS
Как вставить картинку в HTML?
Увеличение изображения через ссылку
Как уменьшить размер изображения в Paint
Как вставить изображение в HTML?

Интерполяция

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

Похожее происходит и при уменьшении изображения, только браузеру уже приходится не добавлять, а выбрасывать часть пикселей.

Алгоритм интерполяции заложен в браузер и может быть изменён с помощью свойства image-rendering. К сожалению, браузеры пока слабо поддерживают это свойство, поэтому приходится указывать несколько разных значений. В примере 4 показано изменение алгоритма, чтобы переходы цветов не размывались, а оставались чёткими. В браузерах Chrome и Opera пример пока не работает, ожидается что поддержка свойства появится в новых версиях.

Пример 4. Изменение алгоритма интерполяции

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Изображения</title>
<style>
img { border: 1px solid #ccc; }
.edge {
image-rendering: -moz-crisp-edges; /* Firefox */
-ms-interpolation-mode: nearest-neighbor; /* IE */
image-rendering: crisp-edges; /* Стандартное свойство */
}
</style>
</head>
<body>
<img src=»image/russia.png» alt=»Флаг России» width=»200″>
<img src=»image/russia.png» alt=»Флаг России» width=»200″ class=»edge»>
</body>
</html>

Результат данного примера показан на рис. 3. Для левой картинки применяется алгоритм, заданный по умолчанию; для правой — метод интерполяции по ближайшим точкам.

Рис. 3. Вид картинок после увеличения масштаба

Тег

Как правильно изменить размер изображения в фотошопе

С точки зрения html добавить изображение на страницу можно с помощью тега <img>, который имеет 2 обязательных атрибута:

src — для указания пути к файлу изображения. Если путь указан неверно или изображение было удалено с сервера, то картинку вы не увидите.
alt — для указания альтернативного текста, который поясняет, что изображено на картинке. Этот атрибут нужен для индексации поисковиками (поиск по картинке) и для программ-скринридеров. Увидеть текст этого атрибута можно, когда путь к изображению в атрибуте src написан неверно.

Тег img

1	<img src=»images/nature.jpg»alt=»Природа»>

Форматы файлов для WEB:

JPEG (.jpg) — позволяет сохранять файлы фотографического качества с миллионами цветов, градиентными переходами в хорошем качестве при небольшом весе файла.

GIF (.gif) — индексированное изображение, в котором можно сохранить не более 256 цветов. GIF поддерживает прозрачность и анимацию. Плохо сохраняет градиенты, зато области сплошного цвета сохраняет хорошо.

PNG (.png) — делится на 2 формата: png-8 и png-24, где цифра указывает на количество бит, с помощью которого можно сохранить изображение. PNG-8 — этот тот же GIF по настройкам, но без возможности сохранять анимацию. А PNG-24, как и JPG позволяет описать изображение с миллионами цветов, но также сохраняет прозрачность. Соответственно, и размеры файлов в PNG-8 и PNG-24 будут отличаться: последний всегда будет больше весить. Но и качество у него будет лучше.

SVG (.svg) — от англ. Scalable Vector Graphics — масштабируемая векторная графика — позволяет сохранять файлы, созданные в Adobe Illustrator (векторной графической программе) в текстовом виде, похожем на XML. Файлы с таким форматом не изменяются при увеличении или уменьшении их размера, т.к. по сути своей являются масштабируемыми.

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

Какой оптимальный размер изображения для сайта

Для вставки картинки в html используется тег <img>. Синтаксис мы рассмотрели чуть выше. Давайте приведем практические примеры.

Пример 2.1. Использование тега <img>

Этот код преобразуется на странице в следующее:

В данном примере мы указали прямой адрес изображения из картинок на Яндекс Фото. Чаще всего указывается ссылки на картинки, которые лежат на том же URL. Например, src=»/img/kartinka.jpg», т.е. указывается относительный адрес.

Возможно размещение нескольких картинок подряд. Если они не будут умещаться на одной строке, то автоматически произойдет переход на следующую.

Пример 2.2. Вывод нескольких картинок в html друг за другом

Преобразуется на странице в следующее:

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой оно бы уже не уместилось.

Пример 2.3. Использование альтернативного текста (alt) в img

Рекомендуется прописывать альтернативный текст (атрибут alt) в теге <img>, чтобы застраховать себя от случая, что картинка не доступна. Ниже приведен пример с использованием альтернативного текста. В первом случае мы не задавали размеры картинки, а во втором задаем.

Преобразуется на странице в следующее:

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой строке оно бы уже не уместилось.

Теперь рассмотрим подробно все атрибуты тега <img>.

Как уменьшить размер HTML

Как изменить размер изображения без потери качества. программы paint и photoshop

Для уменьшения размера HTML-страницы нужно сжать код и облегчить элементы:

Избавиться от переадресации с целевой страницы. Google пишет о том, что перенаправления типа example.com → www.example.com → m.example.com или example.com → m.example.com/home для мобильных пользователей замедляют загрузку страницы.
Оформить HTML-элементы с помощью CSS, это ускорит загрузку и упростит работу с повторяющимися на страницах элементами.
Сжать все текстовые файлы HTML, XML, CSS, Javascript, сжать HTML-код страниц.
Использовать минификацию — удалить ненужные данные, которые увеличивают объем кода.
Сжать все графические файлы, оптимизировать изображения — фотографии и графику.
Использовать кэш браузера — кэшировать данные в браузере пользователя.
Оптимизировать нефункциональные анимационные детали, отказаться от flash — такие элементы вредят безопасности сайта и могут не поддерживаться у пользователей.
Оптимизировать количество рекламных блоков на странице.

Обтекание рисунка текстом в HTML

Если большие картинки обычно вставляются между абзацами, то маленькие чаще вставляются в текст, то есть текст обтекает картинку. Однако если в HTML не принять дополнительных мер, то картинка будет вставлена в текст просто как “буква”, и текст будет продолжаться после картинки одной строкой. Соответственно, если рисунок имеет размер более одной строки, то между строками получится большое пустое пространство, что не очень красиво:

Для выравнивания картинки в тексте в теге можно
применить атрибут . Выравнивание как раз и позволяет добиться обтекания картинки текстом.

Стандарты HTML определяют пять значений для атрибута :

— выравнивание по левому краю
— выравнивание по правому краю
— выравнивание по верхнему краю
— выравнивание по нижнему краю (это значение по умолчанию)
— выравнивание по середине

Если вы не используете атрибут , то выполняется выравнивание картинки по нижнему краю (как на рисунке выше).

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

Итак, если вы хотите, чтобы текст обтекал картинку справа, то значение
атрибута должно быть равно . Это немного странно, если думать о выравнивании текста. Но мы то выравниваем не текст, а картинку. Поэтому всё правильно — картинка будет слева, а текст — справа.

Пример выравнивания картинки по левому краю (обтекание текстом справа):

А вот так примерно это будет выглядеть в браузере:

Иконка соцсети без текста

Почти на любом сайте есть блок со ссылками на Facebook, «ВКонтакте», Instagram и другие соцсети:

Поскольку это иконки, а текста (контентной составляющей) мы рядом не видим, — нужно использовать CSS.

Здесь есть пара нюансов:

Раз текста нет, то у ссылки нет размеров. А фона без размеров не бывает (нельзя покрасить стену, когда самой стены нет).
Если мы зададим размеры ссылке, то они не сработают, так как по умолчанию ссылка — строчный элемент (его размер не изменить с помощью свойств width и height).

Обойдём эти ограничения.

Сперва напишем простую разметку — список ссылок. Классы сделаем по БЭМ, чтобы наш компонент было удобно стилизовать и использовать повторно.

Начнём, конечно, с HTML-кода:

Далее — CSS:

Заметьте, что свойству display для ссылок мы задали значение inline-block. Поэтому наши ссылки стали строчно-блочными элементами. Теперь можно задать им ширину и высоту — и это уже сработает.
Одинаковые для всех элементов стили (background-position, background-size, background-repeat) мы вынесли в общий класс social__link.
А вот фоновые изображения у нас разные — их мы задаём в разных классах.

Фоновая картинка.

background | background-image

Если вы хотите добавить фоновую картинку на веб-страницу, воспользуйтесь стилевым свойством background, который задается к селектору body. Задайте путь к изображению внутри значения url.

<style> body { background: url(путь к файлу); } </style>

или

<style> body { background-image: url(путь к файлу); } </style>

Как выбрать графический путь? Графический путь будет зависеть от того, где он располагается.
Например, если HTML-файл и фоновый рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif), если фоновый рисунок хранится в папке images, тогда путь будет вот таким url(images/bg.gif).

Пример


<html>
 <head>
 <title>Фон в CSS</title>
 <style>
 body {
 background: #000000 url(images/bg.gif); /* Цвет фона и путь к графическому файлу */
 }
 </style>
 </head>
 <body>
 <p>Ваш текст</p>
 </body>
</html>

или

<html>
 <head>
 <title>Фон в CSS</title>
 <style>
 body
{
background-image: url(images/bg.gif); /* Путь к графическому файлу */
background-color:#000000; /* Цвет фона */
}
 </style>
 </head>
 <body>
 <p>Ваш текст</p>
 </body>
</html>

Подготовим простой шаблон HTML-страницы для вставки в неё графики

Для наглядности сначала создадим каркас HTML-страницы с неким текстом , а затем вставим в неё картинку, после чего уже разберём все параметры и настройки, которые, в основном, используются и могут быть полезны:

Код 1. Базовый каркас HTML-страницы

Информацию далее рассмотрим в виде урока, чтобы поочерёдно раскрыть тему детальнее…

Перед началом выполните следующие подготовительные шаги:

Создайте, например, на рабочем столе, любую папку, в которой будем работать… Назовём её (скачать готовый результат со всеми исходниками можно ).
В подготовленной папке создайте файл (справка начинающим ), в который поместите предоставленный в блоке HTML-каркас — это будет наша очень простая web-страница, в текст которой будем вставлять картинки и производить с ними различные настройки.
Для наглядности, чтобы страница имела небольшой логотип, поместите в эту папку файл с названием (например, этот) (его подгрузка на страницу уже прописана в предоставленном коде).

Итого, мы имеем папку и в ней 2 файла:

Рис. 1. Рабочая папка с файлами

Уменьшение размера с помощью плагинов сжатия изображений

Все вышеперечисленные методы актуальны, когда изображений на сайте не много. Если же ресурс содержит огромную базу изображений, то не обойтись без плагинов сжатия изображений. Существует множество хороших плагинов для различных CMS, и платных, и бесплатных, они используют разные алгоритмы сжатия и выдают разные результаты. Главное, подобрать подходящий для вашего ресурса.

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

Можно совмещать между собой различные плагины, получая максимально эффективный результат.

Надеюсь, среди указанных способов вы найдете оптимальный для вас. Не забывайте об уменьшении изображений на сайте — используйте свой контент эффективно.

Какой формат изображения лучше?

Формат JPEG

Цифровые камеры и веб-страницы обычно используют JPEG файлы — его алгоритм очень хорошо сжимает данные и итоговый файл получается небольшой. Однако JPEG использует алгоритм сжатия с потерями, что может явится сильным недостатком.

Небольшой размер файла JPEG идет в ущерб качеству изображения. Степень сжатия можно устанавливать в настройках графических программ — ниже качество меньше файл изображения и наоборот чем выше качество тем большим размером получается файл.

JPEG почти единственный формат, который использует сжатие с потерями, позволяющий делать небольшие файлы более низкого качества. Есть режим сжатия без потерь — lossless JPEG.

Данный формат используется в случаях когда небольшой размер файла более важен, чем максимальное качество изображения ( , электронная почта, перенос на картах памяти и т.д.). Формат JPEG достаточно хорош для большинства случаев, главное не переусердствовать в сжатии.

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

Формат TIFF

Формат без потерь используемый для растровых изображений, считается самым лучшим форматом для коммерческой работы. Он применяется при сканировании, в полиграфии для качественной печати, распознавании текста, отправке факсов. Файлы в формате TIFF имеют значительно больший размер чем их аналоги в JPEG, и могут быть записаны без сжатия либо со сжатием без потерь.

Формат TIFF позволяет сохранять несколько слоев, что очень удобно при дальнейшем редактировании, и в отличии от JPEG может иметь разрядность 8 или 16 на канал. TIFF является наиболее универсальным, и как правило используется для хранения оригиналов изображений, которые в дальнейшем можно редактировать. Но имейте в виду что браузеры не отображают TIFF файлы.

Формат GIF

Данный формат разработала компания CompuServe в 1987 году для первых 8-битных видеокарт компьютера и предназначался для передачи по dial up (модемному) соединению. В свое время он был самым распространенным форматом в интернете. GIF использует компрессию без потерь LZW, и очень хорошо сжимает изображения, в которых много однородных заливок (баннеры, таблицы, логотипы, схемы).

Глубиной цвета данный формат нас не радует, всего 8 бит (256 цветов максимум) и использовать его для хранения фотографий не рекомендуется (фото имеют 24 битную глубину цвета).

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

Формат PNG

Был создан сравнительно недавно для замены устаревшего GIF (браузеры показывают оба формата), и в некоторой степени более сложного TIFF формата. PNG является растровым форматом с использованием сжатия без потерь, не поддерживает анимацию и может иметь 48 битную глубину цвета.

Одно из преимуществ данного формата — можно указать уровень прозрачности для каждой точки, что позволяет делать плавные переходы из четкого изображения в фон. Основным применением является использование в интернет и редактирование графики.

Типов файлов в зависимости от цели использования:

	Фотографические изображения	Графика, логотипы
Свойства	Фотографии 24-битный цвет и 8-бит ч/б	Графика с множеством сплошных цветов, с небольшим количеством цветов (до 256 цветов), с текстом или линиями
Лучшее качество	TIFF или PNG (со сжатием без потерь)	PNG или TIFF (со сжатием без потерь)
Наименьший размер файла	JPEG с высоким коэффициентом качества	TIFF или GIF или PNG (графика / логотипы без градиентов)
Cовместимость (PC, Mac, Unix)	TIFF или JPEG	TIFF или GIF
Худший выбор	GIF 256 цветов (очень ограничен цвет, и размер файла больше чем 24 -разрядного JPEG)	Сжатие JPEG добавляет артефакты, смазывается текст и края линий

В

сем привет. При публикации новой статьи, часто возникает вопрос, а какого формата использовать изображения в статье? В целях оптимизации изображения для достижения наилучшего результата, вы должны выбрать формат растрового изображения.
В этой статье мы кратко обсудим популярный GIF и формат JPEG, а затем проанализируем формат PNG, и развеем некоторые заблуждения по поводу использования тех или иных форматов.

Выравнивание изображений

По левому краю: необходимо использовать какой-то класс, в котором будет задано свойство float:left. Как правило, необходим еще отступ справа с помощью свойства :

Выравнивание изображения слева

.leftalign {
float: left;
margin-right: 15px;
}

1
2
3
4

.leftalign{

floatleft;

margin-right15px;

}

По правому краю: аналогично выравниванию слева стоит использовать другой класс, но с похожими свойствами:

Выравнивание изображения справа

.rightalign {
float: right;
margin-left: 15px;
}

1
2
3
4

.rightalign{

floatright;

margin-left15px;

}

По центру можно выравнять изображение двумя способами: превратив img в блочный элемент с margin: auto или поместить изображение в блочный элемент (div, p, header), для которого задать свойство text-align: center:

выравнивание изображения по центру

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<style>

.centeralign {

displayblock;

marginauto;

}

header {

text-aligncenter;

}
</style>

в новой вкладке
Просмотров:
474

Выравнивание изображений

В старых версиях HTML для выравнивания изображений у тега <IMG> имелся уже известный вам атрибут align, но в современном HTML его нет, поэтому будем использовать тоже уже знакомый вам, и, надеюсь, ставший родным style.

Вы уже сталкивались с выравниванием в уроке о Выравнивании содержимого тегов, но как вы знаете, его нельзя применять к встроенным тегам, таким, как <IMG>, да и никакого эффекта это не даст. Поэтому и значения атрибута style будут совершенно другие, предназначенные для выравнивания не содержимого, а HTML-элемента целиком:

style=»float:left» — прижимает изображение к левой стороне блока, в котором находится изображение, а весь текст обтекает его справа.

style=»float:right» — прижимает изображение к правой стороне блока, а текст обтекает его слева.

Пример выравнивания изображения по левому краю.

Результат в браузере

Первый параграф.

Текст перед картинкой. После картинки.

Последний параграф.

Как видите, первый параграф-блок выравнивание не затронуло, зато весь текст второго параграфа и третьего параграфа обтекли картинку справа.

Хорошо, а если нам не надо, чтобы нижестоящие блоки обтекали изображение? В этом случае вам поможет еще одно значение атрибута style, которое вы можете применить внутри любого блочного тега.

style=»clear:left» — прерывает обтекание изображений выровненных по левой стороне.

style=»clear:right» — прерывает обтекание изображений выровненных по правой стороне.

style=»clear:both» — прерывает обтекание изображений выровненных по обеим сторонам.

Пример прерывания обтекания изображения

Результат в браузере

Первый параграф.

Текст перед картинкой. После картинки.

Последний параграф.

Размеры изображения и CSS

В HTML5 приемлемы оба вышеприведенных способа задания размеров изображения.
Однако, вместо того чтобы использовать атрибуты width и height элемента <img>, как указано выше, целесообрзнее установить размер с помощью CSS. Это может дать вам дополнительную гибкость при отображениии картинки на странице.

Если изображение не помещается внутри области содержимого при просмотре на устройстве с небольшим экраном (например, мобильный телефон), пользователю приходится прокручивать страницу по горизонтали или уменьшать масштаб, чтобы увидеть картинку полностью, при этом, он испытывает большие неудобства.
В таких случаях предпочтительнее указать в атрибуте style значения max-width или max-height вместо абсолютных размеров.
В следующем примере мы используем max-width:100% для того, чтобы изображение не было слишком большим для своего контекста. При использовании только max-width (без использования max-height), браузер будет масштабировать изображение пропорционально. Другими словами, высота будет масштабируется вместе с шириной, а изображение не будет искажаться.

Обратите внимание, как будет отображаться изображение при изменении размеров окна браузера. Если у вас достаточно большой экран, изображение должно отображаться в разных измерениях

Как вставить картинку в HTML?

За вставку картинки в HTML отвечает тег img, который имеет свои атрибуты

PHP

1	<img src=»images/example.jpg»>

В атрибуте src мы указываем путь к изображению, причём путь может быть относительным или абсолютным.

Например, если у вас есть файл index.html, в который вы хотите вставить картинку, расположенное в папке images, находящейся в одной и той же папке с index.html, то относительный путь будет выглядеть так:

PHP

1	<img src=»images/example.jpg»>

А абсолютный так:

PHP

1	<img src=»http://site.ru/images/example.jpg»>

Атрибут alt используются для задания альтернативного текста

Именно на него обращают внимание поисковые системы чтобы понять что изображено на картинке и определить по какому запросу нужно высвечивать эту картинку в «Поиске по картинкам»

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

Например:

PHP

1	<img src=»http://site.ru/images/example.jpg»alt=»Вставка изображения»>

Обратите внимание, что альтернативный текст должен соответствовать тому что изображено у вас на картинке, в противном случае вы рискуете попасть под один из фильтров поисковых систем!

Однако это не значит, что на картинке с изображением дивана в атрибуте alt можно написать «диван» и ничего более. Это может быть текст, соответствующий какому-то ключевому запросу, по которым вы продвигаете свой сайт, например, «перетяжка мягкой мебели» или «купить диван в Москве» и так далее.

В WordPress этот атрибут можно добавит при вставке или редактировании картинки:

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

Если у вас ещё нет семантического ядра для сайта, то вам могут пригодиться эти статьи:

«Как сделать семантическое ядро для сайта?»
«Как сделать анализ семантического ядра онлайн?»
«Анализ семантического ядра сайта по частотности»

Атрибут title используется для задания заголовка картинки, которое высвечивается при наведении курсора на картинку:

Например:

PHP

1	<img src=»http://site.ru/images/example.jpg»alt=»Вставка изображения»title=»Пример вставки изображения»>

В WordPress этот атрибут задаётся в окне редактирования картинки

Данный атрибут, в отличии от alt, является не обязательным и играет меньшую роль в поисковом продвижении. Хотя для SEO оптимизации его присутствие будет не лишним.

Увеличение изображения через ссылку

Увеличение изображения через ссылку — самый простой способ без применения каких-либо CSS. Просто ставим ссылку на изображение с большим размером.

Пояснение к примеру:

rel=»nofollow» — для того, чтобы ссылка не передавала вес изображению ;
target=»_blank» — изображение откроется в новой вкладке.

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

Пример работы:

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

Как уменьшить размер изображения в Paint

Начну с Paint, потому что это программа входит в стандартный набор ОС Windows и не требует установки дополнительных графических редакторов.

1. Открываем картинку в Paint и на верхней панели кликаем «Изменить размер».

2. В открывшемся окне вводим необходимые размеры (можно изменять в процентах, можно в пикселях. По умолчанию в Paint стоит галочка «Сохранять пропорции», это позволит уменьшить изображение без искажений), жмем «ОК».

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

Теперь сравним исходное изображение и итоговое:

исходное изображение с размерами 2184*1456 пк и весом 735 Кб после уменьшения до 750*500 пк стало весить 142 Кб — вес уменьшился в 5 раз! При этом разница в качестве уменьшенного изображения и исходного, уменьшаемого скриптами (если таковые установлены на сайте) на глаз не заметна.

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

Для того чтобы вставить изображение на HTML-страницу, используется одиночный простой тег:

<img src=”xxx”>,

где xxx — адрес изображения. В том случае, если картинка находится в одной директории со страницей, тег будет выглядеть как:

<img src=”image.png”>

Однако скоростной и стабильный интернет добрался ещё не во все уголки земного шара, и бывает так, что изображение на веб-сайте попросту не загружается. Для таких случаев существует понятие альтернативного текста.

Он показывается на месте картинки в момент его недоступности, загрузки или в режиме работы браузера «без картинок». Добавляется он с помощью атрибута alt тега <img>.

Пример добавления альтернативного текста к графическому файлу:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Альтернативный текст</title>
</head>
<body>
<p><img src="images/example.png" alt="Альтернативный текст"></p>
</body>
</html>

Назначение размеров картинки в HTML

Для того чтобы изменить размеры отображения графического файла, используют теги height и width, где height — высота, а width — ширина, измеряемые в пикселях.

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

Рисунок помещается в прямоугольник с заданными размерами, а в том случае, если параметры меньше или больше исходных, картинка растягивается или сжимается.

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

Данные параметры можно указать как в пикселях (размер картинки постоянен и не зависит от разрешения экрана пользователя), так и в процентах (размер картинки зависит от разрешения экрана).

Например:

<img src=”example.png” width=”60” height=”40”>

или

<img src=”example.png” width=”50%” height=”10%”>

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

Для этого достаточно указать значение только одного из параметров (ширины или высоты), а значение второго браузер вычислит в автоматическом режиме.

Расположение картинки в HTML

Как и ко многим тегам HTML, к применим атрибут align, который выполняет выравнивание изображения:

<img src=”example.png” align=”top”> — картинка располагается выше текста;

<img src=”example.png” align=”bottom”> — картинка располагается ниже текста;

<img src=”example.png” align=”left”> — картинка располагается слева от текста;

<img src=”example.png” align=”right”> — картинка располагается справа от текста.

Картинка-ссылка

В HTML для создания ссылки используется тег <a>:

<a href=”адрес вашей ссылки”>Имя ссылки</a>

Для того чтобы задать графическую ссылку, необходимо всего лишь объединить тег изображения с тегом ссылки.

Делается это следующим образом:

<a href=”адрес ссылки”><img src=”адрес картинки”></a>

Как видите, графическая вставка может быть ссылкой и при клике переадресовывать на любой адрес, записанный в полном или сокращённом варианте.

Как можно сделать картинку фоном в HTML?

Изображение можно не только вставлять на страницу в качестве видимого объекта, но и сделать фоновым. Для определения картинки как фона необходимо в теге прописать атрибут background=”xxx”, где xxx — адрес картинки, указанный таким же способом, как в примерах выше.

Для примера зададим такую текстурную картинку в роли фоновой:

<html>
<head><title>Страница с фоновой картинкой</head></title>
<body background=”image.jpg”>
<h1> Фон с текстом. </h1>
</body>
</html>

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

Желаем удачи!