Product Image Galleries on Hyva: Zoom, Video, and 360 Spin Without Hurting Magento LCP

On a Magento product page, the main gallery image is usually the Largest Contentful Paint element, so the gallery decides your LCP score. On Hyva you can add zoom, video, and 360 spin without slowing that first image, as long as the first image ships in the server HTML with high fetch priority and everything else loads after it.

Most product page performance work goes to scripts, fonts, and server response time. The gallery gets treated as a design decision. That is a mistake, because the gallery holds the single heaviest asset above the fold and usually the one Google measures. This guide covers how the Hyva gallery renders, where rich media goes wrong, and a loading order that keeps the page fast while the gallery gets richer.

Why the gallery decides your product page LCP

Google counts LCP as good at 2.5 seconds or less and poor above 4.0 seconds, measured at the 75th percentile of real visits. Google’s own guide to optimizing LCP splits that time into four parts: time to first byte, resource load delay, resource load duration, and element render delay. The two delay parts should be close to zero.

A product gallery can damage all three of the parts that come after the first byte:

• Load delay. If the main image URL only appears after JavaScript runs, the browser cannot find it while it scans the HTML. The request starts late.
• Load duration. An oversized hero image, or a hero competing with thumbnails, video posters, and spin frames for bandwidth, downloads slowly.
• Render delay. If the gallery hides the image until a slider script sets it up, the image can finish downloading and still not paint.

The old Luma gallery, Fotorama, is a well-known example. It builds the gallery in the browser, works out its dimensions from the first loaded image, and starts with a container that has no height. That causes layout shift and keeps the main image waiting on a script. Fixing this is one of the clearest wins when stores move from Luma to Hyva development services, but Hyva does not protect you on its own. A heavy zoom library or an autoplaying video added later can undo the gain.

How the Hyva gallery renders out of the box

The default Hyva theme renders the gallery from a phtml template with Alpine.js for interaction. Settings in view.xml meant for Fotorama do not apply to it, and the default gallery has a short list of behaviour options rather than a long styling configuration.

A few facts from the Hyva documentation are worth knowing before you change anything:

• Image sizes still live in view.xml. Each image type gets a width and height. Those values drive image generation and the width and height attributes in the HTML, which is what stops layout shift.
• Swatch switching is configurable. The gallery_switch_strategy setting decides what happens when a shopper picks a colour on a configurable product. append adds the new images to the gallery and replace swaps them in.
• Product video is supported. From Hyva Default Theme 1.3.6, every native product video option works except “Autostart base video”.

For more control, the Hyva UI product gallery components give you four ready-made versions. Current versions are built on Hyva Theme 1.4.

Choosing a gallery: Hyva default, Hyva UI, or a third-party module

Our default advice is to start with the Hyva default gallery or a Hyva UI version and only add a third-party module for a feature those cannot cover. Check that any module states Hyva compatibility, then test its script weight on a real product page before it reaches production.

Some useful details about Hyva UI behaviour:

• The magnifier works only on devices without touch. Touch users get native pinch to zoom, which avoids conflicts with swiping.
• Thumbnail direction, arrows, and navigation style (thumbs, dots, or a counter) are set in view.xml under the gallery variable, with a nested magnifier block for zoom level and trigger.
• Not every version supports every option. Each gallery ships with a README, and that, plus the release notes for your Hyva UI version, is the source of truth.

The loading order that keeps rich media fast

The rule that matters most: the shopper sees one image first, and that image gets everything. Every other asset in the gallery waits its turn.

1. Put the main image in the server HTML

The src and srcset of the first gallery image should be in the HTML Magento sends, not injected by Alpine.js after load. That lets the browser’s preload scanner find it right away. If your gallery template builds the main image from a JavaScript data object, render a plain img tag for the first image on the server and let Alpine take over from there.

2. Mark it as the priority

Add fetchpriority="high" to the main image and leave out loading="lazy". Google’s Fetch Priority guide describes a Google Flights test where raising the priority of the LCP image cut LCP from 2.6 to 1.9 seconds. Results on your store will differ, but the direction is consistent. Use high priority on one image, not five. Marking every thumbnail as high priority cancels the benefit.

