Skip to content
  • There are no suggestions because the search field is empty.

Recommended Image Sizes

When creating content on your site, make sure you're using the optimal image size for a consistent look and feel on your site.

Good images make your pages look great, and the page builder now does most of the work of keeping them fast. When you add an image, the editor sizes it for the spot it's going into, converts it to a modern, lightweight format, and compresses it so your pages load quickly on any device. Your job is mostly to start with a good, large photo.

Remember, we will swap out lifestyle images on our library pages for you. All you have to do is ask! Library lifestyle images can be swapped out video

What to Upload

  • File types: JPG, PNG, WebP, GIF and SVG.

    • Backgrounds (in Edit Column and section settings) accept JPG, PNG and WebP.

  • Start big. Upload a photo at least as wide as the recommended size below.

    • The editor can always make a large photo smaller, but it can't add detail to a small one.

  • Size limit: every image has to fit within 1 MB after the editor compresses it and allmost every photo does.

    • If one doesn't, see "Preparing images that are too large to upload" below.

  • iPhone photos: if your photo is in HEIC format, save or export it as a JPG first.

  • GIFs and SVGs are uploaded as they are, without compression, so they need to be under 1 MB before you upload them. Keep animated GIFs short.

  • SVGs that contain scripts or other code are refused for your site's security. Logo files exported from design programs are normally fine.

Recommended Sizes

  • Sizes are width x height in pixels. The width is what matters most for sharpness. The heights give a consistent look across your page; use whatever height suits your design.

One Column (full width of the page)

  • Recommended: 2340 x 780px
  • Minimum: 1920 x 640px

1-column

Two Column

  • Recommended: 1280 x 690px

  • Minimum: 768 x 415px

2-column-bkrgd

Three Column

  • Recommended: 1280 x 1070px

  • Minimum: 768 x 640px

3-column-inline

Four Column

  • Recommended: 1280 x 1280px

  • Minimum: 768 x 768px

4-column-block-edit

Logo Rows

  • Recommended: 300 x 300px, or an SVG
  • Minimum: 250 x 250px
  • Square images work best.
  • To make a wide logo look right, add white space above and below it in a photo editor until it's square. SVG logos stay crisp at any size.

logo-row-edit

Section Backgrounds

  • Recommended: 2340px wide or more

Column Backgrounds

  • Use the size for the column they're in.
    • For example, 1280px wide for a three-column block.

Things to Note

  • Background images are set to cover the area they're in.
    • To do that, they're cropped and enlarged as needed, but never stretched or distorted.
    • Keep the important part of the photo near the middle so it isn't cropped off on phones or in tall columns.
  • Descriptive file names help search engines and people who use screen readers.
    • For example, "woman-riding-mountain-bike.jpg" is much better than "IMG_354_750.jpg".
  • Our pre-built content blocks come with grey placeholder images: dark grey in Edit Column, and light grey in Edit Content.
    • Replace them with your own images.

Messages You Might See

  • "We compressed this image a lot to fit the 1 MB size limit, so it and any crops of it may look less sharp up close."

    • The image uploaded, but it needed heavy compression to fit.

    • Check that it looks good on the page and if it doesn't, follow the steps in the next section and upload it again.

  • "This image is too large to upload, even after compressing it as much as we can. Try cropping it or resizing it to 1920 pixels wide or less, then upload it again."
    • The image couldn't be made to fit. Follow the steps in the next section.

Prepping Images too large to upload

  • A few photos are too detailed to fit within the 1 MB limit, even after the editor compresses them.
    • These are usually very large photos straight from a camera, wide panoramas, and photos full of fine detail like gravel, leaves, grass, crowds, or the grain in a low-light shot.
    • A few minutes in a photo editor fixes them.
  • You can use any photo editor. Photopea (photopea.com) is free and works in your browser, so these steps use it: 
  1. Open the image.
    1. Go to photopea.com, choose File > Open, and select your photo.
  2. Crop away what you don't need.
    1. Choose the Crop tool (press C), drag the box around the part of the photo you want to show, and press Enter.
    2. Less photo means a smaller file, and a tighter crop often looks better on the page anyway.
  3. Resize it to 1920 pixels wide.
    1. Choose Image > Image Size, make sure the width and height are linked so the photo keeps its shape, set Width to 1920 pixels, and click OK.
    2. For a column image, 1280 pixels wide is plenty.
  4. Save it as a JPG.
    1. Choose File > Export As > JPG, set Quality to about 80%, and click Save.
    2. The file size is shown next to the quality setting; aim for under 1 MB.
  5. Upload the new file in the page builder as usual.
  • On a Mac, you can do the same in Preview: Tools > Crop, then Tools > Adjust Size, then File > Export, choose JPEG and set the Quality slider.
  • Still too large? Crop a little tighter, or try 1600 pixels wide.
    • If you're still stuck, contact us and send the image, and we'll help.

Images for Catalog Products