Responsive Design and Image Guidelines
Best practices for responsive layouts, image sizing, aspect ratios, and performance — plus what to provide when supplying image assets for your website.
Building for Every Screen
A well-built website works on everything from a large desktop monitor to a phone held in one hand. Responsive design isn't optional — it's the baseline. At Webbfox, every site we build is designed mobile-first and tested across breakpoints before launch.
This guide covers what we handle and what you should know when providing assets.
Responsive Layout Principles
Mobile-First Design
We design for the smallest screen first, then scale up. This forces clarity — if the layout works on a phone, it'll work everywhere. Content stacking, touch targets, and readable font sizes are addressed before desktop flourishes.
Breakpoints, Not Devices
Rather than targeting specific devices, we use fluid breakpoints where the layout naturally needs to adjust. Common breakpoints fall around 640px, 768px, 1024px, and 1280px, but the content drives the decision.
Flexible Grids and Spacing
Layouts use relative units and CSS Grid or Flexbox to adapt fluidly. Fixed-width elements are avoided — they break on screens you didn't plan for.
Image Guidelines
Aspect Ratios
Consistent aspect ratios keep layouts stable as images load. The most common ratios we use:
- 16:9 — hero banners, video thumbnails
- 4:3 — blog cards, feature sections
- 1:1 — team photos, avatars, logo grids
- 3:2 — portfolio and case study imagery
When supplying images, match the ratio specified in the design. Cropping is easier to control on your end than guessing intent on ours.
Resolution and File Size
Provide images at 2x the display size to support high-density (Retina) screens. For a hero image displayed at 1200px wide, supply a 2400px-wide source file.
For file size, aim for:
- Hero images: under 200KB after compression
- Inline images: under 100KB
- Thumbnails: under 50KB
We compress and convert to modern formats (WebP/AVIF) during the build process, but starting with a clean, high-resolution source gives the best results.
Formats to Provide
- Photography: JPEG or PNG (uncompressed if possible)
- Logos and icons: SVG preferred, PNG as fallback
- Illustrations: SVG for vector, PNG for raster
Performance Considerations
Images are typically the heaviest assets on a page. We handle lazy loading, responsive srcset attributes, and format optimisation as standard. But providing properly sized source images makes a meaningful difference to the final result.
Need help preparing assets? Your Webbfox team can advise on image specs for your specific design. See our delivery fundamentals for how asset preparation fits into the build process.