Snacks Photography
High-performance photography portfolio built on Velocity for Jordan Pavey.
Jordan Pavey needed a portfolio that loaded as fast as it looked good. Photography websites are notoriously slow — heavy images, bloated galleries, poor mobile experiences. I built Snacks Photography on Velocity with aggressive image optimisation, lazy loading, and a gallery system that feels instant. The result is a portfolio that lets the work speak for itself without making visitors wait for it. This project shows that photography portfolios don't need to sacrifice performance for visual impact — proper image handling, smart loading strategies, and discipline about scope create experiences that are both visually stunning and fast.
Velocity Photography Portfolio
Speed Meets Visual Impact.
A blazing-fast photography portfolio that prioritises image quality and load speed equally — built for a photographer who refuses to compromise on either.
Portfolio Strategy and Content Curation
Curated work telling a cohesive visual story.
A photographer's portfolio is as much about what you exclude as what you include. Jordan has thousands of photos, but Snacks Photography features only the strongest work — perhaps 100-150 images across 10-15 projects. This curation is strategic: clients see consistent quality and distinctive style. If the portfolio included mediocre shots alongside exceptional ones, visitors would question whether random photos would be good or weak. By featuring only top-tier work, the portfolio credibly promises that all client photography will be of that caliber. Each project is organized around a narrative. Rather than chronological dumps of unrelated images, projects are curated around themes or shoots: "Editorial Fashion," "Corporate Headshots," "Event Coverage," "Fine Art Landscapes." This organization helps viewers understand Jordan's range while maintaining visual coherence. Someone looking for event photography can immediately see relevant work. Someone seeking fine art can find that category. This structure makes the portfolio useful for prospective clients and reduces cognitive load. Project descriptions are brief but essential. Photography portfolios often show only images, assuming visual impact suffices. But context matters: knowing that a corporate headshot session involved 50 executives in one day, with on-site editing and next-day delivery, demonstrates capability beyond just photographic quality. Project descriptions add narrative that builds confidence in Jordan's professionalism. The technical metadata of shots (camera, lens, settings) is available for photography enthusiasts but not prominent for casual visitors. This dual-layer presentation respects both audiences: photographers can geek out over technical choices, while non-technical viewers aren't distracted by irrelevant information.
The business model for professional photographers is commission-based: clients hire for specific projects, pay per shoot, or retain for ongoing work. The portfolio's primary job is to convince prospects to contact Jordan for a project. The secondary job is to build reputation and authority (which leads to higher rates and better client opportunities). The site includes an obvious booking mechanism — a contact form leading to scheduling — prominently placed after portfolio browsing. Search engine visibility is important for photographers. Local searches like "photographer Gold Coast," "wedding photographer Queensland," and "portrait photographer near me" generate client inquiries. The Velocity site includes schema markup that tells Google what this site is: a professional photography business with portfolio, availability, and contact information. This structured data helps Google display rich results in search. The testimonials section shows client satisfaction and builds trust. Photography is a high-trust service — you're paying in advance for something that won't exist until the shoot. Client testimonials reduce perceived risk: "Jordan was professional, responsive, and delivered exactly what we envisioned." This kind of evidence matters more for service providers than product reviews matter for retailers. Social proof extends beyond testimonials. Publication credits ("Photography featured in Vogue Australia," "Images licensed to international brands") establish authority. Follow counts on Instagram or other platforms suggest a growing audience. These elements compound to position Jordan not just as a competent photographer, but as a recognized professional worth hiring.
Project Overview
A portfolio that does the photos justice.
Most photography portfolio builders sacrifice speed for visual impact, or vice versa. Jordan's brief was clear — the site needed to be as visually striking as the work itself, but it could not be slow. I built a custom Velocity site with WebP image delivery, responsive srcsets for every breakpoint, and a gallery component that preloads the next image before the user scrolls to it. The design is minimal and dark to let the photography command attention. Navigation is intuitive with category filtering, and each project page tells the story behind the shoot. The site consistently scores above 95 on PageSpeed Insights despite being image-heavy. The image optimization strategy was comprehensive. Every photograph is processed through multiple formats: original-resolution WebP for modern browsers, JPEG fallbacks for compatibility, and responsive srcsets covering phone to desktop sizes. Rather than a single 4000x3000px image, the gallery serves 1200x900px on mobile, 2000x1500px on tablet, and 3000x2250px on desktop. Users never download unnecessary pixels. The srcset format lets browsers select the optimal image automatically based on their screen size and pixel density. Lazy loading means images below the fold aren't downloaded until the user scrolls. For a photography portfolio with 50+ images, this drastically improves initial page load. The gallery uses Intersection Observer to detect when images enter the viewport, triggering download only then. Additionally, I implemented predictive preloading — when a user hovers on a project thumbnail, I preload the full resolution image in the background. This feels instant when they click to view the project. The gallery UX was carefully considered. Keyboard navigation allows full arrow-key gallery browsing. Touch swiping works smoothly on mobile. Image transitions are subtle — never jarring. The current image's metadata (date, location, camera settings) appears unobtrusively below. Share buttons enable photographers to amplify their best work through social channels. Lightbox viewing pops images to full-screen, emphasizing the visual impact while maintaining easy navigation. The category filtering system is intuitive without JavaScript complexity. Click a category (Portraits, Landscapes, Events) and the gallery filters to that subset. This is implemented as a URL parameter (snacks.photo/?category=portraits) so each filtered view is linkable and shareable. This approach is SEO-friendly and allows linking directly to specific categories.
Performance Optimization Strategies
Photography portfolio that respects the user's time.
The performance optimization strategy went deep. Every image is processed through an optimization pipeline: original files are resized to maximum needed dimension, converted to multiple formats (WebP for modern browsers, JPEG for fallback), and metadata is stripped. A 10MB RAW image becomes a 1.2MB WebP and 1.8MB JPEG — same visual quality, 80% smaller. Responsive images use the srcset attribute to serve different resolutions to different devices. A 1920x1080 iPad doesn't need the same resolution as a 2880x1800 MacBook Pro. By providing multiple sizes, I ensure each device loads the optimal file for its screen. Mobile devices load 1200px-wide images, tablets get 1800px, desktop gets 2400px. This single change reduces bandwidth by 50% on mobile devices. Lazy loading via Intersection Observer ensures images below the fold aren't downloaded until the user scrolls to them. This dramatically improves initial page load time: the page becomes interactive instantly while images load in the background as needed. The gallery uses a technique called "blur-up" — while the high-resolution image loads, a tiny blurred version (8x8 pixel thumbnail) displays and gradually sharpens. This creates the illusion of fast loading even if the image takes a few seconds to download. Beyond images, the site avoids common performance killers. No web fonts (uses system fonts for faster text rendering). No third-party scripts (analytics would wait until page is interactive). No animations on page load that block rendering. CSS is minimal and critical CSS is inlined in the HTML head. This combination results in a site that loads in under 1 second on typical connections.