Сколько нужно верстальщиков,
чтобы вставить <picture>?

<img>

1. Предложили в 1993 году
2. Встроен в браузеры
3. Не блокирует загрузку
4. Доступен через alt

<img>

1. Не умеет работать с ретиной
2. Не умеет адаптироваться
3. Не умеет кадрироваться
4. Не знает про новые форматы

(не)знаю

	Разработчик	Браузер	Нужно
Ширина вьюпорта
Картинка к вьюпорту
Ретиновость экрана
Размеры картинок

<picture>

1. Предложили в 1997 году (не о том, правда)
2. Переосмыслили в 2011 году (по примеру <video>)
3. Долго думали, что же делать в рамках RICG
4. Определились со спецификацией в 2014 году
5. Собрали денег и внедрили в 2014 году

1. Ретина
2. Адаптация
3. Формат
4. Кадрирование

1. Ретина

			<img
			       src="400.png"
			     width="400"
			    srcset="600.png 1.5x,
			             800.png 2x,
			             1200.png 3x"
			    >
		

2. Адаптация

			
				img {
				    width:100%;
				    max-width:100%;
				    }
			
			
				@media (min-width:600px) {
				    img { width:50% }
				    }
			
		

2. Адаптация

			<img
			       src="400.png"
			    srcset="400.png 400w,
			             800.png 800w,
			             1200.png 1200w"
			     sizes="(min-width:600px) 50vw, 100vw"
			     >
		

Брейкпоинт 400px

Меньше 600 пикселей.

1. Весь экран: 400px → 400.png
2. Весь экран 2x: 800px → 800.png
3. Весь экран 3x: 1200px → 1200.png

Брейкпоинт 600px

Равен 600 пикселям.

1. Полэкрана: 300px → 400.png
2. Полэкрана 2x: 600px → 800.png
3. Полэкрана 3x: 1200px → 1200.png

Брейкпоинт 800px

Больше 600 пикселей.

1. Полэкрана: 400px → 400.png
2. Полэкрана 2x: 800px → 800.png
3. Полэкрана 3x: 1200px → 1200.png

Офтоп

			<img src="webp.webp"
			     onerror="src='webp--no.png';
			               alt='Единорогу плохо';
			               this.onerror=null"
			     alt="Нян Кэт">
		

Спасибо Матиасу Байненсу за трюк.

3. Формат

			<picture>
			
				    <source type="image/webp"
				          srcset="picture.webp">
			
			
				    <source type="image/vnd.ms-photo"
				          srcset="picture.jpxr">
			
			    <img src="picture.jpg">
			</picture>
		

4. Кадрирование

			<picture>
			
				    <source media="(min-width:1024px)"
				           srcset="crowd.png">
			
			
				    <source media="(min-width:640px)"
				           srcset="group.png">
			
			    <img src="face.png">
			</picture>
		

РАКФ

<picture>
    <source
        media="(min-width:1280px)"
        sizes="50vw"
       srcset="400.webp 400w,
                800.webp 800w,
                1200.webp 1200w"
         type="image/webp">
    <source
        sizes="(min-width:640px) 60vw, 100vw"
       srcset="400.webp 400w,
                800.webp 800w,
                1200.webp 1200w"
         type="image/webp">
    <source
        media="(min-width:1280px)"
        sizes="50vw"
       srcset="400.png 400w,
                800.png 800w,
                1200.png 1200w">
    <img
          src="400.png"
        sizes="(min-width:640px) 60vw, 100vw"
       srcset="400.png 400w,
                800.png 800w,
                1200.png 1200w">
</picture>

Ещё!

• Proposed new tag: IMG (1993)
• Handling fallback content for still images (1997)
• Notes on Adaptive Images (2011)
• Srcset and sizes
• Responsive Images: Use Cases and Documented Code Snippets
• Native Responsive Images