How to Optimize Images on Shopify

Shopify automatically optimizes images delivered through its storefront CDN: it can resize and compress them and select a supported format for the visitor’s browser. You generally do not need to manually compress images before uploading. The useful work is choosing a strong source image, matching its format and aspect ratio to its purpose, setting crops deliberately, adding descriptive alt text, and measuring the actual storefront before installing an optimization app.

This guide covers product photos, collection grids, banners, accessibility, performance checks, common problems, and how to capture a clean screenshot of a Shopify page for review. Shopify’s recommendations and limits below come from its image upload guidance, store performance guide, and product media documentation.

1. Start with the best source image you have

Keep an original, high-quality source and upload that to Shopify. Shopify says uploaded images are not compressed in the admin, while storefront delivery can apply optimization. Uploading an already heavily compressed image can leave visible artifacts that delivery optimization cannot restore.

Before upload, make sure the image has the detail, color, and framing needed for its largest placement. For product photography, check that the subject is sharp and that important details are visible when the image is viewed at product-page size. Avoid enlarging a small source image to meet a dimension recommendation: more pixels do not recreate missing detail.

2. Choose a suitable image format

Image use	Good source choice	Why
Product photography, banners, slideshows	JPEG	Suitable for photographic images.
Logos, icons, line art, graphics with transparency	PNG	Preserves sharp edges and transparency.
Animated image	GIF, where needed	Shopify says animated GIFs may be delivered as animated WebP.

Shopify lists JPEG, progressive JPEG, PNG, GIF, HEIC, and WebP in its image guidance. Supported browsers may receive WebP or AVIF, and the delivered format can depend on browser support. Do not assume that every visitor receives the same format or that you need to convert every source file to WebP yourself. Shopify notes limitations for SVG transformations such as resizing and cropping, so use a raster format when those operations are needed.

3. Size product images for their largest intended display

Shopify allows product and collection images up to 5000 × 5000 pixels or 25 megapixels, and the file must be under 20 MB. Shopify says 2048 × 2048 pixels usually displays best for square product images. Treat that as a useful recommendation for square product imagery, not a requirement for every image or every layout.

Different storefront placements need different displayed sizes. Shopify can generate size variants for locations such as a product detail view and a smaller collection image. Choose a source that looks good at the largest intended display; uploading an unnecessarily huge image is not a substitute for diagnosing how the theme requests and displays images.

Use the product’s intended aspect ratio when practical.
For collection grids that should align, keep product image aspect ratios consistent.
Preview the result on desktop and mobile; a theme may use different crops at different widths.
Stay within Shopify’s documented image dimension and file-size limits.

4. Prevent unwanted crops in product cards and banners

A theme section determines the shape of its display area. A banner or slideshow can crop an otherwise correctly uploaded image because the section’s aspect ratio differs from the source image’s. The crop may also change between a wide desktop layout and a tall mobile layout.

Open the relevant section in the theme editor and inspect its image sizing or crop settings.
If available, use a setting that adapts the section to the first image, or select a section ratio closer to the source image.
Choose a source image with a suitable aspect ratio when the section must keep a fixed shape.
Set an image focal point if your theme supports it, then check that the subject remains visible on both mobile and desktop.
Preview the live storefront at the widths customers use. Theme versions expose different controls, so follow the options available in your theme.

For a product grid, consistency is often more important than matching each original photograph’s exact shape. For a hero banner, preserving the subject’s focal area across screen sizes may matter more. Use the theme’s controls and a suitable source image together.

5. Add accurate, concise alt text

Alt text communicates meaningful image content to people who cannot see the image and can be used by assistive technology. Describe the image in context, briefly and accurately. Do not turn it into a list of search keywords.

For product media, open the product in Shopify admin, select the media, and add alt text. For theme images, use the image control in the theme editor. Shopify recommends 125 characters or fewer for media alt text and states a 512-character maximum. The recommendation is a practical target; write what the image shows rather than padding it to a particular length.

For example, “Blue linen shirt with a button front, shown on a model” is more useful than “shirt blue linen clothes fashion buy online.” If an image is purely decorative and adds no information, follow the theme’s accessibility behavior rather than adding a misleading description.

6. Measure storefront performance before installing an app

Shopify identifies Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP) as core performance measures. Its performance overview describes an LCP of 2.5 seconds or less as good. That is a metric threshold, not a promise that image work alone will produce a specific improvement.

Measure the affected page using PageSpeed Insights and note the page, device context, and reported metrics.
Check whether large images or the number of images shown contribute to the page’s work.
Review theme code, apps, and third-party scripts as well as image choices; Shopify identifies all of these as performance factors.
Make one change at a time and measure again under comparable conditions.
Before adding an image app, identify the specific problem it solves and assess its effect on the theme and page performance.

