Prepare Product and Blog Images Without Design Skills

Images are usually the heaviest part of a web page and the first thing visitors notice. A photo that is too big slows everything down, and one that is too small looks fuzzy. The good news is that a simple routine, applied before you upload, solves most problems. You do not need design software for any of it.

Why it matters

A Shopify guide updated in September 2026 points out that, on more than 70% of pages, the largest element in the first screen is an image. That means the speed of your biggest picture can decide how fast the page feels. It also cites the 2025 Web Almanac, which reports that a typical home page carried roughly 1,058 KB of images on desktop and 911 KB on mobile. Big pictures add up quickly.

Step 1: choose the right dimensions

Product photos: Shopify suggests square images of 2,048 by 2,048 pixels. A zoom feature needs the image to be larger than 800 by 800 pixels. Uploads are accepted up to 5,000 by 5,000 pixels and 20 MB per image.
Other common slots, according to Shopify’s 2026 size guide: a hero at 1,280 by 720, a blog header at 1,200 by 800 and a thumbnail at 300 by 300, with smaller sizes for phones.
Sharp screens: if an image displays at 200 by 200, supply a 400 by 400 source so high-density screens stay crisp.
Keep the upload bigger than the displayed size, but not enormously bigger. The size on the page is set by your theme, while the file you upload decides the weight.

These are suggestions, and the right numbers depend on your theme. Check your theme’s documentation or the media guidance in your editor.

Step 2: pick a format

JPEG suits photographs.
PNG supports transparency but produces larger files.
WebP gives small files and supports transparency.
AVIF often gives the smallest files for detailed photos, though Yoast recommends keeping a WebP or JPEG fallback for browsers that cannot show it.
SVG is best for logos and icons because it stays sharp at any size.

On Shopify, the platform’s content delivery network creates optimised versions and serves WebP or AVIF where browsers support them, so upload the best-quality source you have rather than a pre-squashed file.

Step 3: compress

For JPEG, WebP and AVIF, lower the quality setting until you can just see a loss, then nudge it back up. Free browser tools such as Squoosh handle this, and TinyPNG is a common choice for PNG files. Targets vary between guides. One suggests keeping files at 200 KB or less, while another puts typical product photos near 300 KB. Treat that range as a sensible starting point and look at the result with your own eyes.

Step 4: name the file

Camera names such as DSC4536 tell nobody anything. Yoast advises starting with the main subject, and Shopify’s guide recommends short, hyphenated product terms. A name like blue-ceramic-mug-front.jpg is better than IMG_0231.jpg.

Step 5: write alt text

Describe what the image shows, as you would to someone who cannot see it.
Keep it concise. Shopify’s size guide suggests staying under 100 characters including spaces.
Mention the page’s topic only where it fits naturally. Do not stuff keywords into every picture.
For purely decorative images, an empty alt value is acceptable. Yoast makes the point that not every image needs descriptive text.
If a picture contains key information, such as a chart, put that information in the text.

Step 6: prevent layout jumps

When a page loads and the text suddenly shifts as pictures appear, it is irritating. Yoast notes that specifying an image’s width and height prevents this. Most modern themes handle it already, but if your pages jump around, mention it to a developer.

A before-you-upload checklist

Resize to a sensible dimension for the slot.
Export as WebP or JPEG, and SVG for logos.
Compress and compare against the original.
Rename with a descriptive, hyphenated name.
Upload, then add alt text.
View the page on your phone and check that it loads quickly.

When it is time to call a developer

Get help if your whole library needs processing, if responsive image settings are missing from your theme, if the main banner is the slowest thing on the page, or if you have an old media library full of oversized files. A developer can automate resizing and set up proper loading behaviour. Take a look at our services page, or at our themes if you are considering a fresh layout with better image handling.