Configuring Product Images for Multiple Display Sizes on a New CMS

Retailers moving away from the discontinued NCR Retail Online platform are often surprised by how much configuration work sits inside what looks like a simple product gallery. Images that looked crisp on the old site can appear stretched, cropped, or pixelated on a fresh CMS, particularly when shoppers view the same catalogue on a phone in a Brisbane café and a desktop in a Sydney office. Getting display sizes right from the start protects the visual story you have spent years building.

The good news is that most modern platforms expose the controls you need without requiring a developer on standby. Whether you have chosen Magento through a Counterpoint partner or a WooCommerce build, the same principles apply: define the breakpoints, generate the renditions, and serve them in the order the browser actually requests them.

Image dimensions and aspect ratios for Australian storefronts

A product image is not one image any more. It is a small family of files, each tuned for a screen width, a zoom level, and a layout slot. Before touching the CMS, decide on a master aspect ratio. Most Australian fashion and homeware brands settle on 4:5 for portrait product shots because it works well on both Instagram-style grids and category pages. Outdoor and sports retailers in Adelaide often prefer 1:1 to keep consistent tiles in dense listings of camping gear or fishing tackle.

Once the master is locked, work backwards. A 1600-pixel wide master scales down to a 1200-pixel hero, an 800-pixel grid tile, a 400-pixel thumbnail, and a 200-pixel cart preview. Keep the focal point inside the central 80 percent of the frame so cropping for square thumbnails does not slice off the product label or the model's face. Naming each rendition consistently, for example tee-navy-1600 and tee-navy-1200, keeps file directories readable when you eventually audit your media library.

If you sell across both metro and regional Australia, remember that NBN connections in places like parts of the Northern Territory or western Queensland can be markedly slower than in Melbourne or Canberra. That makes the smallest renditions more than a cosmetic detail; they are the first thing a remote shopper actually receives.

Choosing formats and compression that suit local bandwidth

JPEG remains the workhorse for product photography because it handles gradients and skin tones cleanly, but WebP and AVIF can shave 25 to 40 percent off file size at the same visual quality. Modern CMSs will convert uploads automatically and store the original alongside the optimised versions. Keep the original PNG or TIFF if you ever plan to print lookbooks or in-store signage out of Perth and Brisbane warehouses.

Aim for under 200 KB on hero shots and under 80 KB on thumbnails. Run a quick visual audit on a calibrated monitor, but also squint at the thumbnail on a five-year-old phone; that is closer to what a budget shopper in Geelong or Townsville will see. Lazy loading should be enabled by default on every image below the fold, and a blur-up placeholder or low-quality image preview keeps the layout stable while the real asset arrives.

Setting up responsive image rules inside your CMS

The configuration step itself varies by platform, but the structure is the same. In Magento, you map a product image role to a renderer inside the theme XML, then attach the breakpoint widths through the view.xml file. In WooCommerce, you typically register custom image sizes in functions.php and regenerate thumbnails with a plugin such as Regenerate Thumbnails. Both approaches share a dependency on the srcset and sizes attributes being written into the final <img> tag, which is what actually tells the browser which rendition to download.

Within your CMS dashboard, define a size for each context: category grid, search results, product detail zoom, related products carousel, cart line item, and email confirmation. The cart image is easy to overlook, but shoppers in Adelaide frequently check email receipts on the train home and a fuzzy logo there undermines trust. After saving the rules, clear the cache and inspect a real product page to confirm each role is pulling the correct file. If you are still wiring the rest of the storefront, it helps to review how your CMS will eventually integrate with existing accounting software so that image paths and SKU references stay aligned across the stack.

Accessibility, privacy and other Australian rules to keep in mind

Alt text is not optional under Australian accessibility expectations and the Disability Discrimination Act, and it also feeds search visibility for category pages. Write alt text that describes the product and its colour, not the photo: "men's navy linen shirt, button-down collar" beats "image1.jpg" every time. If you photograph identifiable people, whether staff models in a Surry Hills studio or customer-submitted reviews from a Brisbane pop-up, you need their consent for commercial use under the Privacy Act 1988.

Metadata stripping is another quiet responsibility. Many cameras and phones embed GPS coordinates into EXIF data, and a product shot taken at your Sydney flagship could quietly publish your store address. Your CMS or image processing pipeline should wipe location metadata on upload. While you are tightening these settings, plan how discounts and promotions will appear beside hero imagery so the price you promote matches the image shown; a clear walkthrough lives in the guide to setting up discount and coupon systems on your new platform.

Testing across devices shoppers actually use in Australia

Browser testing tools give you a rough guide, but real device testing reveals the truth. Borrow or buy a small kit: an iPhone SE for older Safari behaviour, a mid-range Samsung for the most common Android resolution, an iPad for tablet browsing, and a 13-inch laptop for desktop checkout flows. The Australian mobile share of retail traffic now sits well above 60 percent in many verticals, so the phone view is not a secondary concern.

Run each test on a Telstra or Optus 4G connection to simulate a shopper commuting between Parramatta and the CBD, then repeat on a regional Telstra or NBN fixed line. Watch for layout shift, which Google now penalises in Core Web Vitals, and confirm that zoom-in on the product detail page swaps the main asset rather than simply enlarging a low-resolution thumbnail. If you have migrated from NCR Retail Online and want a final sanity check on the storefront as a whole, the main transition hub still lists checklists and partner directories that pair well with this image workflow.

Before you push the updated media library live, regenerate every product image in batches of around 200 during off-peak hours, then monitor server logs for 404s on legacy paths. Setting a single 301 redirect from the old NCR Retail Online image directory to the new CMS path is the cleanest way to retain any external links you have built over the years and to make sure the next person who configures a display size on your store starts from a known, working baseline.