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

Вадим Макеев, Opera Software

Сколько нужно верстальщиков,
чтобы вставить Иконка сломанной картинки ?

Лого Оперы

<img>

<img>

<img>

Иконка сломанной картинки
Лампочки
Проблема: как вставить квадратное в круглое
Решение: замотать всё скотчем

(не)знаю

(не)знаю

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

<picture>

<picture>

IE Chrome Safari Firefox Opera

<picture>
не существует

<img>
и настройки

Выбиратор

РАФК

1. Ретина

1. Ретина

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

Демо

2. Адаптация

2. Адаптация

			
				img {
				    width:100%;
				    max-width:100%;
				    }
			
			
				@media (min-width:600px) {
				    img { width:50% }
				    }
			
		
iPhone в портретной ориентации Картинка
iPhone в альбомной ориентации Картинка

2. Адаптация

			<img
			       src="400.png"
			    srcset="400.png 400w,
			             800.png 800w,
			             1200.png 1200w"
			     sizes="(min-width:600px) 50vw, 100vw"
			     >
		
iPhone в портретной ориентации Картинка
iPhone в альбомной ориентации Картинка

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

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

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

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

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

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

Демо

3. Формат

Нян Кэт

Офтоп

			<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. Кадрирование

Ким Чен Ын в лодке крупным планом Ким Чен Ын в лодке средним планом Ким Чен Ын в лодке общим планом
iPhone Ким Чен Ын в лодке общим планом Ким Чен Ын в лодке средним планом Ким Чен Ын в лодке крупным планом

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>

Sizer Soze

Picturefill

Ещё?

Ещё!

sokr.me/pic

@pepelsbey

pepelsbey.net

Логотип Шовера

Shower

Вопросы?

Powered by Shower