Как сделать изображения адаптивными с помощью CSS — Разработка на vc.ru

Большинство сегодняшних сайтов адаптивны. А если в нём нужно центрировать и выровнять изображение, необходимо научиться делать изображения плавными или адаптивными с помощью CSS.

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

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

Что мне следует использовать: относительные или абсолютные единицы?

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

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

Например, если вы определите фиксированную ширину 500 пикселей, ваше изображение не будет отзывчивым, потому что единица измерения абсолютная.

Вот почему вам следует вместо этого назначить относительную единицу, например 50%.

Стоит ли использовать медиа-запросы?

Как создать адаптивную сетку изображений

Узнать, как создать адаптивную сетку изображений.

Адаптивная сетка изображений

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

Редактор кода »

Создать адаптивную сетку изображений

Шаг 1) Добавить HTML:

Пример

<div>
  <div>
    <img src=»wedding.jpg»>
    <img src=»rocks.jpg»>
    <img src=»falls2.jpg»>
    <img src=»paris.jpg»>
    <img src=»nature.jpg»>
    <img src=»mist.jpg»>
    <img src=»paris.jpg»>
  </div>
  <div>
    <img src=»underwater. jpg»>
    <img src=»ocean.jpg»>
    <img src=»wedding.jpg»>
    <img src=»mountainskies.jpg»>
    <img src=»rocks.jpg»>
    <img src=»underwater.jpg»>
  </div>
  <div>
    <img src=»wedding.jpg»>
    <img src=»rocks.jpg»>
    <img src=»falls2.jpg»>
    <img src=»paris.jpg»>
    <img src=»nature.jpg»>
    <img src=»mist.jpg»>
    <img src=»paris.jpg»>
  </div>
  <div>
    <img src=»underwater.jpg»>
    <img src=»ocean.jpg»>
    <img src=»wedding.jpg»>
    <img src=»mountainskies.jpg»>
    <img src=»rocks.jpg»>
    <img src=»underwater.jpg»>
  </div>
</div>

Шаг 2) Добавить CSS:

С помощью CSS на основе создания адаптивной верстки:

Пример

/* Создайте четыре одинаковых столбца, которые находятся рядом друг с другом */
. column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Адаптивный макет — делает два столбца макет вместо четырех столбцов */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Адаптивный макет — делает два столбца стека друг на друга, а не рядом друг с другом */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

Совет: Зайдите на наш учебник Сетка изображений чтобы узнать, как создать интерактивную сетку, которая варьируется между столбцами.

Совет: Зайдите на наш учебник CSS Флексбокс, чтобы узнать больше о гибком модуле компоновки коробки.

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

Здравствуйте, дорогие друзья!

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

Навигация по статье:

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

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

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

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

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

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

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

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

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

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

Например:

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

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

Однако это не значит, что на картинке с изображением дивана в атрибуте

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

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

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

Например:

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

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

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

Как задать размер изображения html?

Для этого в HTML существуют специальные атрибуты для тега img

• width – для задания ширины картинки
• height – для задания высоты картинки

Размер картинки мы можем задавать как в пикселях так и в процентах.

Например:

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

Лично мне больше нравится задавать размер изображения в CSS так как там можно задавать ещё минимальную и максимальную ширину и высоту для изображений. Это особенно актуально если нужно несколько разных по размеру изображений выровнять по высоте или ширине.
Для этого можно использовать CSS свойства:

• max-width – максимальная ширина изображения
• min-width – минимальная ширина изображения
• max-height – максимальная высота
• min-height – минимальная высота

Например:

Img { max-width: 300px; }

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

img { height: 200px; width: auto; }

Как сделать картинки адаптивными?

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

1. 1.При помощи html с использованием атрибута width
   Например:
   

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

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

2. 2.При помощи CSS. Например:
   

   img { width: 100%; height: auto; }

   img { width: 100%; height: auto; }

Так же не стоит забывать о свойстве max-width, которое позволяет сделать так чтобы на больших экранах ваша картинка занимала не более 300 пикселей, к примеру. А на маленьких оно было на всю ширину.

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

img { width: 100%; max-width: 300px; height: auto; }

Так же перед тем как загружать картинку на сайт не забывайте его оптимизировать.

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

Спасибо что дочитали статью до конца! Если у вас есть какие то вопросы, относящиеся к размещению изображений на сайте – напишите их в комментариях!

Успехов вам и процветания!

С уважением Юлия Гусарь

Адаптивное фоновое изображение на CSS

В предыдущей статье про адаптивные изображения я обещал рассказать про адаптивное фоновое изображение. И так приступим. Для того, чтобы наше фоновое изображение хорошо смотрелось на всех типах устройств компьютерах, ноутбуках, планшетах ну и конечно на смартфонах мы будем использовать медиа запросы. Для начала создадим контейнер с именем id = «fon_img» к которому и будет, присваивается картинка.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
 Адаптивное фоновое изображение на CSS 	
</head>
<body>


         
 Адаптивное фоновое изображение на CSS 
 
        
Это изображение всегда будет иметь 100% ширину так как его контейнер не имеет значения максимальной ширины (max-width)
    	

</body>
</html>

Затем в стилях мы присваиваем к нашему контейнеру #fon_img наше фоновое изображение с заданной высотой, а так же выставим background-size: cover;, чтобы картинка растягивалась на всю ширину экрана.

CSS

Не забываем задавать префиксы для других браузеров -webkit-background-size: cover; -moz-background-size: cover;, -o-background-size: cover; , чтобы наше изображение корректно отображалось. После всего этого добавляем наши медиа запросы, с помощью которых мы будем изменять высоту фоновой картинки для разных устройств.

