Why are my product images still too large after resizing?

Store Design

Topic summary

Main issue: Product images appear oversized on product pages despite being resized (from 20MP originals to 1024×1024, then 800×600, which hurt quality). A separate collection URL duplication (“east-coast” vs “East Coast”) also occurred.

Key clarifications and perspectives:

  • Duplicate collection view was caused by linking both the collection and a tag; Shopify enforces lowercase slugs, so URL case can’t be changed.
  • One participant felt image size looked fine; the store owner wanted smaller display. Grid size on collection pages can be adjusted via products-per-row.

Actions taken:

  • Helper requested and received theme access; added CSS to constrain the product wrapper’s max-width (set to 1000px) in style.css.
  • Additional CSS provided to limit product image container to 50% width and cap the carousel stage width. Both snippets were added at the bottom of style.css.

Outcomes:

  • Store owner reports the product images now look better; changes should apply across all products. Future tweaks involve adjusting the pixel values (e.g., max-width).

Status and open items:

  • Primary issue effectively resolved for the original theme (Susie).
  • A new participant using Pipeline can’t find style.css and seeks help; unresolved.

Notes: Screenshots and CSS code snippets were central to understanding the fixes.

Summarized with AI on January 5. AI used: gpt-5.
3

Hi. Thank you for your reply.

The tag fixed the directory issue. That fix has been noted, don’t tag in the menu editor. One day i might get the hang of collections, they confuse me so much.

Yes, I found the option to edit the number of products on a row, thanks.

As for the product pages, I think the images are way too big.

My product on my product page takes up half the width of the screen and the full height.

Nickahola_0-1632423315109.png
Nickahola_0-1632423315109.png1366×768 163 KB

Yet any other regular website has an image that doesn’t take up anywhere near as much screen/page space:

Nickahola_1-1632423439953.png
Nickahola_1-1632423439953.png1366×768 173 KB

I don’t know how to get my images to be reduced in size like this.