Ви знаєте про чуйні зображення. Йдеться про синтаксис зображення в HTML. Якщо ви надаєте йому потрібну інформацію в правильному синтаксисі, ви можете змусити браузер завантажувати саме те саме зображення, яке йому потрібно, не надаючи йому занадто багато або занадто мало даних про зображення. Це фантастично для продуктивності.
Ви знаєте, що, щоб отримати максимальну віддачу від чуйних зображень, слід заповнити їх за допомогою Picturefill. Завантажуєш, включаєш на свою сторінку.
У вас є план. Ви знаєте, що хочете, щоб ваша сторінка сподобалася на певних точках зупинки медіа-запитів. У вас все це висміяно в Sketch або Photoshop.
Ви знаєте, яким є синтаксис адаптивних зображень. Для опису вашої ситуації вам знадобиться щось на зразок синтаксису srcset / sizes.
![Sunset]()
Цей скринкаст стосується всього цього. Йдеться про те, щоб пов’язати все це разом. Йдеться про те, щоб поєднати робочий процес проектування та програмне забезпечення, яке там використовується, із робочим процесом інтерфейсу та використовуваним там синтаксисом. Ви повинні знати, як виводити зображення у потрібних форматах та розмірах. Ви повинні знати, коли ви отримаєте якісну продукцію, а коли ні. Ви повинні знати, як виміряти ці зображення і де правильно використовувати цифри. Ви повинні знати, як зв’язати вибір макета та медіа-запити з цими номерами. Це все тут.
Див. Демонстраційну ручку для Screencast щодо отримання номерів для чуйних зображень Кріса Койєра (@chriscoyier) на CodePen.