CSS

    @media(max-width:1016px){
        #fon_img{
             height:600px;
       }
    }
    @media(max-width:768px){
        #fon_img{
             height:400px;
       }
    }
    @media(max-width:480px){
        #fon_img{
             height:250px;
       }
    }	

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
 Адаптивное фоновое изображение на CSS 	
</head>
<body>

         
 Адаптивное фоновое изображение на CSS 
 
        
Это изображение всегда будет иметь 100% ширину, так как его контейнер не имеет значения максимальной ширины (max-width)
    	

</body>
</html>

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

Адаптивное выравнивание изображений на всю ширину браузера

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

1

Две картинки по горизонтали

<div>
	<a href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-2.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a>
	<a href="#"><img src="https://snipp. ru/img/city-4.jpg" alt=""></a>	
</div>

.photos {
	text-align: center;
	margin: 0 0 20px 0;
	overflow: hidden;    
}
.photos a {
	width: 50%;
	display: block;
	float: left;
	line-height: 0;
}
.photos img {
	width: 100%;
	height: auto;
}

2

Три картинки по горизонтали

<div>
	<a href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-2.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-4.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-5.jpg" alt=""></a>
	<a href="#"><img src="https://snipp. ru/img/city-6.jpg" alt=""></a>	
</div>

.photos {
	text-align: center;
	margin: 0 0 20px 0;
	overflow: hidden;    
}
.photos a {
	width: 33.3%;
	display: block;
	float: left;
	line-height: 0;
}
.photos img {
	width: 100%;
	height: auto;
}

3

Четыре картинки

<div>
	<a href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-2.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-4.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-5.jpg" alt=""></a>
	<a href="#"><img src="https://snipp. ru/img/city-6.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-7.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-8.jpg" alt=""></a>	
</div>

.photos {
	text-align: center;
	margin: 0 0 20px 0;
	overflow: hidden;    
}
.photos a {
	width: 25%;
	display: block;
	float: left;
	line-height: 0;
}
.photos img {
	width: 100%;
	height: auto;
}

4

Для мобильных

Добавим стили, которые выведут фото по вертикали на мобильных с шириной экрана до 800px.

@media screen and (max-width: 800px) {
	.photos a {
		width: 100%;
		float: none;
	}
}

конец первого раунда — CSS-LIVE

Брюс Лоусон, среда, 16 мая 2012

После Великого Апрельского Браузерно-Префиксного Тарарама пришла Великая Майская Адаптивно-Картиночная Шумиха 2012-го.

Адаптивные изображения — очередная неразгаданная загадка «отзывчивого» веб-дизайна. Вы отдаете большие картинки высокого разрешения, подходящие для экранов типа «ретины», которые устройства с меньшим разрешением показывают уменьшенными, зря расходуя трафик? Или вы отдаете картинки низкого разрешения, которые мерзко выглядят, будучи растянутыми на большом экране? Вебмастерам приходится рассчитывать на искусные хаки, чтобы отдавать различные контентные картинки (т.е. <img> в HTML, а не CSS-фоны) для разных типов устройств.

В ноябре 2011-го я был настолько разочарован тем, что никто из авторов спецификации даже не рассматривает проблему, что я предложил «для затравки» элемент <picture>, использовавший тот же механизм переключения исходных файлов, что <video> в HTML5:

<picture alt="злой пират">
   <source src=hires.png media="min-width:800px">
   <source src=midres. png media="min-width:480px">
   <source src=lores.png>
      <!-- запасной вариант для неподдерживающих браузеров -->
      <img src=midres.png alt="злой пират">
</picture>

Примерно в то же время другие независимо пришли к той же мысли, и им было предложено создать общественную группу W3C для обсуждения этого, что они и сделали. Однако, в январе редактор HTML5 Айэн Хиксон сказал:

В каких случаях это может быть нужно для картинок в <img>? Как правило, элемент <img> служит для картинок в контенте, где обычно не нужно ничего адаптировать.

Энтузиазм тех веб-разработчиков из Общественной группы адаптивных изображений W3C порядком сник оттого, что их игнорируют, поскольку самой проблемы никто в упор не видит. Но на этой неделе Эдвард О’Коннор из Эпла предложил другой метод, использующий новый атрибут srcset элемента <img>. Это дополнило его же февральское аналогичное предложение по поводу img-set в CSS, которое уже вошло в WebKit:

<img src="foo-lores. jpg"
     srcset="foo-hires.jpg 2x, foo-superpuperhires.jpg 6.5x"
     alt="годный Alt-текст для foo.">

Числа «2» и «6.5x» говорят браузеру об относительных разрешениях: у foo-hires.jpg разрешение в 2 раза больше, чем у foo-lores.jpg.

Спустя всего несколько дней вариант эпловского предложения был добавлен в спецификацию.

Между <picture> и srcset — два важных различия. Самое очевидное — то, что srcset использует элемент <img>, что замечательно, поскольку это самое логичное место для картинок, адаптивных и нет (с <img> не пройдет тот же фокус, что с <video> + <source>, потому что это — пустой элемент, у которого не может быть потомков; решение О’Коннора использует атрибуты, что хорошо).

Второе важное отличие в том, что оно не использует медиавыражений. С медиавыражениями вебмастеру приходится думать о любых изменениях размера области просмотра, ориентации, плотности пикселей, глубины цвета, соотношения сторон и т. п., решать, как угодить им (если придется), определять границы перехода и выражать всё это в коде. Это порядком напрягает мозги разработчика и выливается в «много букв» кода: страничка с 20 картинками, каждая с 5 медиавыражениями для 5 элементов <source>, быстро разрастается в объеме кода.

