Responsive Images: Srcset, Sizes, Picture і QA

Модуль 5 · Урок 20

Responsive images, media й доказовий QA

Responsive media має зберігати сенс, не створювати layout shift і не змушувати browser завантажувати зайві pixels. Рішення починається з intrinsic dimensions та slot, далі — density/resolution switching або art direction, а завершується Network і reflow evidence.

Intrinsic ratiosrcset + sizespictureResponsive QA

Стабільний fluid image

<img
  src="cover-960.svg"
  srcset="cover-480.svg 480w, cover-960.svg 960w, cover-1440.svg 1440w"
  sizes="(width >= 56rem) 42rem, calc(100vw - 2rem)"
  width="960" height="640"
  alt="Обкладинка навчального проєкту">

HTML width/height дають browser intrinsic aspect ratio до завантаження asset; CSS max-inline-size:100%; block-size:auto робить media fluid. У srcset width descriptors описують реальні candidate widths, а sizes — очікуваний rendered slot. Browser обирає candidate з урахуванням slot, DPR та власної стратегії; конкретний файл не можна гарантувати.

Resolution switching чи art direction?

Завдання	Інструмент	Правило
Той самий content у різній роздільності	`img srcset + sizes`	Browser обирає candidate
Інший crop/composition	`picture + source media`	Це editorial art direction
Format alternatives	`source type`	Залишайте final `img` fallback
Decorative background	CSS image	Не переносіть meaningful content у background

Responsive QA як матриця доказів

Continuous widthsПовільна зміна, 320 CSS px, portrait/landscape.

Boundaries−1, exact, +1 для кожної media/container query.

Content stressLong title, long URL/token, empty/extra cards.

AccessKeyboard, visible focus, target size, 200% text.

PreferencesLight/dark, reduced motion, forced colors.

NetworkCandidate, dimensions, failures і layout shift.

Screenshot є результатом, але не діагнозом. У звіті зафіксуйте viewport/container, expected, actual, CSS rule, evidence, fix і retest. На 320 CSS px звичайний content має reflow без двовимірного scrolling, крім обґрунтованих винятків на кшталт data table.

Лабораторна і перший review-проєкт

BookFlow responsive landing lab

15 локальних safe-файлів: starter/reference, responsive assets, breakpoint/media/container matrices, long-content fixtures і release checklist.

Завантажити responsive lab →

Після тесту відкриється проєкт 1

Зберіть власну responsive landing page, надайте HTTPS artifact, source, README і QA evidence. Review оцінюється за рубрикою 100 балів; прийняття — від 80.

Перейти до проєкту 1 →

Responsive images, media й QA

Responsive images, media й доказовий QA

Стабільний fluid image

Resolution switching чи art direction?

Responsive QA як матриця доказів

Лабораторна і перший review-проєкт

BookFlow responsive landing lab

Після тесту відкриється проєкт 1

Офіційні джерела

Закріпіть матеріал уроку