Use Compressed Images in Lists

What this skill does

This skill ensures that lists load compressed, appropriately-sized images instead of full-resolution originals. By requesting thumbnails or resized images from your server or an image CDN, it reduces memory usage and prevents scroll jank caused by loading large images unnecessarily. The result is smoother UI performance and faster load times, especially on mobile devices and retina displays.

Who it's for

This skill is essential for front-end developers and performance marketers managing product catalogs or user-generated content feeds where images appear in lists or grids. Growth leads optimizing mobile app experiences and agency strategists working on e-commerce or content-heavy client projects will also benefit from implementing compressed image loading to improve user engagement and conversion rates.

Key workflows

First, identify all places where images render in list or grid components and assess the current image size versus display size. Next, implement logic to request resized images by appending query parameters or using a CDN’s resizing features to serve thumbnails at roughly 2x the display size for retina clarity. Then, integrate an optimized image component that supports caching and placeholders to handle loading states gracefully. Finally, test on multiple devices to verify reduced memory consumption and smoother scrolling behavior.

Common questions

How do I determine the right image size to request? Request images at about twice the display dimensions to balance quality and performance, especially for retina screens. Will compressing images affect SEO or accessibility? Properly sized images improve page speed, which benefits SEO, and there’s no negative impact on accessibility if alt text remains unchanged. Can I use this skill with any image source? Yes, as long as your server or CDN supports dynamic resizing or you can generate thumbnails before serving.

How to use in Metaflow

Attach this skill to any Metaflow agent task responsible for front-end performance or CRO audits related to image-heavy lists or catalogs. Expect the agent to analyze image sizing practices and recommend switching to compressed thumbnails where full-resolution images are currently used. This guidance helps prioritize improvements that reduce memory load and enhance scroll performance across user devices. You can learn more about applying this skill within your workflows by...

For broader context, see our roundup of claude skills for marketing, and read Claude Code workflows for marketing agencies for related setup guidance.