3. Reserve the space

Use the width and height from view.xml, plus a CSS aspect-ratio on the gallery container, so the slot is the right size before any pixel arrives. Use the same aspect ratio across your product photography if you can. A gallery whose images change shape between slides will shift the page every time a shopper swipes.

4. Push thumbnails and hidden slides down

Thumbnails and slides the shopper cannot see yet should be lazy loaded or marked fetchpriority="low". Lazy loading alone is not always enough: the browser can treat images in a carousel as close enough to the viewport to fetch early, which puts them in competition with the main image.

5. Serve the right size and format

The main image should be sized for the slot it fills, with a srcset so phones do not download desktop images. Modern formats help the most here. Our guide to WebP and AVIF images on Hyva covers conversion and fallbacks in detail.

Zoom without the weight

Zoom is where stores pick up the most unnecessary JavaScript. Older Magento zoom extensions often bring jQuery plugins that Hyva removed for good reason.

There are three sensible approaches, from lightest to heaviest:

1. Native and CSS zoom. On touch devices, pinch to zoom on a large image is free and familiar to shoppers. On desktop, a hover magnifier can be built with a few lines of Alpine.js and CSS transforms.
2. The Hyva UI magnifier. If you use version B or D, the magnifier is already there and set through view.xml. No extra library needed.
3. Deep zoom modules. For products where shoppers inspect fine detail, such as jewellery, fabric, or machine parts, a deep zoom viewer that loads image tiles on demand makes sense. Load it only when the shopper starts zooming, not on page load.

The key point for all three: the high-resolution zoom image should never be the image that loads first. Load the slot-sized image for LCP, then fetch the zoom version on hover, click, or pinch.

Product video without the player cost

Magento supports YouTube and Vimeo product videos natively. Adobe’s product video documentation explains the setup: you add the video URL under Images and Videos on the product, and YouTube links need a YouTube Data API key in the catalog configuration.

The problem is the embedded player. A standard YouTube iframe pulls in a large amount of JavaScript and several third-party connections, often before the shopper has shown any interest in the video. Our audit guide on third-party script bloat on Hyva explains why those connections add up.

The fix is a facade:

• Show a poster image with a play button in the gallery slot.
• Load the real player only when the shopper clicks play. Open source projects such as lite-youtube-embed use this pattern, and it is simple to rebuild in Alpine.js.
• Never make the video the first slide. A video as the first gallery item turns the poster into your LCP element and invites autoplay, which browsers often block anyway.
• Leave autoplay off. The Hyva UI docs warn that autoplay makes pages slower because video data loads as soon as a video becomes active.

If you host video yourself, the same rules apply. Use a lightweight poster and preload="none" on the video element, and start loading only on interaction.

360 spin: the most expensive gallery feature

A 360 viewer is a sequence of images, often several dozen frames, played as the shopper drags. A full-resolution frame set can easily weigh more than the rest of the product page combined. Done badly, it can outweigh every other optimization on the page.

A sensible 360 setup on Hyva looks like this:

1. Show a normal image first. The first gallery slide stays a standard product photo. The 360 viewer sits behind a thumbnail or a “Spin” button.
2. Start the viewer on intent. Load the viewer script and frames when the shopper opens the 360 slide, not on page load. Starting it while it is hidden also tends to cause sizing bugs, because the viewer cannot measure a container it cannot see.
3. Preload frames once the viewer opens. Loading frames one by one during a drag causes flicker. Once the shopper opens the viewer, fetch the full set at low priority with a light loading indicator.
4. Compress hard. Spin frames do not need the quality of a hero image. Smaller frames in a modern format load faster and spin more smoothly.
5. Ask whether you need it. For many catalogs, five well-shot angles and a short video do the job of a 360 spin at a fraction of the weight. Spin earns its cost on products where shape and finish drive the purchase.

Configurable products and swatch switching

