Вы знаете об адаптивных изображениях. Речь идет о синтаксисе изображений в HTML. Если вы предоставите ему правильную информацию в правильном синтаксисе, вы можете заставить браузер загружать именно то изображение, которое ему нужно, не передавая ему слишком много или слишком мало данных изображения. Это фантастика по производительности.
Вы знаете, что для получения максимальной отдачи от отзывчивых изображений вам следует заполнить их полифиллом Picturefill. Скачиваешь, включаешь на свою страницу.
У тебя есть план. Вы знаете, что вы хотите, чтобы ваша страница нравилась в определенные точки останова медиа-запроса. У вас есть все это в Sketch или Photoshop.
Вы знаете, на что похож синтаксис отзывчивых изображений. Для описания вашей ситуации вам понадобится что-то вроде синтаксиса srcset / sizes.
![Sunset]()
Этот скринкаст обо всем этом. Речь идет о том, чтобы связать все вместе. Речь идет о соединении воедино рабочего процесса проектирования и программного обеспечения, используемого там, с рабочим процессом внешнего интерфейса и используемым там синтаксисом. Вам нужно знать, как выводить изображения в нужных вам форматах и размерах. Вам нужно знать, когда вы получите качественную продукцию, а когда нет. Вам нужно знать, как измерять эти изображения и где использовать правильные числа. Вам нужно знать, как связать ваш выбор макета и медиа-запросы с этими числами. Все здесь.
См. Демонстрацию пера для скринкаста Криса Койера (@chriscoyier) по получению чисел для отзывчивых изображений на CodePen.