О’Коннор написал:

Почему указывать масштаб, а не медиавыражение? Ну, медиавыражения — это требования к состоянию браузера, тогда как мы утверждаем что-то об отношениях между ресурсами картинок. Кроме того, браузеры должны быть свободны в использовании того ресурса, который, на их взгляд, лучше всего подходит к текущей ситуации, учитывая не только «медиавыражаемые» вещи типа разрешения устройства, но и масштаб, заданный для <img> через CSS, его атрибуты width=”» и height=”», и даже вещи вроде текущего масштаба всей страницы.

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

Таким образом, когда мы все будем жить в космосе и смотреть 3D-голограммы, устройство на iDroid3000 сможет само определить близость черной дыры (черные дыры, как известно каждому школьнику, вызывают «тормоза» голограмм) и выбрать правильную картинку; нам не придется изобретать медиавыражений для близости черных дыр и задним числом дописывать их на сайты.

У решения с srcset есть две проблемы. Первая очень субъективна, но многие чувствуют то же самое: в том виде, как оно есть в текущем, первом черновике спецификации, синтаксис просто отвратителен!

<img src="face-600-200-at-1.jpeg" alt=""
	srcset="face-600-200-at-1.jpeg 600w 200h 1x,
	face-600-200-at-2.jpeg 600w 200h 2x,
	face-icon. png 200w 200h">

Конечно, это можно — и нужно — улучшить. Дело не только в эстетике. Если синтаксис странный, его будут использовать неправильно. Как написал доктор Реми, «Хотелось бы, чтобы вебмастерам пришлось учить другой микросинтаксис. Тут не та ситуация, что была с проблемами из-за браузерных префиксов.»

Вторая проблема в том, что разработчики не хотят лишиться контроля. Есть проблемы, связанные с художественным замыслом (см. раздел под заголовком «Нужна ли возможность манипулирования изображениями?», он же в нашем переводе), и многих не убеждает, что предложение Эпла решает их, хотя сторонники srcset как раз убеждены, что он учитывает все те случаи.

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

Как один из тех, кто предлагал <picture>, я тоже в какой-то степени это чувствую. Наверное, это эгоизм (на самом деле, я был бы рад, если бы это был элемент <ураБрюсу>, но я смирился с несправедливостью жизни). Но мне не так уж важно, какой синтаксис будет в спецификации, если он будет отвечать большинству практических случаев и будет удобен для разработчиков. Меня радует уже то, что проблема адаптивных изображений вообще обсуждается.

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

Оригинал статьи и автор

P.S. Это тоже может быть интересно:

Адаптивных изображений — Изучите веб-разработку

В этой статье мы узнаем о концепции адаптивных изображений — изображений, которые хорошо работают на устройствах с разными размерами экрана, разрешениями и другими подобными функциями, — и посмотрим, какие инструменты HTML предоставляет для их реализации. Это помогает повысить производительность на разных устройствах. Адаптивные изображения — лишь одна часть адаптивного дизайна, будущая тема CSS, которую вы должны изучить.

Почему адаптивные изображения?

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

Это хорошо работает на широкоэкранном устройстве, таком как ноутбук или настольный компьютер (вы можете увидеть пример вживую и найти исходный код на Github). Мы не будем подробно обсуждать CSS в этом уроке, за исключением того, что скажем:

• Для содержимого тела задана максимальная ширина 1200 пикселей — в окнах просмотра, превышающих эту ширину, тело остается на 1200 пикселей и центрируется в доступном пространстве.В окнах просмотра ниже этой ширины тело останется на 100% ширины окна просмотра.
• Изображение заголовка настроено так, что его центр всегда остается в центре заголовка, независимо от ширины заголовка. Если сайт просматривается на более узком экране, важная деталь в центре изображения (люди) все еще видна, а излишки теряются с обеих сторон. Его высота составляет 200 пикселей.
• Изображения содержимого настроены таким образом, что если элемент тела становится меньше изображения, изображения начинают сжиматься, так что они всегда остаются внутри тела, а не выходят за его пределы.

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

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

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

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

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

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

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

Примечание : Новые функции, обсуждаемые в этой статье — srcset / sizes / — все поддерживаются в выпускных версиях современных настольных и мобильных браузеров (включая браузер Microsoft Edge, но не Internet Explorer. )

Как создавать адаптивные изображения?

В этом разделе мы рассмотрим две проблемы, проиллюстрированные выше, и покажем, как их решить с помощью функций адаптивного изображения HTML.Обратите внимание, что мы сосредоточимся на HTML s для этого раздела, как видно в области содержимого приведенного выше примера — изображение в заголовке сайта предназначено только для украшения и поэтому реализовано с использованием фоновых изображений CSS. . Возможно, у CSS есть лучшие инструменты для адаптивного дизайна, чем у HTML, и мы поговорим о них в будущем модуле CSS.

Переключение разрешения: разные размеры

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

Однако мы можем использовать два новых атрибута — srcset и sizes — чтобы предоставить несколько дополнительных исходных изображений вместе с подсказками, которые помогут браузеру выбрать правильный. Вы можете увидеть пример этого в нашем примере responseive.html на Github (см. Также исходный код):

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

srcset определяет набор изображений, между которыми браузер может выбирать, и какой размер каждого изображения. Каждый набор информации об изображении отделяется от предыдущего запятой. Для каждого пишем:

1. Имя файла изображения ( elva-fairy-480w.jpg )
2. Помещение
3. Внутренняя ширина изображения в пикселях ( 480w ) — обратите внимание, что здесь используется блок w , а не пикселей , как вы могли ожидать. Это реальный размер изображения, который можно определить, просмотрев файл изображения на вашем компьютере (например, на Mac вы можете выбрать изображение в Finder и нажать Cmd + I , чтобы открыть информационный экран).

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

1. Состояние носителя ( (max-width: 600 пикселей) ) — вы узнаете больше об этом в теме CSS, но пока давайте просто скажем, что состояние носителя описывает возможное состояние, в котором экран может быть в. В этом случае мы говорим «когда ширина области просмотра составляет 600 пикселей или меньше».
2. Помещение
3. Ширина слота , ширина изображение будет заполнено, когда условия носителя верны ( 480 пикселей )

Примечание : Для ширины слота вы можете указать абсолютную длину ( пикселей, , em ) или длину относительно области просмотра ( vw ), но не проценты. Возможно, вы заметили, что ширина последнего слота не имеет условий носителя (это значение по умолчанию, которое выбирается, когда ни одно из условий носителя не истинно).Браузер игнорирует все, что находится после первого условия соответствия, поэтому будьте осторожны при упорядочивании условий мультимедиа.

Итак, с этими атрибутами браузер будет:

1. Посмотрите на его ширину устройства.
2. Определите, какое условие носителя в списке размеров является первым, которое выполняется.
3. Посмотрите на размер слота для этого медиа-запроса.
4. Загрузите изображение, указанное в списке srcset , которое имеет тот же размер, что и слот, или, если его нет, первое изображение, которое больше размера выбранного слота.

И все! На этом этапе, если поддерживающий браузер с шириной области просмотра 480 пикселей загружает страницу, условие мультимедиа (max-width: 600 пикселей) будет истинным, и поэтому браузер выберет слот 480 пикселей . elva-fairy-480w.jpg будет загружен, так как его собственная ширина ( 480w ) ближе всего к размеру слота. Изображение 800 пикселей занимает 128 КБ на диске, тогда как версия с разрешением 480 пикселей составляет всего 63 КБ — экономия 65 КБ. А теперь представьте, если бы на этой странице было много изображений.Использование этого метода может сэкономить мобильным пользователям большую пропускную способность.

Примечание : при тестировании этого с настольным браузером, если браузер не может загрузить более узкие изображения, когда вы установили его окно на самую узкую ширину, посмотрите, что такое окно просмотра (вы можете приблизить его, перейдя в консоль JavaScript браузера и набрав document. querySelector ('html'). clientWidth ). Различные браузеры имеют минимальные размеры, до которых они позволяют уменьшить ширину окна, и они могут быть шире, чем вы думаете.При тестировании с помощью мобильного браузера вы можете использовать такие инструменты, как Firefox about: debugging page, чтобы проверить страницу, загруженную на мобильный телефон, с помощью инструментов разработчика для настольных компьютеров.

Чтобы увидеть, какие изображения были загружены, вы можете использовать вкладку «Сетевой монитор» Firefox DevTools.

Старые браузеры, которые не поддерживают эти функции, просто игнорируют их. Вместо этого эти браузеры будут загружать изображение, указанное в атрибуте src , как обычно.

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

Переключение разрешения: одинаковый размер, разные разрешения

Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение на экране одного и того же реального размера, вы можете разрешить браузеру выбрать изображение с подходящим разрешением, используя srcset с x-дескрипторами и без размеров — несколько более простой синтаксис! Вы можете найти пример того, как это выглядит в srcset-resolutions.html (см. Также исходный код):

В этом примере к изображению применяется следующий CSS-код, чтобы его ширина на экране составляла 320 пикселей (также называемых CSS-пикселями):

 img {
  ширина: 320 пикселей;
} 

В этом случае размеры не нужны — браузер просто определяет, в каком разрешении отображается дисплей, и обслуживает наиболее подходящее изображение, указанное в srcset . Таким образом, если устройство, обращающееся к странице, имеет дисплей со стандартным / низким разрешением, с одним пикселем устройства, представляющим каждый пиксель CSS, будет загружено изображение elva-fairy-320w.jpg (подразумевается 1x, поэтому вам не нужно чтобы включить его.) Если устройство имеет высокое разрешение, два пикселя устройства на пиксель CSS или более, будет загружено изображение elva-fairy-640w.jpg . Размер изображения 640 пикселей составляет 93 КБ, а изображения 320 пикселей — всего 39 КБ.

Арт-направление

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

Возвращаясь к нашему исходному примеру not-responsive.html, у нас есть изображение, которое очень нуждается в художественном оформлении:

Давайте исправим это с помощью ! Подобно и , элемент представляет собой оболочку, содержащую несколько элементов , которые предоставляют браузеру различные источники на выбор, за которыми следует очень важный < img> элемент. Код в responseive.html выглядит так:

 <картинка>
  
 jpg">


 