Image optimization can be one part of improving a storefront, but the cited Shopify guidance does not establish a typical speed, conversion, or ranking gain from image optimization alone. Measure your own page rather than relying on a promised effect size.

7. Review a Shopify page at the right viewport

A screenshot is useful for checking how a crop, product grid, or banner appears at a specific viewport. It does not replace performance measurement: use PageSpeed Insights and the performance metrics above to diagnose loading and responsiveness.

Capture a page with a browser you control

For a one-off review, open the storefront in your browser at the viewport you want to inspect and capture the page using your browser’s screenshot feature. For repeatable captures, use a browser automation tool configured with the target viewport and full-page capture. The exact setup depends on your existing tooling; verify that the page has finished loading and that lazy-loaded images have appeared before capturing.

What to inspect in the capture

Are product subjects centered and visible in their cards?
Do collection rows align where the design expects consistent crops?
Does the banner retain its important subject on mobile and desktop?
Are images missing, blank, or still showing a loading placeholder?

8. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request can return a screenshot or PDF. Its cookie and consent handling accepts the banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. AI agents can use its MCP server tools, including take_screenshot, get_page_info, and capture_pdf.

Here is a runnable cURL example for a storefront page; replace the URL and API key with your own. See the ScreenshotNeo API documentation for options such as viewport and full-page capture.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://your-store.myshopify.com \
  -o shopify-homepage.webp

Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. The MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots. Sign up for 1,000 free screenshots a month, with no card.

9. Troubleshooting common image problems

Problem	Likely cause	What to do
Product image looks soft or pixelated	The source lacks detail at its displayed size, or it was compressed too aggressively before upload.	Use the best quality original available and check the largest intended placement. Avoid enlarging a small source and expecting detail to return.
Product image is rejected on upload	Dimensions exceed Shopify’s documented allowance, or the file is 20 MB or larger.	Check that it is no larger than 5000 × 5000 pixels or 25 megapixels and is below 20 MB.
Banner cuts off the subject	The section’s display shape differs from the source aspect ratio, or the focal point is poorly placed.	Review section crop controls, try a closer source ratio, set a focal point if supported, and inspect mobile and desktop.
Collection cards do not line up	Source aspect ratios vary or the theme handles image sizing differently.	Use consistent source ratios where the design expects aligned rows and review the theme’s image sizing settings.
Browser receives an unexpected image format	Shopify’s delivery format selection depends in part on browser support.	Use a supported source format for the image type and check behavior in the target browser. Do not assume a single delivery format for all visitors.
Images appear blank in a screenshot	The page or lazy-loaded images had not finished loading, or a request failed.	Wait for the relevant images or a suitable page-ready condition before capture; check the storefront directly to distinguish a capture timing issue from a real page problem.
Page remains slow after image changes	Theme code, apps, third-party scripts, or other page work may be contributing.	Review measured performance and inspect other contributors before adding an app. Change one factor at a time and measure again.
Alt text is not present on a product image	Alt text may not have been added to that specific media item.	Open the product media in admin and add a brief, accurate description; check theme images separately in the theme editor.

10. Cost and reliability notes

Shopify’s built-in storefront image delivery covers automatic resizing, compression, and supported format selection, so an optimization app is not an automatic prerequisite. Consider paid tools only after you can describe a remaining need and measure whether the tool affects it. Since apps and third-party code can also affect store performance, review their impact rather than assuming an app improves the page.

For visual reviews, use consistent URLs, viewport sizes, and page states so captures can be compared. Check that a page and its lazy-loaded images have loaded before capture. A screenshot can help review layout and cropping, but it cannot establish LCP, CLS, or INP; use performance measurement for those questions.

Frequently asked questions

Do I need to compress images before uploading to Shopify?

Usually no. Shopify says to upload the best quality image you can provide; its storefront CDN handles delivery optimization.

What size should square product images be?

Shopify says 2048 × 2048 pixels usually displays best for square product images. The right dimensions still depend on the image’s intended layout and source quality.

Does Shopify convert images to WebP?

Shopify says supported browsers may receive WebP or AVIF and that delivery can vary with browser support. Do not assume every visitor receives WebP.

Will optimizing images improve my search ranking?

The cited Shopify guidance does not give a guaranteed ranking or speed improvement from image optimization alone. Use accurate alt text and measure your storefront’s actual performance.

Do I need an image optimization app?

Not by default. First check what Shopify’s CDN and your theme already do, then measure a specific remaining problem and evaluate an app’s effect on performance.