Fixing Transcoder Output: Generating Proper Responsive Image Variants (360, 640, 960px)

[yanivz]

Currently, the Transcoder does not generate the required three image variants at the specified widths (360px, 640px, 960px). For proper responsive image handling, the implementation should leverage the srcset and sizes attributes, which allow the browser to automatically select the most appropriate image based on the user’s device resolution and viewport width.

A correct implementation example:

<img class="card__media"
     src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=640&h=427&q=80&crop=entropy"
     srcset="https://images.unsplash.com/...&w=320&h=213&q=80&crop=entropy 320w,
             https://images.unsplash.com/...&w=640&h=427&q=80&crop=entropy 640w,
             https://images.unsplash.com/...&w=960&h=640&q=80&crop=entropy 960w"
     sizes="(min-width: 1280px) 360px,
            (min-width: 768px) calc(50vw - 48px),
            100vw"
     alt="Blue hour light..."
     fetchpriority="high">

Explanation of key parts: src – Provides a fallback/default image (here at 640px). srcset – Defines multiple image variants (320w, 640w, 960w) with consistent aspect ratio. sizes – Instructs the browser how much space the image will occupy depending on viewport: For screens ≥1280px → use 360px wide image. For screens ≥768px → use half the viewport width minus 48px. For smaller screens → scale to full viewport width (100vw). fetchpriority="high" – Ensures the image is prioritized for loading, which is especially important for above-the-fold content.

[AlexTr]

Thank you for the suggestion. However UNA uses multicolumn layout, so that means that we can't consider Viewport effectively. However for some important parts like TImeline, which is mostly uses full viewport or at least wide column this approach is already used.

[yanivz]

I understand the limitation with multicolumn layouts where the viewport width is not always directly correlated with the column width. However, the use of srcset and sizes is still beneficial even in such cases:

Bandwidth Optimization – Without multiple image variants, high-resolution devices (e.g., Retina/4K) will always download the largest image, even if it’s displayed at a much smaller size within a narrow column. This results in unnecessary data usage and slower page loads.

Browser Responsiveness – Modern browsers are very good at selecting the most appropriate image from srcset, based on both device pixel ratio and the rendered size of the image element (not just the viewport). This means that even within a multicolumn grid, the browser can pick the optimal variant once it knows the element’s computed width.

Progressive Enhancement – For layouts like Timeline (full-width) it’s already clear why srcset helps, but even for card grids or smaller column layouts, providing a range of variants ensures future-proofing and consistent performance across devices with different DPR and screen sizes.

Fallback Behavior – At worst, the browser will fall back to the default src if the logic doesn’t fit a particular case. But in the majority of cases, srcset delivers a more efficient image.

In other words, the multicolumn layout doesn’t block this approach—it just requires that the sizes attribute is defined carefully to approximate the column widths at different breakpoints. This way, UNA can still take advantage of modern responsive image techniques without breaking existing layout assumptions.