Responsive Image CSS Generator

Art direction in responsive images means serving different cropped or composed versions of an image at different viewport widths. Unlike simple resolution switching (srcset), art direction uses the <picture> element with media attributes to deliver images optimized for each screen size — for example, a tight portrait crop on mobile and a wide landscape crop on desktop. This ensures the subject remains clear and impactful regardless of device.

srcset (on <img>) is for resolution switching — providing the same image at different pixel densities (1x, 2x, 3x) or widths (320w, 640w, 1280w). The browser picks the best file based on device pixel ratio and viewport size. <picture> is for art direction and format switching — it lets you serve entirely different image crops or formats (like WebP) based on media queries. Use srcset when the image composition stays the same; use <picture> when you need different compositions per breakpoint.

Common breakpoints align with device categories: Mobile (320–640px, portrait crops work best), Tablet (768–1024px, balanced 4:3 or 16:9 ratios), and Desktop (1200px+, wide landscape compositions). However, the best breakpoints depend on your design. Look at your layout's natural breakpoints — where does the image container change size or aspect ratio? Align your art direction breakpoints with those layout changes for the smoothest visual experience.

Provide 2–4 width variants per image source. Common widths: 320w, 640w, 768w, 1024w, 1280w, 1440w, 1920w. Use the sizes attribute to tell the browser how wide the image will render at each layout breakpoint (e.g., sizes="(max-width:640px) 100vw, (max-width:1024px) 50vw, 33vw"). This prevents the browser from downloading unnecessarily large files. For art direction with <picture>, include a srcset on each <source> for resolution switching within that breakpoint's crop.

CSS object-fit: cover; combined with object-position provides a lightweight alternative to full art direction. It lets you use a single image file and control which part is visible by adjusting the focal point (e.g., object-position: 30% 70%;). This works well when bandwidth is less of a concern. However, for performance-critical sites, combining true art direction (different cropped files via <picture>) with object-position as a fallback gives the best of both worlds — optimized file sizes with graceful degradation.

Yes — WebP and AVIF offer significantly better compression than JPEG/PNG. With the <picture> element, you can serve modern formats with a fallback: use <source type="image/avif"> for AVIF, then <source type="image/webp"> for WebP, and finally an <img> with JPEG/PNG as the ultimate fallback. This ensures every browser gets a supported format while modern browsers benefit from smaller file sizes — often 30–50% smaller than equivalent JPEGs.