E-commerce Product Photography: A Developer's Guide

Your store owner clients ask about product photos constantly, and developers end up owning the answer whether they like it or not. The photos a client uploads decide how fast the product page loads, how it looks on a phone, and whether the gallery code you wrote actually gets used. This guide covers the photography basics your clients need, plus the parts that land on your side of the build: image sizes, formats, lazy loading, and alt text. It is written for the developers who build Shopify and WooCommerce stores and then get asked why the product pages look off.

Why Your Photos Carry the Sale

People buy what they can see clearly. If the photo is dark, blurry, or cropped so tight that the handles disappear, the shopper moves on. They do not email you to ask what the product really looks like. They open another store.

Good photos do three quiet jobs. They show the product honestly, so the buyer knows what will arrive. They make the store look organised and trustworthy, which matters a lot for a small brand nobody has heard of yet. And they cut down on returns and questions, because fewer surprises arrive in the parcel.

Start With the Light You Already Have

Lighting is the single biggest lever, and it costs nothing to fix. A modern phone takes a fine product photo when the light is right. The same phone takes a poor one under a yellow ceiling bulb at night.

Shoot near a large window in daylight. Put the product to one side of the window rather than straight in front of it, so the light falls across the product instead of flattening it. If the sun is strong, hang a sheer white curtain over the glass to soften it. Overcast days are a gift. Clouds spread the light evenly and kill harsh shadows.

If one side of the product falls dark, prop a sheet of white card or foam board on that side. It bounces light back and opens up the shadow. A piece of white poster board costs almost nothing and lasts for months.

Two rules to keep. First, switch the phone flash off. Flash flattens texture, blows out highlights, and puts a hard shadow behind the product. Second, shoot every product in the same light. A catalogue shot half in daylight and half under warm bulbs looks like two different shops stitched together.

A quick example from our own work: a seller of handmade leather wallets was photographing stock on a desk under a tube light. The leather looked orange and the stitching vanished. We moved the shoot to a table by a window, added a white card on the shadow side, and the same phone showed the grain and the stitching clearly. Nothing else changed.

Keep the Background Quiet

The background has one job: stay out of the way. A busy table, a patterned bedsheet, or a cluttered shelf behind the product pulls the eye away from what you are selling.

For the main photo, use white, light grey, or another plain neutral surface. White poster board, plain fabric, matte wrapping paper, or a clean tabletop all work. Keep it simple and keep it the same across the whole category.

That does not mean every photo must look identical. Use the clean shot as the first image, then add context shots. A candle seller might show the candle on a bedside table second, then a close-up of the label, then the box it ships in. The first image sells clarity. The later images sell the feeling of owning it.

Consistency is what makes a store look professional. When we audit a store, we open the category page and look at the grid as a whole. If every product sits in the same frame with the same background tone, the shop looks like a brand. If every listing has a different background, a different crop, and a different colour cast, it looks like a jumble sale, even when the products are good.

Show the Angles That Answer Questions

One photo rarely answers every question a buyer has. A handbag buyer wants the front, the back, the straps, the inside, and the stitching. A shoe buyer wants the side, the sole, and the material up close.

Build a small gallery that answers the questions before they are asked. A useful starting set is five shots: the full product from the front, a side or back view, a close-up of the detail that justifies the price, the product in use, and a shot that shows scale or what comes in the box.

You do not need five photos for every item. Pick the angles that explain that product. A plain white t-shirt needs fewer angles than a handbag with pockets, zips, and a lining. The test is simple: if a buyer would message you to ask about it, photograph it.

Keep the camera in the same place and turn the product, not the camera. That keeps every shot at the same distance and scale, and the gallery feels organised instead of random.

Crop and Frame Like a Catalogue

Thumbnails decide whether anyone taps. On a phone, your product photo is a small square in a grid, so it has to read at a glance.

Leave a little breathing room around the product. Do not crop off handles, sleeves, soles, or straps. Keep similar products at roughly the same size in the frame, so a customer scrolling through a category does not feel the products jump around. And use the same aspect ratio for every main image. Shopify recommends square images at 2048 by 2048 pixels, which is a solid default for most stores. See the Shopify product photography guide for the full image specs.

Check the result on a real phone, not only on your laptop. Open the category page and the product page on your own phone and look at the thumbnails. This is part of the pre-launch check we run on every store we build: every product image gets looked at on a real phone before the site goes live.

Make the Files Light Without Losing Quality

Good photos can still hurt your store if the files are heavy. A product page with six photos at several megabytes each loads slowly on a mobile connection, and a slow page loses buyers before they see the product. Our guide to website speed vs design covers why that trade-off matters.

