Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Сколько нужно верстальщиков, чтобы вставить <picture>? — Вадим Макеев, Opera Software

1.360 visualizaciones

Publicado el

Мы все умеем пользоваться элементом <img>, ему уже двадцать лет в обед. Но за это время задачи поменялись, и старичок уже не справляется с адаптивным дизайном. Этой осенью новый элемент <picture> приедет в большинство популярных браузеров. Самое время разобраться, как он работает.

Publicado en: Tecnología
  • Sé el primero en comentar

Сколько нужно верстальщиков, чтобы вставить &lt;picture>? — Вадим Макеев, Opera Software

  1. 1. Сколько нужно верстальщиков, чтобы вставить ?
  2. 2. 2
  3. 3. <img>
  4. 4. <img> 1. Предложили в 1993 году 2. Встроен в браузеры 3. Не блокирует загрузку 4. Доступен через alt 4
  5. 5. <img> 1. Не умеет работать с ретиной 2. Не умеет адаптироваться 3. Не умеет кадрироваться 4. Не знает про новые форматы 5
  6. 6. Знаю-незнаю
  7. 7. Знаю-незнаю Разработчик Браузер Нужно Ширина вьюпорта Картинка к вьюпорту Ретиновость экрана Размеры картинок 11
  8. 8. <picture>
  9. 9. <picture> 1. Предложили в 1997 году (не о том, правда) 2. Переосмыслили в 2011 году (по примеру <video>) 3. Долго думали, что же делать в рамках RICG 4. Определились со спецификацией в 2014 году 5. Собрали денег и внедрили в 2014 году 14
  10. 10. Выбиратор
  11. 11. 1. Ретина 2. Адаптация 3. Кадрирование 4. Формат 18
  12. 12. РАКФ
  13. 13. 1. Ретина
  14. 14. 1. Ретина <img src="400.png" width="400" srcset="600.png 1.5x, 800.png 2x, 1600.png 3x" > 01. 02. 03. 04. 05. 06. 07. 21
  15. 15. Демо
  16. 16. 2. Адаптация
  17. 17. 2. Адаптация img { width:100%; max-width:100%; } @media (min-width:600px) { img { width:50% } } 01. 02. 03. 04. 05. 06. 07. 24
  18. 18. 2. Адаптация <img src="400.png" srcset="400.png 400w, 800.png 800w, 1600.png 1600w" sizes="(min-width:600px) 50vw, 100vw" > 01. 02. 03. 04. 05. 06. 07. 27
  19. 19. Брейкпоинт 400px Меньше 600 пикселей. 1. Весь экран: 400px → 400.png 2. Весь экран 2x: 800px → 800.png 3. Весь экран 3x: 1600px → 1600.png 30
  20. 20. Брейкпоинт 600px Равен 600 пикселям. 1. Полэкрана: 300px → 400.png 2. Полэкрана 2x: 600px → 800.png 3. Полэкрана 3x: 1200px → 1600.png 31
  21. 21. Брейкпоинт 800px Больше 600 пикселей. 1. Полэкрана: 400px → 400.png 2. Полэкрана 2x: 800px → 800.png 3. Полэкрана 3x: 1600px → 1600.png 32
  22. 22. Демо
  23. 23. 3. Кадрирование
  24. 24. 3. Кадрирование <picture> <source media="(min-width:1024px)" srcset="crowd.png"> <source media="(min-width:640px)" srcset="group.png"> <img src="face.png"> </picture> 01. 02. 03. 04. 05. 06. 07. 37
  25. 25. 4. Формат
  26. 26. Офтоп 01. 02. 03. 04. 05. <img src="webp.webp" onerror="src='webp--no.png'; this.onerror=null" alt="Нян Кэт"> Спасибо Матиасу Байненсу за трюк. 40
  27. 27. 4. Формат <picture> <source type="image/webp" srcset="picture.webp"> <source type="image/vnd.ms-photo" srcset="picture.jpxr"> <img src="picture.jpg"> </picture> 01. 02. 03. 04. 05. 06. 07. 41
  28. 28. РАКФ РАКФ РАКФ РАКФ
  29. 29. РАКФ!
  30. 30. РАКФ <picture> <source media="(min-width:1280px)" sizes="50vw" srcset="400.webp 400w, 800.webp 800w, 1600.webp 1600w" 44
  31. 31. Sizer Soze
  32. 32. Picturefill
  33. 33. Ещё!
  34. 34. Ещё! — 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 48
  35. 35. sokr.me/pic
  36. 36. @pepelsbey
  37. 37. pepelsbey.net
  38. 38. Shower
  39. 39. Вопросы?

×