Как в HTML уменьшить картинку и сделать ее адаптивной

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

Знакомство с тегом img

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

  • src - для указания источника;
  • alt - для описания.

В качестве источника можно указывать URL-путь к картинке или ее веб-адрес. А также вы можете вставлять фотографии, которые находятся на локальном компьютере. В таком случае указывается полный или относительный путь. Например, изображение находится в папке img в каталоге working_directory на диске D. А документ с разметкой index.html в папке site в том же каталоге working_directory.

Полный будет выглядеть так:

<img src="D:/working_directory/img/file_name.jpg alt="прелесная фотография Атласских гор">

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

<img src="../img/file_name.jpg alt="три милых котенка">
<!-- Символ ".." означает выйти из дирректории с шагом назад-->

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

У каждого изображения есть размер. Обычно он измеряется в пикселях. Если вы возьмете файл с высотой 1200 пикселей, шириной 3000, вставите его в разметку и откроете в браузере, то в лучшем случае увидите половину фотографии. А если это сделать на планшете в 500px, то видна будет только одна пятая часть. Все потому что браузер загружает полный размер файла. Но с этой задачей легко справиться, если знать как. В HTML уменьшить картину поможет всего одно слово - width:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
</head>
<body>
	<img src="относительный/путь/к/файлу.jpg" alt="любое красочное описание" >
</body>
</html>

Width — это необязательный, но полезный атрибут. Через width вы указываете браузеру какой шириной должна быть отображена фотография. По умолчанию единицей измерения является пиксель. Поэтому нет необходимости полностью записывать width="250px" для того, чтобы уменьшить картинку. В HTML, как и в графических программах для указания размеров, используются проценты, а также rem или em. С помощью атрибута height задается высота. Если он отсутствует в описании, браузер ставит значение: height="auto", что очень удобно.

Адаптация картинок

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

На помощь снова придет атрибут width, только теперь значение вы задаете ему исключительно в процентах:

<img src="относительный/путь/к/файлу.jpg" alt="любое красочное описание" width="100%">

Браузер поймет эту запись как указание отобразить фото на всю ширину экрана. После этого вы указываете в метатеге следующую конструкцию:

<!--Волшебный мета-тег!!!!!--------------------------->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	

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

Блок-контейнер для изображений

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

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
</head>
<body>
	<div class="img-wrapper">
		<img src="относительный/путь/к/файлу.jpg" alt="любое красочное описание" width="100%">
	</div>
</body>
</html>

Теперь, чтобы уменьшить картинку на сайте в html, как и увеличить ее, вам нужно только указать ширину в 100%. Размер изображения теперь полностью зависит от блока контейнера, которым вы будете управлять в CSS-документе. Например, добавить эффект увеличения фото при наведении курсора:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		.img-wrapper{
			display: block;
			width: 80%;
			max-height: 50vh;
			margin: 0 auto;
			padding: 0;
			box-sizing: border-box;
			overflow: hidden;
		}
		img{
			transition: all .5s ease;
		}
		img:hover{
			transform: scale(2);
			opacity: .7;
		}
	</style>
</head>
<body>
	<div class="img-wrapper">
		<img src="относительный/путь/к/файлу.jpg" alt="любое красочное описание" width="100%">
	</div>
</body>
</html>

Картинка увеличивается в два раза, но не выходит за пределы блока-контейнера. Теперь вы полностью готовы к работе с изображениями. Главное - используйте их в меру. Картинки существенно влияют на скорость загрузки. Заменяйте их по возможности фоновыми градиентами или CSS-анимацией.

Комментарии