• Элементы включают в себя атрибут media , который содержит условие мультимедиа — как и в первом примере srcset , эти условия являются тестами, которые решают, какое изображение будет показано — будет отображаться первое, которое возвращает true . В этом случае, если ширина области просмотра составляет 799 пикселей или меньше, будет отображаться изображение первого элемента .Если ширина области просмотра составляет 800 пикселей или больше, это будет второй.
• srcset Атрибуты содержат путь к изображению для отображения. Так же, как мы видели выше с , может принимать атрибут srcset с несколькими ссылками на изображения, а также атрибут sizes . Таким образом, вы можете предлагать несколько изображений с помощью элемента , но затем также предлагать несколько разрешений каждого из них. На самом деле, вы, вероятно, не захотите делать такие вещи очень часто.
• Во всех случаях необходимо предоставить элемент с src и alt , прямо перед , иначе изображения не появятся. Это обеспечивает случай по умолчанию, который будет применяться, когда ни одно из условий мультимедиа не вернет истинное значение (в этом примере вы фактически можете удалить второй элемент ), и резерв для браузеров, которые не поддерживают элемент.

Этот код позволяет нам отображать подходящее изображение как на широкоформатных, так и на узких экранах, как показано ниже:

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

Почему мы не можем сделать это с помощью CSS или JavaScript?

Когда браузер начинает загружать страницу, он начинает загружать (предварительно загружать) любые изображения до того, как основной синтаксический анализатор начал загружать и интерпретировать CSS и JavaScript страницы. Этот механизм в целом полезен для сокращения времени загрузки страницы, но бесполезен для адаптивных изображений — отсюда необходимость реализации таких решений, как srcset . Например, вы не могли загрузить элемент , затем определить ширину области просмотра с помощью JavaScript, а затем при желании динамически изменить исходное изображение на меньшее.К тому времени исходное изображение уже было бы загружено, и вы также загрузили бы маленькое изображение, что еще хуже с точки зрения адаптивного изображения.

Смело используйте современные форматы изображений

Существует несколько новых захватывающих форматов изображений (таких как WebP, AVIF и JPEG-2000), которые могут одновременно поддерживать малый размер файла и высокое качество. Тем не менее, поддержка браузером нестабильна.

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

 <картинка>
   svg ">
  
  

 

• Не используйте , а не , используйте атрибут media , если вам также не требуется художественное оформление.
• В элементе вы можете ссылаться только на изображения того типа, который объявлен в type .
• При необходимости используйте списки, разделенные запятыми, с srcset и размером .

Активное обучение: создание собственных адаптивных изображений

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

1. Напишите простой HTML-код, содержащий ваш код (используйте not-responseive.html в качестве отправной точки, если хотите).
2. Найдите красивое широкоэкранное пейзажное изображение с некоторыми деталями где-нибудь в нем. Создайте его веб-версию с помощью графического редактора, затем обрежьте его, чтобы показать меньшую часть, увеличивающую детализацию, и создайте второе изображение (шириной около 480 пикселей для этого достаточно).
3. Используйте элемент для реализации переключателя изображений художественного направления!
4. Создайте несколько файлов изображений разного размера, каждый из которых отображает одно и то же изображение.
5. Используйте srcset / size , чтобы создать пример переключателя разрешения, чтобы обслуживать изображение одного и того же размера при разных разрешениях или изображения разных размеров при разной ширине окна просмотра.

Проверьте свои навыки!

Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Вы можете найти подробную оценку, которая проверяет эти навыки, в конце модуля; см. заставку Mozilla.

Сводка

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

• Art direction : Проблема, при которой вы хотите использовать кадрированные изображения для различных макетов — например, пейзажное изображение, показывающее полную сцену для макета рабочего стола, и портретное изображение, показывающее основной объект, увеличенный для мобильного макета.Вы можете решить эту проблему с помощью элемента .
• Переключение разрешения : Проблема, при которой вы хотите обслуживать файлы изображений меньшего размера для устройств с узким экраном, поскольку им не нужны огромные изображения, как настольные дисплеи, а также, необязательно, что вы хотите обслуживать изображения с разным разрешением для высокой плотности / низкой плотность экрана. Вы можете решить эту проблему, используя векторную графику (изображения SVG) и srcset с атрибутами sizes .

На этом завершается и весь модуль «Мультимедиа и встраивание»! Единственное, что нужно сделать, прежде чем двигаться дальше, — это попробовать нашу мультимедийную оценку и посмотреть, как у вас дела. Радоваться, веселиться!

См. Также

Самый простой способ сделать изображения адаптивными с помощью CSS

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

Заметив популярность мобильных устройств и возможность писать отдельные приложения для различных устройств, Итан Маркотт впервые дал определение термину «Адаптивный веб-дизайн».Однако с недавним развертыванием нового мобильного алгоритма поисковым гигантом Google, RWD или адаптивное веб-проектирование больше не являются необязательными, это необходимость.

Также читайте: Создайте окно уведомлений типа Facebook, используя jQuery и CSS

Использование CSS «max-width» свойства

Наиболее часто используемым свойством CSS для создания адаптивного изображения является свойство max-width. Вы можете установить значение 100%. Вы можете сделать это встроенно, используя атрибут стиля на каждом изображении.

Разметка

& ltbody>
    & ltimg src = "sparrow.jpg"
       
        alt = "" />
& lt / body> 

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

Фактический размер этого изображения составляет 500 пикселей в ширину и 452 пикселей в высоту.В браузере настольного компьютера он покажет реальный размер изображения. Однако на меньшем устройстве он будет соответствующим образом отрегулирован.

Связано: Самый простой способ добавить прозрачный текст поверх изображения с помощью CSS

Применить свойство «max-width» к нескольким изображениям с помощью класса CSS

Обычно у нас есть несколько изображений на веб-странице или в нашем приложении. Мы либо добавляем изображения вручную, либо динамически с помощью Asp.Net или любой другой технологии.Совершенно очевидно, что вам нужно, чтобы все изображение было отзывчивым. Самый простой способ сделать это — создать класс CSS, который будет применять свойство max-width ко всем изображениям.

