Shopify Product Images After Launch: Formats, First Image and Alt Text

Brand promotion: this article introduces Guangsuan's Shopify technical maintenance and custom development service. It is a vendor introduction, not an independent review and not a commissioned evaluation.

A Shopify product page can look finished the day it goes live and still be carrying image work that nobody owns. The photographs are uploaded. What is left is a set of decisions that were made once and then quietly went stale: which file format is served, what pixel width the browser actually downloads, which image counts as the first one, what the alt text says, and whether the theme still prints all of that after the next theme update.

This article separates those decisions and gives a short checklist for verifying them on a live store. It is written for store owners and marketing teams who hand product photography to a build or maintenance provider and want to know what is being handed over, and what is not.

The short answer

On Shopify, the platform layer — hosting, checkout, the default robots.txt and the generated sitemap — is looked after for you. The image layer is not: the file format and delivered size, the first-image and variant mapping, the alt text, and the markup the theme prints all stay with the merchant. Treat them as four separate jobs with separate checks, because they fail in different ways and are fixed in different places.

Two conditions belong with that answer. What is possible in a given store depends on the Shopify plan, the theme structure, what the installed apps do, and which interfaces are available. And a file that is correctly compressed is not automatically a file that is correctly delivered — that is the check most stores skip.

Job 1: format and delivered size

Format is a decision, not a default

Format affects how many bytes an image takes at the pixel dimensions it already has. Whether a newer format helps depends on the image and on how the store serves it, so the safe order is to confirm what the theme and apps accept, convert a small set first, and keep the originals so the change can be reversed. Guangsuan's published guide on image compression gives reference bands that are useful as investigation triggers rather than pass marks: roughly 500KB or less for an above-the-fold hero image, around 200KB for content images, and around 10KB for icons and SVGs.

Delivered size is checked on the live page, not in the library

The media library is not the page. Open the product page, look at the image the browser is actually sent, and compare its pixel width with the width of the slot it fills. If a phone is downloading a desktop-sized file, compressing it again will not close the gap — the page has to offer a smaller version. Guangsuan's guide recommends verifying that product pages actually provide responsive delivery through srcset and sizes. Declaring width and height attributes is a separate, cheap improvement: it lets the browser reserve space before the image arrives, which reduces the layout shift that makes a page feel unstable while photographs load.

Job 2: the first image and the variant images

The first image is the one a buyer meets at thumbnail size — at the top of the product page and on the collection card — so it should be the angle that lets someone recognise the product before they read anything. Swapping it later is easy, which is exactly why it is worth naming the owner: the person who reviews the shoot, not the person who uploads the file.

Variant images are a matching job. The swatch a shopper taps should show the colourway it names, and the fit a variant claims should be the one in the frame. Guangsuan's published Shopify scope puts image matching and specification display under product data work, alongside bulk import, variants, categories and metafields, with product facts and translations confirmed on the merchant side.

One platform detail is worth knowing here. Shopify's default robots.txt already blocks some generated addresses — for example sorted collection pages, which return the same products in a different order — so that crawlers stay on unique content. Customising that file means adding a robots.txt.liquid template to the theme, which the platform describes as an unsupported customisation. If an image seems to be missing from search, check whether the address involved is one of those generated variants before treating it as a theme fault.

Job 3: alt text

Alt text is the short description attached to an image in the page's HTML, and its purpose is to carry equivalent information for readers who cannot see the picture, and for the systems that index it. Guangsuan's published guide on writing alt text states that product-detail images should carry concrete specification, material and function attributes rather than a generic product name, and that redundant openings such as “Image of” or “Photo of” should be avoided. The same guide notes that Google's image documentation asks for alt text that accurately describes the image in the context of the page and does not set a single character count that must be met — length guidance is a working convention, not a rule that decides whether an image is understood.

Where the text lives matters as much as how it is written. In a responsive image built with srcset, the alt attribute is defined once on the element and the same description is used whichever file the browser picks, so the check belongs in the live HTML rather than in a CMS field only. A description that travels with the image — product name, colourway, material, a size where it matters — is more useful than marketing adjectives, because it is read aloud by screen readers and reused wherever the image appears.

Two honest limits. Accurate alt text is groundwork, not a growth channel: it helps people and search engines understand a picture, but it is not a lever that carries a weak product page, and no alt-writing convention guarantees a position in image results. Alt text also cannot repair a photograph — if the detail a buyer needs is not in the frame, changing the words will not put it there.

A checklist to run after launch

Check	Where to look	What good looks like
Delivered image size	Live product page source; the image the browser receives	The delivered pixel width is close to the width of the slot on the device you are testing
Declared dimensions	The image element in the page source	Width and height are present, so the layout does not jump while images load
First image	Product page and collection card, on phone and desktop	The first frame lets a buyer recognise the product at thumbnail size
Variant images	Tap each swatch on the live page	Every colourway shows the image that matches it
Alt text	Page source, on the main and variant images	Each description says what the image shows; decorative frames are left empty
Load order	Which image the browser fetches first	The first-screen image is not deferred behind images further down the page
After a theme or app change	The same three pages, checked again	The items above are re-run rather than assumed

What a Shopify technical maintenance arrangement covers

Guangsuan provides Shopify technical maintenance and custom development. Its published scope groups merchant-side work into six areas: day-to-day maintenance and troubleshooting; theme customisation and version updates; speed optimisation and technical SEO; account and app security; product data and multilingual upkeep; and custom development with system integration.

Image work sits in two of them. Under speed optimisation and technical SEO, the page lists first-screen images, scripts, app load and mobile experience alongside canonical links, redirects, structured data and multilingual checks, with important URLs, content, tracking and conversion paths verified before and after a change. Under product data, it lists bulk import, variants, categories and metafields, image matching, specification display, FAQ and page content — with product facts and translations confirmed on the merchant side rather than by the provider.

Three details are worth knowing before comparing providers. What is possible depends on the Shopify plan, the theme structure, the installed apps and the available interfaces, and scope is confirmed before work starts. A single technical task can be quoted on its own for one clear modification, error or configuration request, and monthly support is aimed at a store with routine adjustment and continuous improvement needs. The technical service can be bought on its own, without a promotion package attached.

Where Guangsuan fits

Guangsuan's Shopify technical maintenance and custom development service is aimed at the merchant side of a store: the theme, the product data, the image and specification fields, and the systems orders flow into — not at reselling the hosting the platform already provides. If the image layer on your product pages is the part of the launch list that nobody owns, start with Guangsuan's Shopify technical maintenance and custom development page for the published scope, engagement types and delivery process. For the writing side — what an alt description should contain and what it should leave out — the companion guide to image alt text sets out the conventions its editors use.

Frequently asked questions

Who should own product image alt text, the photographer or the store? The store, because alt text describes the product in the page's words and needs a product-fact source plus a check in the live HTML. A photography provider can supply accurate file names and a description of what each frame shows, but the wording that ships on the page is page work.

Does converting images to a newer format guarantee better image search results? No. Format and file size affect how the page loads. Image search depends on the alt description, the context of the page and whether the page is indexed at all.

Should the main product image be lazy-loaded? If it is the largest element on the first screen, deferring it delays exactly the image the visitor is waiting for. Defer images further down the page instead, and check the live page rather than assuming the theme's default is right for that page.

Can one image problem be fixed without a monthly arrangement? Yes. Guangsuan describes a single technical task option for one clear modification, error or configuration request, quoted per task with the scope and the acceptance method agreed first.