Сколько нужно верстальщиков,
чтобы вставить 
?
<img>
- Предложили в 1993 году
- Встроен в браузеры
- Не блокирует загрузку
- Доступен через
alt
<img>
- Не умеет работать с ретиной
- Не умеет адаптироваться
- Не умеет кадрироваться
- Не знает про новые форматы
(не)знаю
|
Разработчик |
Браузер |
Нужно |
| Ширина вьюпорта |
 |
 |
|
| Картинка к вьюпорту |
|
|
|
| Ретиновость экрана |
|
|
|
| Размеры картинок |
|
|
|
<picture>
- Предложили в 1997 году (не о том, правда)
- Переосмыслили в 2011 году (по примеру
<video>)
- Долго думали, что же делать в рамках RICG
- Определились со спецификацией в 2014 году
- Собрали денег и внедрили в 2014 году
- Ретина
- Адаптация
- Формат
- Кадрирование
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 пикселей.
- Весь экран: 400px →
400.png
- Весь экран 2x: 800px →
800.png
- Весь экран 3x: 1200px →
1200.png
Брейкпоинт 600px
Равен 600 пикселям.
- Полэкрана: 300px →
400.png
- Полэкрана 2x: 600px →
800.png
- Полэкрана 3x: 1200px →
1200.png
Брейкпоинт 800px
Больше 600 пикселей.
- Полэкрана: 400px →
400.png
- Полэкрана 2x: 800px →
800.png
- Полэкрана 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>