Разметка

& lt! DOCTYPE html>
& lthtml>
& lthead>
    & lttitle> Адаптивное изображение с использованием CSS & lt / title>
    & ltstyle>
        img.alldevices {
            маржа: 0 авто;
            высота: авто;
            максимальная ширина: 100%;
            граница: нет;
            дисплей: блок;
            отступ: 5 пикселей 0;
        }
    & lt / style>
& lt / head>
& ltbody>
    & ltp> Восстановите окно браузера и перетащите его в сторону, чтобы сделать его маленьким и большим.Он автоматически настроит изображения в соответствии с шириной и высотой окна браузера. & Lt / p>

    & ltdiv>
        & ltimg src = "../../ responseive / responseive-image.png" alt = "sparrow" />
        & ltimg src = "../../ jquery / demo / MOTORSPORT.jpg" alt = "car" />
    & lt / div>
& lt / body>
& lt / html> 

Вы можете проверить приведенный выше код здесь. (Просто скопируйте код, вставьте его в редактор и нажмите «Выполнить».)

Вот и все. Спасибо за чтение ☺.

Понравилась статья? Подпишитесь сейчас и получайте все последние статьи и советы прямо в свой почтовый ящик.

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

Итак, ваш веб-макет гибок и меняет макет в гибком или адаптивном веб-макете — но изображения не совсем работают, они упрямы и не масштабируются и не перемещаются, как текст!

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

  width =" 590 " /> 

Итак, здесь изображение выше на мобильном устройстве в портретной или альбомной ориентации не будет масштабироваться в области просмотра при правильной ширине; для Apple iPhone его область просмотра — 320 пикселей портрет или 480 пикселей пейзаж , поэтому изображения будут отображаться с фиксированным размером, а пользователь на мобильном устройстве, в приведенном выше примере изображения им придется прокручивать / проводить пальцем, чтобы увидеть все 590 пикселей width — но идея адаптивного макета заключается в том, чтобы масштабировать весь контент в видимом окне просмотра без необходимости прокручивать width мудро, это нормально для прокрутки (смахивания) в ориентации по глубине, поэтому высота на самом деле не имеет значения.

Так как исправить?

Вместо того, чтобы назначать абсолютное значение ширины через атрибут HTML в теге изображения, назначьте правило CSS max-width, которое нацелено на изображение как процентное значение относительной ширины, например:

 img {max-width: 100%} 

Это заставит изображение отображать 100% своего размера в пределах доступного пространства ширины родительского элемента.

Чтобы проиллюстрировать это, ниже приведены 2 изображения старой любимой девушки из припаркованного домена, одно с определенной шириной в пикселях (590 пикселей), а другое с относительной шириной в процентах (100%).

Фиксированная ширина 590 пикселей

Относительная ширина 100%

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

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

Таким образом, лучше всего оптимизировать изображение до максимального необходимого размера, затем установить селектор CSS, который нацелен на изображения и включает правило {max-width: 100%}, а также убедитесь, что атрибут ширины отсутствует в HTML.

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

У вас вполне может быть сайт, заваленный изображениями фиксированной ширины, вот несколько решений, чтобы исправить это.

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

адаптивных изображений на практике — A List Apart

Дьявол наказал все, что нам нравится в жизни.

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

Продолжение статьи ниже

Почему? Несмотря на то, что Интернет был разработан таким образом, чтобы к нему мог получить доступ любой человек, через что угодно, лишь недавно ландшафт устройств стал достаточно разнообразным, чтобы вызвать движение к адаптивному дизайну во всей отрасли. Когда мы разрабатываем адаптивный дизайн, наш контент элегантно и эффективно переносится на любое устройство. То есть весь наш контент, кроме растровых изображений.Растровые изображения имеют фиксированное разрешение. И их судно — почтенный img с его печально единственным src — не поддается адаптации.

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

Но! После трех лет дебатов появилось несколько новых элементов разметки для решения проблемы адаптивных изображений:

• srcset
• размеры
• рисунок
• и наш старый друг исходник (позаимствован из аудио и видео )

Эти новые элементы и атрибуты позволяют нам разметить несколько альтернативных источников и предоставить каждому клиенту тот источник, который ему больше всего подходит.Они вошли в официальные спецификации и их первая полная реализация — в Chrome 38 — была выпущена в сентябре. С элегантными откатами и полифилом для преодоления разрыва мы можем и должны реализовать адаптивные изображения , теперь . Итак, начнем!

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

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

В этом процессе мы воочию увидим резкий прирост производительности, который обеспечивают новые функции.

Думаю, я не против того, чтобы быть старым, как против того, чтобы быть толстым и старым.

Мы берем в качестве темы небольшую веб-страницу о безумных квилтах.Это простая, отзывчивая страница. На пути к его основному содержанию особо нечего мешать: гигантские изображения (лоскутных одеял!). Мы хотим показать как общий дизайн каждого одеяла, так и как можно больше замысловатых деталей. Итак, для каждого мы представляем два изображения:

1. все лоскутное одеяло по ширине абзаца
2. Деталь, заполняющая 100% ширины области просмотра

Как бы мы изменили размер и разметку наших изображений без новой разметки?

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

  * {
размер коробки: рамка-рамка;
}
body {
размер шрифта: 1.25em;
}
figure {
отступ: 0 1em;
максимальная ширина: 33em;
}
img {
дисплей: блок;
ширина: 100%;
}  

