A Project-Gallery Image Budget: Keep the Proof, Cut the Unnecessary Bytes
Plan a contractor website gallery around visible image sizes, responsive variants and loading priority, with a transparent byte-budget example.
A contractor's gallery should show useful workmanship details, not make every visitor download camera originals before seeing the estimate button. The goal is not the smallest possible file at any cost. It is enough visual information for the task, delivered at an appropriate size and priority.
What matters most
- Delivery size and loading priority should match the job each image performs.
- The illustrative byte reduction is not a measured loading-time or ranking gain.
Use this budget when planning or reviewing a project gallery. It combines a transparent arithmetic example with an acceptance worksheet. The numbers below are illustrative—not measurements from a client site and not universal performance targets.
How to define the job each image performs
A small project card, a full-width hero and an expanded detail photograph do not need identical files. Record the largest intended display size and whether the reader needs to inspect fine detail. Preserve high-quality originals privately as source assets while generating appropriate delivery variants.
Use only images the business has permission to publish, and remove unnecessary private details before publication. Performance work does not establish ownership or customer consent. Do not present stock or generated images as evidence of completed customer projects.
A simple byte-budget example
Suppose a page contains eight gallery images. In one hypothetical version, every image is a 3 MB original. In another, each displayed variant is 150 kB, using decimal units for this calculation.
| Assumption | Total for eight images |
|---|---|
| 8 × 3 MB originals | 24 MB |
| 8 × 150 kB variants | 1.2 MB |
| Difference under these assumptions | 22.8 MB, or 95% fewer image bytes |
This is arithmetic, not a loading-time forecast. Actual transfer depends on which images are requested, responsive source selection, caching and other behavior. The smaller files must also pass a visual check; 150 kB is an example, not a required cap for every image.
Put the image worksheet into practice
| Image role | Intended display size | Delivery variants | Loading priority | Visual check | Rights/reference |
|---|---|---|---|---|---|
| Main project image | ___ | ___ | Confirm if initially visible | Detail and crop | ___ |
| Gallery card | ___ | ___ | Appropriate to position | Readability at card size | ___ |
| Expanded detail | ___ | ___ | Load when needed as designed | Useful inspection detail | ___ |
Record the selected file size and actual requested resource during testing. A small thumbnail displayed from a huge original has not met the budget merely because CSS shrank it on screen.
Use responsive delivery and deliberate priority
Google's web.dev guidance explains responsive image selection and the role of image dimensions in reserving layout space. Provide suitable variants and accurate sizing information so the browser can choose an appropriate resource. web.dev responsive images.
Loading priority also matters. Images needed immediately should not be indiscriminately lazy-loaded, while later content can often defer loading appropriately. Verify the behavior rather than assuming a site-wide setting makes every image optimal. web.dev browser-level lazy loading.
Keep alternative text useful to the image's purpose. A meaningful project image needs an honest description; repeating a service keyword across every image is not a substitute for describing what the reader can see.
What the image budget cannot guarantee
Check a phone-sized viewport and a larger display. Can the reader understand the project, inspect necessary detail and reach the next step? Do crops remove important context? Does the page shift as images appear? Does opening a detail view request the intended resource?
Measure before and after under comparable conditions and retain the results. Do not convert a smaller byte total into an unsupported claim about rankings or lead growth. Images are one part of a page containing scripts, fonts and other resources.
For Mendola.Tech managed website work, a good image budget preserves credible project proof while eliminating unnecessary transfer. The finish line is both visual and technical: the right image, at the right size, requested at the right time.
Official references
- web.dev responsive images — consulted September 5, 2026; supports the linked technical guidance above.
- web.dev browser-level lazy loading — consulted September 5, 2026; supports the linked technical guidance above.