Fix the files before you upload them. Resize the photo to the size your store actually shows. A 6000 pixel wide photo from your phone is far bigger than a product card needs. Export at the size your theme uses, and keep the original somewhere safe.

Use a modern format where you can. WebP usually gives a smaller file than JPEG at the same visible quality, and Shopify serves WebP automatically to browsers that support it. WooCommerce sellers can get the same result with an image optimisation plugin.

Compress with a free tool like Squoosh or TinyPNG. As a starting point, try to land a product photo around 150 to 200 KB, then look at it at normal size and zoomed in. If the detail holds, that size is fine. The aim is a page that loads fast and still looks sharp, not the smallest file you can force.

Name the File and Write the Alt Text

Search engines cannot see your photos, so they read the filename and the alt text. Both are easy wins that most small stores skip.

Name the file for the product it shows: brown-leather-wallet-front.jpg tells Google and your future self what the image is. IMG_4821.jpg tells nobody anything.

Alt text describes the image for people who use screen readers, and it helps search engines understand the page. Write what you would say if you were describing the photo to someone on the phone: "Brown handmade leather wallet with six card slots." That is useful. "Wallet leather wallet buy wallet online best wallet" is keyword stuffing, and it reads badly for everyone.

Write different alt text for each angle. The inside view should describe the inside, not repeat the main image. Keep it short, plain, and honest about what the photo shows.

A 10-Point Check Before You Publish

Run through this list before a product goes live:

1. Product clean, no dust, fingerprints, or stray marks.
2. Soft light, colours true to the real product.
3. Background clean and uncluttered.
4. Main image shows the whole product.
5. Extra angles cover the details buyers ask about.
6. Same framing and crop as the other products.
7. File resized and compressed.
8. Sharp on a phone screen, not only on a laptop.
9. Filename describes the product.
10. Alt text describes that exact view.

Photos Are Half the Job

Better photos will lift a store, but they sit inside a bigger picture. A beautiful gallery on a slow, confusing store still loses sales. The checkout has to be simple, the pages have to load fast, and the mobile layout has to work without pinching and zooming.

If your photos look good and sales still feel flat, look at the store around them. That is the work we do at aimEncoders: online stores built to convert, with fast product pages, clean galleries, and a checkout that does not get in the way.

Start with the photos, though. Pick your five best-selling products, reshoot them by a window this week, and watch what changes. Small, steady improvements beat a perfect photoshoot you never get around to.

A Note for Developers

Most of the advice above is for the store owner, but a few things sit squarely in your code.

Serve responsive images. A 2048 pixel square is right for the zoom view, not for the category grid. Use srcset and sizes so the browser picks a small file for a thumbnail and the full file only when the buyer zooms. Shipping the same 200 KB file everywhere wastes bandwidth on every listing page.

Lazy load below the fold. The first product image is usually the largest contentful paint element on a product page, so load it eagerly and lazy load the rest of the gallery. That one change often moves the page's Core Web Vitals more than any other tweak.

Let the platform do the format work where it can. Shopify's CDN serves WebP automatically to browsers that support it, so your job is making sure the uploaded original is sensibly sized, not re-encoding everything by hand. On WooCommerce, an image optimisation plugin does the same job, but check what it actually outputs before you trust it.

Treat alt text as part of the template, not the content. If your theme renders product images without alt text, or repeats the product title into every alt attribute, fix the template. Good alt text comes from the person who knows the product, and your template should make it easy for them to add it per image, not per product.

Finally, set the upload limits and the guidance in the admin itself. A short note in the product editor, such as the recommended size and a reminder to compress, prevents most of the oversized uploads you will otherwise clean up later.

Frequently Asked Questions

How many photos should each product have?
Five is a good starting point: front, side or back, close-up, in use, and scale or packaging. Simple products need fewer. Add angles that answer real buyer questions.

Can I take good product photos with a phone?
Yes. A modern phone in soft window light beats a camera in bad light. Use a tripod or a stable surface, switch the flash off, and keep the light and framing the same for every product.

What size should product images be for Shopify?
Shopify recommends square images at 2048 by 2048 pixels. Resize before upload, compress to around 150 to 200 KB as a starting point, and check the page on a phone.

Does alt text help my store rank on Google?
Alt text helps search engines understand your images and makes your store usable for screen reader visitors. Write plain, descriptive alt text for each image and skip keyword stuffing.

Do I need a professional photographer?
Not to start. Clean light, a plain background, and consistent framing will carry most small stores. Hire a photographer when your catalogue grows or your products need styling you cannot do at home.

Muhammad Asad Ullah is the founder of aimEncoders, a web development agency in Faisalabad that builds e-commerce stores, web apps, and QA-tested websites for small businesses. He writes about the practical side of running an online store: what to fix first, what to skip, and what actually moves sales.