Мы можем вычислить максимально возможную ширину отображения img , взяв цифру max-width , вычтя его padding и преобразовав em в пиксели:

  100% ширина 
x (33em 
 максимальная ширина
   - 2em 
 отступ)
х 1.25em  размер шрифта
x 16px размер шрифта по умолчанию
= 620 пикселей  

Или мы можем обмануть, сделав окно действительно большим и заглянув в инструменты разработчика:

(я предпочитаю второй способ.)

В любом случае мы приходим к максимальной ширине дисплея full-quilt img 620 пикселей. Мы будем визуализировать наши исходные изображения в два раза больше, чтобы вместить 2x экрана: 1240 пикселей в ширину.

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

Когда мы рендерим наши изображения с такими размерами, наша страница статус-кво весит целых 3,5 МБ. Все, кроме 5,7 КБ, это изображения. Мы можем интуитивно догадаться, что многие из этих байтов изображения представляют собой невидимые накладные расходы при доставке на маленькие экраны с низким разрешением — но сколько? Давай приступим к работе.

Первый проход: масштабирование с размерами scrset и # section3

Teatherball с теннисным мячом для шнурков

Естественно адаптироваться к более чем двум граням

Первая проблема, которую мы решим: заставить наши изображения эффективно масштабироваться в зависимости от ширины окна просмотра и разрешения экрана.Мы предложим изображений с несколькими разрешениями и изображений, чтобы мы могли выборочно отправлять гигантские источники на гигантские экраны и / или экраны с высоким разрешением, а также меньшие версии для всех остальных. Как? С srcset .

Вот одно из наших подробных изображений во всю ширину окна просмотра:

quilt_2-detail.jpg имеет ширину 1920 пикселей.Давайте вместе с ним визуализируем две уменьшенные версии и разметим их так:

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

Для более способных клиентов мы добавили кое-что новое: атрибут srcset , который содержит список URL-адресов ресурсов, разделенных запятыми. После каждого URL-адреса мы включаем «дескриптор ширины», который определяет ширину каждого изображения в пикселях. Ваше изображение 1024 x 768? Вставьте 1024w после URL-адреса в srcset . srcset -знающие браузеры используют эту ширину в пикселях и все остальное, что они знают о текущей среде просмотра, чтобы выбрать источник для загрузки из набора.

Как они выбирают? Вот что мне больше всего нравится в srcset : мы не знаем! Мы не можем знать . Логика комплектации намеренно не указана.

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

srcset спасает нас от самих себя. Детальный контроль по-прежнему доступен, когда он нам нужен (подробнее об этом позже), но в большинстве случаев лучше передать ключи и позволить браузеру решать. Браузеры обладают обширными знаниями об экране человека, области просмотра, подключении и предпочтениях. Передавая контроль — описывая наши изображения, а не предписывая конкретные источники для бесчисленного множества пунктов назначения, — мы позволяем браузеру использовать эти знания. Мы получаем лучшую (ориентированную на будущее!) Функциональность за счет гораздо меньшего количества кода.

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

Как мне до сих пор удавалось скрывать от вас эту неудобную правду? Подробные изображения на нашей странице примера — особый случай. Они занимают всю ширину области просмотра — 100vw — что так уж получилось, что это значение по умолчанию sizes .Однако наши изображения в стиле квилт подходят по ширине абзаца и часто занимают значительно меньше места. Нам надлежит сообщить браузеру, какой именно ширины они будут: размеров .

размеров занимает длины CSS. Итак:

  sizes = "100px"  

… сообщает браузеру: это изображение будет отображаться с фиксированной шириной 100 пикселей . Легко!

Наш пример более сложный. В то время как quilt img s оформлен с использованием простого правила width: 100% , цифры, на которых они размещены, имеют максимальную ширину , равную 33em .

К счастью, размер позволяет нам делать две вещи:

1. Это позволяет нам указать несколько длин в списке, разделенном запятыми.
2. Это позволяет нам привязать условия носителя к длине.

Как это:

  sizes = "(min-width: 33em) 33em, 100vw"  

Это говорит: область просмотра шире, чем 33em ? Это изображение будет иметь ширину 33em . В противном случае это будет 100vw .

Это почти то, что нам нужно, но не совсем то.Относительный характер em делает наш пример сложным. Тело нашей страницы имеет размер шрифта из 1,25em , поэтому «1em» в контексте нашего CSS рисунка будет 1,25 x размер шрифта браузера по умолчанию. Но в условиях носителя (и, следовательно, в пределах размеров ) em всегда равно размеру шрифта по умолчанию. Некоторое умножение на 1,25 происходит по порядку: 1,25 x 33 = 41,25.

  sizes = "(min-width: 41.25em) 41.25em,
       100vw " 

Это очень хорошо передает ширину наших лоскутных одеял, и, честно говоря, вероятно, достаточно хорошо.На 100 процентов приемлемо для размеров предоставить браузеру приблизительную оценку ширины макета img ; Часто правильным выбором является обмен крошечной точности на большой выигрыш в удобочитаемости и удобстве обслуживания. Тем не менее, давайте продолжим и сделаем наш пример точным, добавив в него em отступов по обе стороны от рисунка: 2 стороны x 1,25 media-condition-ems каждая = 2,5 em отступа для учета.

Давайте посмотрим, что мы здесь сделали. Мы предоставили браузеру большие, средние и маленькие версии нашего изображения, используя srcset и указав их ширину в пикселях с помощью дескрипторов w . И мы указали браузеру, сколько пространства макета будут занимать изображения, с помощью размеров .

