When you’re building a platform for a world-class artist like Kris Friesen, the standard web architecture doesn’t just fall short, it fails. The problem isn’t just “showing images.” The problem is delivering high-fidelity, 4K artwork to a user on a subway with a spotty 5G connection without causing their browser to seize up or their data plan to explode.
In this white paper, we’re peeling back the curtain on the architectural decisions we made at GiantByte to optimize media rendering for the Kris Friesen Art project. We’ve moved away from the “page-first” mentality and embraced a “gallery-first” framework. Here is how we engineered a solution that prioritizes frame stability, interaction latency, and sub-second visual feedback.
The Problem: The Artisan’s Performance Paradox
High-resolution art is heavy. A single canvas scan can exceed 50MB. If you load 20 of those on a single page, you’re asking for a crash. Traditional web layouts wait for the image to load before they know where to put it on the screen. This leads to “Cumulative Layout Shift” (CLS), that annoying jump where the text moves just as you’re about to click.
We needed a system that could:
- Render a stable layout before the images arrived.
- Handle infinite scrolling for hundreds of assets without memory leaks.
- Deliver the right image size for the right device every single time.
1. The Backend Foundation: Django and Keyset Pagination
We chose Django and the Django REST Framework (DRF) to handle the heavy lifting on the server. Why? Because when you’re dealing with a growing library of high-value assets, you need a robust ORM and a predictable API.
The biggest mistake we see in gallery apps is the use of “Offset Pagination” (/api/artworks?page=5). As your database grows, offset pagination becomes exponentially slower because the database has to scan through all previous records to find the starting point.
The GiantByte Approach: Cursor Pagination
We implemented keyset (cursor) pagination. Instead of asking for “page 5,” the frontend asks for “the 20 items after item ID 123.” This results in:
- Constant O(1) performance: The database uses an index to jump straight to the record.
- Zero Duplication: If Kris uploads a new painting while you’re scrolling, the cursor remains stable, preventing you from seeing the same image twice.
2. The Frontend Orchestrator: React and Virtualization
On the client side, we built the gallery using React. Our goal was 60fps scrolling, silky smooth, even on older mobile devices. To achieve this, we had to solve for “DOM bloat.” If you render 500 image cards in the browser, the memory usage spikes and the interface starts to lag.
Virtualized Viewports
We treated the gallery grid as a window. Using the IntersectionObserver API, we only render components that are currently in the user’s viewport (or just about to enter it). As an artwork scrolls out of view, we unmount it from the DOM. This keeps the browser’s memory footprint lean, regardless of how deep the gallery goes.
Predictive Prefetching
We don’t wait for you to hit the bottom of the page to fetch more data. Our React layer monitors the scroll velocity. If we see you’re moving fast, we proactively fetch the next batch of metadata. By the time you reach the bottom, the next set of thumbnails is already cached and ready to animate in.
3. The Asset Pipeline: Variants and Aspect Ratios
An image-heavy site is only as fast as its smallest file. We built an automated media pipeline that triggers every time an artwork is uploaded to the CMS.
- Variant Generation: We use Pillow and custom scripts to generate four versions of every painting:
thumb(320px),medium(1024px),full(4K), and aplaceholder(16px). - Format Optimization: We prioritize WebP and AVIF for modern browsers, with a JPEG fallback for older systems. This usually cuts file sizes by 30-50% without a perceptible loss in quality.
- The Aspect Ratio Lock: To prevent layout shifts, the API provides the height/width ratio of the artwork in the initial JSON payload. We use the CSS
aspect-ratioproperty to reserve the exact space on the screen before the image even begins to download.
4. State Management and Request De-duplication
In a complex React app, you can easily end up with “over-fetching”, multiple components requesting the same data. We implemented a centralized state management layer (using RTK Query) that acts as a traffic controller for our API.
If the “Search” component and the “Gallery” component both need the list of “Abstract Paintings,” the system sends one request and shares the result. This reduces the load on our Django backend and ensures a snappier feel for you as the user.
We also utilize stale-while-revalidate (SWR) logic. We show you the cached version of the gallery immediately, and then update it in the background if there’s a change. No spinners, no waiting, just instant art.
5. Edge Delivery: The Final Mile
No matter how fast our code is, physics is still a factor. To minimize latency, we utilize a Global Content Delivery Network (CDN).
When a user in London views Kris’s portfolio, they aren’t pulling images from our server in Canada. They’re pulling them from an edge server in the UK. We’ve configured aggressive caching headers for our images:
- Immutable Content Hashes: If an image changes, the filename changes. This allows us to tell the browser to cache the file “forever.”
- Brotli Compression: We compress the JSON payloads and JavaScript bundles using Brotli, which is more efficient than standard Gzip.
Conclusion: Engineering for Beauty
At GiantByte, we believe that high-performance software is a prerequisite for a high-quality brand. For the Kris Friesen project, the technology had to be invisible. The goal wasn’t for users to think, “Wow, this is a fast React app.” The goal was for them to get lost in the art without a single technical hiccup.
By combining a Django-powered cursor API with a virtualized React frontend and a smart media pipeline, we created a gallery that is as stable as it is beautiful.
Want to see the business impact of this architecture?
Check out our Kris Friesen Art Case Study to see how we turned these technical wins into a seamless user experience that showcases art the way it was meant to be seen.