When a shopper picks a colour, the gallery swaps images. On large configurable catalogs this is a quiet source of slow interactions, because the swap can trigger a burst of image requests and DOM work right when the shopper is deciding.

• Choose replace or append in gallery_switch_strategy on purpose. replace keeps the gallery short and focused. append can make sense when shared lifestyle images should stay visible.
• Preload only the first image of the selected variant, not its full set.
• Keep the swap logic light so the response to the click stays fast. Our guide to reducing INP with Hyva Alpine patterns covers how to keep click handlers from blocking the main thread.

The same discipline applies to category pages. Filtering and listing images face their own trade-offs, covered in our piece on layered navigation performance on Hyva.

How to measure the gallery, not just the page

Lab tests are useful for debugging, but the score that counts is field data from real shoppers. A practical routine:

1. Find the LCP element. In Chrome DevTools, record a performance trace of a product page with mobile throttling on and confirm the LCP element is the main gallery image. If it is a video poster, a badge, or a text block, fix that first.
2. Read the four LCP parts. If resource load delay is large, the image is being found late. If load duration is large, the image is too heavy or competing for bandwidth. If render delay is large, a script is holding back the paint.
3. Check the request order. In the network panel, the main image should be one of the first image requests and marked high priority. Thumbnails, zoom images, video assets, and spin frames should come later.
4. Test real product types. Run the checks on a simple product, a configurable product with many swatches, and your most media-heavy product. Gallery problems often show up only on the heaviest templates.
5. Watch field data over weeks. Changes take time to show in Chrome UX Report data and Search Console, so judge by the trend, not the next day’s number.

Where this fits in a wider Hyva project

Gallery performance is rarely a standalone project. It usually comes up during a Luma to Hyva migration, a PDP redesign, or a Core Web Vitals clean-up. If you are on Magento or Adobe Commerce, it pays to settle the gallery approach early, because photography standards, aspect ratios, and video hosting choices are cheaper to fix before a redesign than after. Our team handles this as part of Magento development services, from template work to image pipelines.

Teams comparing platforms run into the same physics everywhere. Shopify development, Shopware development, and BigCommerce development projects all live or die on the same rule: one priority image, everything else deferred. The tools differ by platform, but the loading order does not.

Bemeir builds and tunes Hyva storefronts on Magento and Adobe Commerce, gallery and media performance included. You can read more about Bemeir and the technology partners we work with across hosting, search, media, and performance.

FAQ

Does the Hyva gallery support product zoom?

Yes. The default Hyva gallery covers basic behaviour, and the Hyva UI gallery versions B and D add a configurable magnifier that works on hover or click, with an option to use it in fullscreen. On touch devices the magnifier is turned off and shoppers use native pinch to zoom, which avoids conflicts with swiping.

Should I lazy load product gallery images in Magento?

Lazy load everything except the main image. The first gallery image is usually your LCP element, and lazy loading it delays the request. Give it fetchpriority="high", and give thumbnails and hidden slides loading="lazy" or fetchpriority="low" so they do not compete with it.

Can I use YouTube product videos on a Hyva storefront without slowing it down?

Yes, if you use a facade. Show a poster image with a play button and load the YouTube player only when the shopper clicks. Keep video out of the first gallery slot and leave autoplay off. Magento’s native product video feature works on Hyva Default Theme 1.3.6 and later, with every option except autostart supported.

Is a 360 product viewer worth the performance cost?

Only for products where shape and finish drive the decision, such as footwear, furniture, or equipment. When you use one, keep a standard photo as the first slide, load the viewer only when the shopper opens it, and compress the frames heavily. For many catalogs, a few strong angles plus a short video work just as well for far less weight.

Do I need a third-party gallery module on Hyva?

Usually not. The Hyva default gallery and the Hyva UI versions cover thumbnails, zoom, fullscreen, video, and grid layouts. Reach for a third-party module only for specialist features like deep zoom or 360 spin, confirm it supports Hyva, and measure its script weight on a real product page before launch.