I need recommendations for the image sizes i should use when building my shopify store using the dawn theme, i’ve done some research and reached the conclusion that dawn the is best performing theme (speed wise ) compared to the other themes . but i know that adding large images will slow it down especially that most of my traffic comes from instagram and tiktok . i’ve read shopify’s article on image size but i’m not sure if i should follow it or not ( Website Image Size Guidelines for 2026 - Shopify ), and whats the best format (I have read that webp is good and its supported by all modern browsers ).
im trying to optimize for speed (on both laptop and ,mobile ) without losing good image quality.
webp is fine. A pretty little trick I used to use, haven’t needed to in a while actually, is that if you take a .bmp and open Windows Paint (YES! That very old, basic image editor!) and save the file as a .png or .jpeg, the compression is pretty awesome - meaning the file size vs quality loss is nice.
You can get very complicated and upload images for all the different sizes that should appear and using css (look it up), set the different img src properties to each one. That would stop the need for the browser to change the size/dimensions of the image.
The key thing to understand before you stress over exact sizes: Dawn plus Shopify’s CDN already do most of this for you. Shopify automatically resizes images per device and serves WebP to any browser that supports it, so you don’t need to manually export WebP or hit precise pixel dimensions, you give it a good source file and it handles the per device serving. So for uploads, go generous but sane: full width heroes and banners around 2000 to 2500px wide, product images around 2048px on the longest side (plenty for crisp zoom), and smaller sections 1200 to 1600px. Don’t upload 5000px camera exports, Shopify just downscales them and you’ve wasted the weight. Upload JPEG for photos (PNG only when you need transparency), and the one thing Shopify doesn’t fully do for you, pre-compress those JPEGs to around 80 to 85% quality with TinyPNG or Squoosh before uploading, which is your real “speed without losing quality” lever. Keep your product images all the same aspect ratio too, so they don’t cause layout shift or odd cropping.
Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.
HI @amr.koura .
Upload product image at 2048x2048px square, collection images at 1800x1000px, and hero images no wider than 1600px . Use the WebP format and compress everything under 20KB before uploading.
Shofy handles responsive sizing automatically.
Squoosh is a free tool thats work great for this.
Do not try to compress your JPEGs to lower quality – Shopify will recompress them anyway with their preset quality setting and image will become larger.
Ensure that image background is really solid, like all white – images direct from camera has some low-contrast pattern/grain/noise which is flat’ish to the eye, but is not really solid, therefore seriously inflates file size.
One trick which did help tremendously is to run extra blur filter over unimportant parts of the image while keeping the actual picture sharp.
Shopify has built-in “Color background” tool in the image editor which may be helpful with background removal/flattening too.
The recommendation from SectionKit can also be used with caution – say, if your hero is blurry anyway, you may want to limit the image dimensions and allow the browser to blow the image up.
Say, sometimes 1600px-wide source image can be stretched 2 times and still look fine.
But the file size would be tremendously less than 3200px-wide image.
Make sure to test your images/site on the ultrawide or big 5k monitor – some sites look ugly on those.
Yes, Shopify’s Website Image Size Guidelines are a good starting point, especially if you’re using the Dawn theme. Dawn is already well optimized for performance, so following Shopify’s recommendations will usually give you the best balance between image quality and loading speed.
I also recommend using WebP wherever possible. It provides excellent image quality with much smaller file sizes, which helps improve both desktop and mobile performance.
One thing that’s often overlooked is that stores can accumulate oversized or unoptimized images over time. It can be helpful to scan your media library to identify large images, compress them without noticeable quality loss, and find images that may be affecting your store speed.
You could try a media optimization app like File Manager & Image Optimizer. It can analyze your media library, compress images in bulk, and help identify files that may be impacting performance, making it much easier to keep your store optimized as it grows.
Good timing on this question, image sizing is one of the most impactful things you can get right upfront rather than fix later.
Formats first: WebP is correct
WebP is the right call. Shopify’s CDN actually converts images to WebP automatically when you upload any JPG or PNG, so if you are uploading through the Shopify admin you are already getting WebP served to supported browsers. No extra work needed on your end.
Sizes for Dawn specifically
Dawn uses a responsive image system so the same image gets served at different sizes depending on the device. The key is uploading large enough that it never gets upscaled, but not so large that even the original is wasteful.
Section
Recommended upload size
Hero / banner
2000 x 800px
Collection page images
1200 x 1200px (square works best in Dawn)
Product images
2048 x 2048px (square)
Blog featured image
1600 x 900px
Logos
400 x 200px max
For your Instagram and TikTok traffic specifically
Most of that traffic lands on mobile. The single biggest win is keeping product images square (1:1 ratio) at 2048px and under 500KB before upload. Shopify compresses further on delivery but starting clean matters.
Use Squoosh (free browser tool) to compress before uploading. Aim for under 300KB for collection images and under 500KB for hero images. You will not see a visible quality difference but the speed difference on mobile 4G is significant.
One thing Dawn does that helps you
Dawn uses lazy loading natively on all images below the fold, so only what is visible on screen loads first. You get a lot of the performance benefit automatically as long as you are not stuffing full-width hero images into every section.
The Shopify article guidelines are fine as a baseline but they are conservative on file size. The numbers above are more practical for a real store.