{"id":39839,"date":"2026-03-05T07:00:00","date_gmt":"2026-03-05T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=39839"},"modified":"2026-03-02T14:21:26","modified_gmt":"2026-03-02T22:21:26","slug":"scaling-subject-aware-layouts-react-ai","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai","title":{"rendered":"Scaling Subject-Aware Layouts: Solving Multi-Device Quality With React and AI"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>In the multi-device era, responsive design often just means cropping an image until it fits.<\/p>\n<p>We\u2019ve all been there. You upload a stunning landscape hero image and it looks great on desktop. But when the layout shifts to a vertical mobile view (9:16) or a square card (1:1), standard CSS takes over.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo-article-projects\/image\/upload\/v1770941085\/Articles-Images\/screen-resolution.jpg\" alt=\"screen resolution\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"3998\" height=\"2666\"\/><\/p>\n<p><em>The fragmentation of modern screens makes fixed-ratio assets a liability.<\/em><\/p>\n<p>The industry standard, <code>object-fit: cover<\/code>, is aggressive. It blindly chops off the edges to fill the container. If your subject isn\u2019t dead center, they get decapitated. This isn\u2019t just a layout bug; it\u2019s a conversion killer.<\/p>\n<ul>\n<li>\n<strong>E-commerce.<\/strong> You crop out the heel of the shoe.<\/li>\n<li>\n<strong>Portrait.<\/strong> You crop the forehead of the CEO.<\/li>\n<li>\n<strong>Travel.<\/strong> You crop the landmark out of the skyline.<\/li>\n<\/ul>\n<p>To fix this manually, developers write complex media queries or force content teams to upload three different versions of the same asset. That is unscalable technical debt.<\/p>\n<p>You need a \u201czero-cut\u201d architecture. With a single upload of a high-quality source image, your application will automatically:<\/p>\n<ul>\n<li>\n<strong>Detect<\/strong> the subject.<\/li>\n<li>\n<strong>Decide<\/strong> if it needs to crop (zoom) or expand (pad).<\/li>\n<li>\n<strong>Generate<\/strong> the perfect pixels to fill the gap.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo-article-projects\/image\/upload\/v1770941226\/Articles-Images\/one%20source%20asset.png\" alt=\"one-source image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1799\" height=\"837\"\/><\/p>\n<p>The result is one source asset intelligently expanded and focused across Story, Post, and Banner layouts.<\/p>\n<h2>The Architecture: Context-Aware Rendering<\/h2>\n<p>To prevent the subjects in our images from awkward cropping, you\u2019ll need more than just CSS. You\u2019ll need a component that makes a <strong>content-aware decision<\/strong> before the image even loads.<\/p>\n<p>This logic will be built into a smart component that evaluates the target aspect ratio against the source. It\u2019ll choose between two distinct AI strategies:<\/p>\n<ol>\n<li>Strategy A: The Smart Crop (<code>g_auto<\/code>)<\/li>\n<\/ol>\n<ul>\n<li>\n<strong>When to use it:<\/strong> When the aspect ratio change is minor (e.g., Landscape 4:3 to Square 1:1).<\/li>\n<li>\n<strong>What it does:<\/strong> It zooms in slightly but keeps the most interesting part of the image (faces, products) centered using <code>gravity=&quot;auto&quot;<\/code>.<\/li>\n<li>\n<strong>Result:<\/strong> A tight, focused composition.<\/li>\n<\/ul>\n<ol start=\"2\">\n<li>Strategy B: The Generative Pad (<code>gen_fill<\/code>)<\/li>\n<\/ol>\n<ul>\n<li>\n<strong>When to use it:<\/strong> When the change is extreme (e.g., Panoramic 16:9 to Vertical Story 9:16).<\/li>\n<li>\n<strong>The problem:<\/strong> Cropping here would destroy the image. You\u2019d lose the scenery or the subject\u2019s context.<\/li>\n<li>\n<strong>The solution:<\/strong> Don\u2019t crop. Scale the image to fit <strong>inside<\/strong> the container and ask the AI to \u201cpaint\u201d the missing pixels (sky, floor, walls) to fill the empty space.<\/li>\n<li>\n<strong>The result:<\/strong> The original subject is preserved 100%, and the layout is filled seamlessly.<\/li>\n<\/ul>\n<p>Instead of relying on heavy client-side effects, you\u2019ll calculate the aspect ratio delta directly in the render pass.<\/p>\n<p>If the target is significantly taller than it is wide (like a mobile story), you\u2019ll trigger <strong>Strategy B<\/strong>. For everything else, <strong>Strategy A<\/strong> usually suffices.<\/p>\n<h2>The Tech Stack (Next.js 16 + Cloudinary)<\/h2>\n<p>To build a \u201czero-cut\u201d engine that\u2019s fast, type-safe, and scalable, let\u2019s go with a stack that enforces modern industry best practices.<\/p>\n<p>The core components are:<\/p>\n<ol>\n<li>\n<strong>Next.js 16 (App Router) as the backbone.<\/strong> You\u2019ll use server components for initial data fetching and client components only where interaction (like this responsive grid) is required.<\/li>\n<li>\n<strong>Cloudinary AI as the brain.<\/strong> Instead of resizing images in CSS, Cloudinary will generate new pixels on the fly.<\/li>\n<li>\n<strong><code>@cloudinary\/url-gen<\/code> as the builder.<\/strong> Instead of prone-to-error string concatenation (e.g., <code>image\/upload\/w_500...<\/code>), you\u2019ll use a type-safe SDK to construct transformations.<\/li>\n<\/ol>\n<h2>Building the Core: The <code>SmartImage<\/code> Component<\/h2>\n<p>At the heart of this solution is <a href=\"https:\/\/github.com\/musebe\/subject-aware-layouts\/blob\/main\/src\/components\/features\/media\/SmartImage.tsx\"><code>SmartImage.tsx<\/code><\/a>. This component wraps the Cloudinary image component (<code>CldImage<\/code>) and injects our layout logic.<\/p>\n<h3>The \u2018No-Effect\u2019 Paradigm<\/h3>\n<p>A common mistake in React is to use <code>useEffect<\/code> to calculate derived state, like deciding whether to crop or pad based on props. This causes a \u201cflash of wrong content\u201d and unnecessary re-renders.<\/p>\n<p>Instead, calculate your strategy directly in the render pass. This is faster, cleaner, and ensures the correct layout is sent to the server (or hydration) immediately.<\/p>\n<h3>The Logic: Aspect Ratio Delta<\/h3>\n<p>Let\u2019s determine strategy by comparing the requested <code>width<\/code> and <code>height<\/code>. If the image is requested in an \u201cextreme\u201d vertical format (like a Story), it\u2019s time to switch strategies.<\/p>\n<p>Here\u2019s the logic inside your component:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ src\/components\/features\/media\/SmartImage.tsx<\/span>\n\nexport <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">SmartImage<\/span><span class=\"hljs-params\">({ width, height, ...props })<\/span> <\/span>{\n  <span class=\"hljs-comment\">\/\/ 1. Calculate the Aspect Ratio<\/span>\n  <span class=\"hljs-keyword\">const<\/span> aspectRatio = width \/ height;\n\n  <span class=\"hljs-comment\">\/\/ 2. Define \"Extreme\" (e.g., Stories are usually 0.56)<\/span>\n  <span class=\"hljs-keyword\">const<\/span> isExtremeVertical = aspectRatio &lt; <span class=\"hljs-number\">0.6<\/span>;\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    &lt;CldImage\n      {...props}\n      width={width}\n      height={height}\n      <span class=\"hljs-comment\">\/\/ 3. Conditional Strategy Switch<\/span>\n      {...(isExtremeVertical\n        ? {\n            <span class=\"hljs-comment\">\/\/ Strategy: Generative Fill (Zero-Cut)<\/span>\n            crop: <span class=\"hljs-string\">\"pad\"<\/span>,\n            fillBackground: <span class=\"hljs-keyword\">true<\/span>,\n          }\n        : {\n            <span class=\"hljs-comment\">\/\/ Strategy: Smart Crop (Focus)<\/span>\n            crop: <span class=\"hljs-string\">\"fill\"<\/span>,\n            gravity: <span class=\"hljs-string\">\"auto\"<\/span>,\n          })}\n    \/&gt;\n  );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>By simply passing <code>fillBackground: true<\/code> when <code>crop=&quot;pad&quot;<\/code> is active, you\u2019ll trigger Cloudinary\u2019s generative AI, which will analyze the image content and extend it naturally to fill the 9:16 container.<\/p>\n<h2>Generative Fill in Action<\/h2>\n<p>Most developers rely on <code>crop=&quot;fill&quot;<\/code> (CSS <code>cover<\/code>), which zooms in until the container is full. This is dangerous because it deletes pixels.<\/p>\n<p>With a \u201czero-cut\u201d strategy, instead of zooming <em>in<\/em>, you\u2019ll effectively zoom <em>out<\/em> until the entire image fits inside the container. Then, you\u2019ll ask Cloudinary\u2019s generative AI to paint the empty space.<\/p>\n<p>Here\u2019s how this single strategy solves the three hardest layout challenges:<\/p>\n<h3>Case Study 1: The Vertical Story (9:16)<\/h3>\n<ul>\n<li>\n<strong>The problem:<\/strong> You have a landscape photo of a sneaker on a table. If you crop it to 9:16, you lose the toes and the heel. You only see the laces.<\/li>\n<li>\n<strong>The solution:<\/strong> The image is scaled down to fit the width. The AI analyzes the texture of the table and the lighting of the room, then generates more \u201ctable\u201d at the bottom and more \u201croom\u201d at the top.<\/li>\n<li>\n<strong>The result:<\/strong> A perfect mobile-first asset where the product is fully visible, surrounded by context that didn\u2019t exist in the original photo.<\/li>\n<\/ul>\n<h3>Case Study 2: The Square Post (1:1)<\/h3>\n<ul>\n<li>\n<strong>The problem:<\/strong> A wide group shot of five people. A center crop cuts off the two people on the edges.<\/li>\n<li>\n<strong>The solution:<\/strong> The system fits the width of the group into the square. This leaves empty space above and below (letterboxing).<\/li>\n<li>\n<strong>The result:<\/strong> The AI fills that \u201cletterbox\u201d space with convincing background extensions. You keep all five people in the frame, and the image looks like it was shot natively for Instagram.<\/li>\n<\/ul>\n<h3>Case Study 3: The Cinematic Banner (16:9)<\/h3>\n<ul>\n<li>\n<strong>The problem:<\/strong> A tall portrait of a model. Cropping to 16:9 zooms in on just the eyes, losing the outfit.<\/li>\n<li>\n<strong>The solution:<\/strong> The model is centered. The AI extends the background horizontally, turning a portrait studio shot into a cinematic wide shot.<\/li>\n<\/ul>\n<p>By flipping the logic from \u201cRemove Pixels\u201d to \u201cGenerate Pixels,\u201d we guarantee that the subject is never lost.<\/p>\n<h2>Live Demo and Source Code<\/h2>\n<p>You can see the \u201czero-cut\u201d engine in action and explore the implementation details through the links below.<\/p>\n<ul>\n<li>\n<p><strong>Live demo:<\/strong> Witness how a single source asset adapts to Story, Post, and Banner formats in real time. <a href=\"https:\/\/subject-aware-layouts.vercel.app\/\">subject-aware-layouts.vercel.app<\/a><\/p>\n<\/li>\n<li>\n<p><strong>Explore the codebase:<\/strong> The project is built with a focus on high performance and long-term maintainability, utilizing several modern architectural patterns.<\/p>\n<\/li>\n<li>\n<p><strong>GitHub source code:<\/strong> <a href=\"https:\/\/github.com\/musebe\/subject-aware-layouts\">github.com\/musebe\/subject-aware-layouts<\/a><\/p>\n<\/li>\n<\/ul>\n<p>This concludes our guide on scaling subject-aware layouts. By moving away from aggressive cropping and toward generative AI strategies, you can ensure your UI remains professional and your subjects remain the star of the show, regardless of the device.<\/p>\n<p><a href=\"https:\/\/cloudinary.com\/users\/register_free\">Sign up for a free Cloudinary account<\/a> today and start building your next project.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":39840,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[336,409,246,251],"class_list":["post-39839","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-ai","tag-generative-ai","tag-react","tag-responsive-images"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Scaling Subject-Aware Layouts: Solving Multi-Device Quality With React and AI<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scaling Subject-Aware Layouts: Solving Multi-Device Quality With React and AI\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-05T15:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1771628214\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Scaling Subject-Aware Layouts: Solving Multi-Device Quality With React and AI\",\"datePublished\":\"2026-03-05T15:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1771628214\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI.jpg?_i=AA\",\"keywords\":[\"AI\",\"Generative AI\",\"React\",\"Responsive Images\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai\",\"url\":\"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai\",\"name\":\"Scaling Subject-Aware Layouts: Solving Multi-Device Quality With React and AI\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1771628214\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI.jpg?_i=AA\",\"datePublished\":\"2026-03-05T15:00:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1771628214\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1771628214\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Scaling Subject-Aware Layouts: Solving Multi-Device Quality With React and AI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Scaling Subject-Aware Layouts: Solving Multi-Device Quality With React and AI","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai","og_locale":"en_US","og_type":"article","og_title":"Scaling Subject-Aware Layouts: Solving Multi-Device Quality With React and AI","og_url":"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai","og_site_name":"Cloudinary Blog","article_published_time":"2026-03-05T15:00:00+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1771628214\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Scaling Subject-Aware Layouts: Solving Multi-Device Quality With React and AI","datePublished":"2026-03-05T15:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai"},"wordCount":10,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1771628214\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI.jpg?_i=AA","keywords":["AI","Generative AI","React","Responsive Images"],"inLanguage":"en-US","copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai","url":"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai","name":"Scaling Subject-Aware Layouts: Solving Multi-Device Quality With React and AI","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1771628214\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI.jpg?_i=AA","datePublished":"2026-03-05T15:00:00+00:00","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1771628214\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1771628214\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/scaling-subject-aware-layouts-react-ai#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Scaling Subject-Aware Layouts: Solving Multi-Device Quality With React and AI"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1771628214\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI\/Blog_Scaling_Subject-Aware_Layouts__Solving_Multi-Device_Quality_with_React_and_AI.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/39839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=39839"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/39839\/revisions"}],"predecessor-version":[{"id":39842,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/39839\/revisions\/39842"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/39840"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=39839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=39839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=39839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}