Если бы это был простой пример, мы могли бы дать браузеру одну длину CSS, например, sizes = "100px" или sizes = "50vw" . Но нам не так повезло. Нам пришлось дать браузеру две длины CSS и указать, что первая длина применяется только тогда, когда выполняется определенное условие мультимедиа.

К счастью, вся эта работа не прошла даром. Используя srcset и размеров , мы предоставили браузеру все необходимое для выбора источника.Узнав ширину в пикселях источников и ширину макета img , браузер вычисляет отношение ширины исходного изображения к ширине макета для каждого источника. Итак, скажем, размеров возвращает 620 пикселей. Источник 620w будет иметь 1x изображение img px. Источник 1240 Вт будет иметь 2x. 310 Вт ? 0,5x. Браузер вычисляет эти соотношения, а затем выбирает тот источник, который ему нравится.

Стоит отметить, что спецификация позволяет вам указывать коэффициенты напрямую, и что источникам без дескриптора назначается коэффициент по умолчанию 1x , что позволяет писать разметку следующим образом:

Это удобный и компактный способ создания изображений с высоким разрешением. Но! Он работает только для изображений фиксированной ширины. Все изображения на нашей странице сумасшедших лоскутных одеял плавные, поэтому это последнее, что мы слышим о дескрипторах x .

Теперь, когда мы переписали нашу страницу сумасшедших лоскутных одеял, используя размеры srcset и , что мы получили с точки зрения производительности?

Вес нашей страницы теперь (как это хорошо!) Зависит от условий просмотра.Он различается, поэтому мы не можем представить его одним числом. Я перезагрузил страницу в Chrome и рассчитал ее вес в диапазоне ширины области просмотра:

Плоская серая линия вверху представляет собой статус-кво 3,5 МБ. Толстая (1x экран) и тонкая (2x) зеленые линии представляют вес нашей обновленной страницы srcset ’d и size ’ d при ширине каждого окна просмотра от 320 пикселей до 1280 пикселей.

На экранах с 2-кратным увеличением и шириной 320 пикселей мы уменьшили вес нашей страницы на две трети - раньше страница была равна 3.5 МБ; теперь мы отправляем по сети только 1,1 МБ. На экранах размером 320 пикселей и 1x наша страница на меньше, чем на одну десятую от прежнего веса: 306 КБ.

Отсюда размеры байтов постепенно увеличиваются, поскольку мы загружаем более крупные источники для заполнения больших окон просмотра. На устройствах 2x мы делаем значительный скачок при ширине окна просмотра ~ 350 пикселей и возвращаемся к статусу-кво после 480 пикселей. На экранах 1x экономия огромна; мы сохраняем от 70 до 80 процентов веса исходной страницы, пока не достигнем значения 960 пикселей.В итоге мы получаем страницу, которая на ~ 40% меньше, чем была в начале.

Подобные сокращения - 40 процентов, 70 процентов, 90 процентов - должны остановить вас. Мы урезаем почти , два с половиной мегабайт из каждой загрузки iPhone Retina. Измерьте это в миллисекундах или умножьте на тысячи просмотров страниц, и вы поймете, о чем идет речь.

Второй проход: изображение и художественное оформление # section5

srcset , если вы ленивы, изображение , если вы сумасшедшие ™

  <картинка>

<источник
media = "(минимальная ширина: 36em)"
srcset = "quilt_2 / detail / large.jpg 1920 Вт,
quilt_2 / detail / medium.jpg 960 Вт,
quilt_2 / detail / small.jpg 480w "/>

<источник
srcset = "quilt_2 / square / large.jpg 822w,
quilt_2 / square / medium.jpg 640 Вт,
quilt_2 / square / small.jpg 320w "/>

  

  <картинка>


  

  <картинка>


  

  <картинка>

<источник
type = "изображение / webp"
media = "(минимальная ширина: 36em)"
srcset = "quilt_2 / detail / large.webp 1920w,
quilt_2 / деталь / medium.webp 960w,
quilt_2 / detail / small.webp 480w "/>
<источник
media = "(минимальная ширина: 36em)"
srcset = "quilt_2 / detail / large.jpg 1920 Вт,
quilt_2 / detail / medium.jpg 960 Вт,
quilt_2 / detail / small.jpg 480w "/>

<источник
type = "изображение / webp"
srcset = "quilt_2 / square / large.webp 822w,
quilt_2 / квадрат / medium.webp 640 Вт,
quilt_2 / square / small.webp 320w "/>
<источник
srcset = "quilt_2 / square / large.jpg 822w,
quilt_2 / square / medium.jpg 640 Вт,
quilt_2 / square / small.jpg 320w "/>

  

  
 
 
 
 
 1
2 
 цель ÷ контекст = результат
 
  

  
 
 
 
 
 1
2
3
4
5 
 

  <раздел>... 
  

 
  

  
 
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 
 .container {
  ширина: 538 пикселей;
}
раздел,
в сторону {
  маржа: 10 пикселей;
}
раздел {
  плыть налево;
  ширина: 340 пикселей;
}
в сторону {
  float: right;
  ширина: 158 пикселей;
}
 
  

  
 
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13 
 секция,
в сторону {
  маржа: 1.858736059%; / * 10px ÷ 538px = 0,018587361 * /
}
раздел {
  плыть налево;
  ширина: 63.197026%; / * 340 пикселей ÷ 538 пикселей =.63197026 * /
}
в сторону {
  float: right;
  ширина: 29,3680297%; / * 158 пикселей ÷ 538 пикселей = 0,293680297 * /
}