What’s in this guide? Here’s the quick links + table of contents 👉🏼

Scroll down to learn more! 👇🏼

Image Ratio Sizes in Squarespace:

<aside> <img src="/icons/link_blue.svg" alt="/icons/link_blue.svg" width="40px" /> Jump over to this page:

Image Ratios + Canva Templates

</aside>

• Table of Contents

File Size Terminology:

<aside> <img src="/icons/token_lightgray.svg" alt="/icons/token_lightgray.svg" width="40px" /> Best practice is to aim for a tricky combination of the following:

• the highest resolution you can, AND
• the largest width or height you can, AND
• while keeping the file size small for faster page loading times (print file sizes don't really have limitations) </aside>

<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" /> The 'file size' for a website page is based on how much content you put on the page. The more content that page has, whether it's text, images, videos, etc (though files take up more space than text & buttons, ie: images & videos) –the larger the overall page size will be, which ultimately affects the time it takes for that page's content to load ****for your site’s visitors (ie: it affects ‘page load speed’).

With that in mind, it's important to remember to resize your images & videos so your pages will not load slowly. If you're not sure how to resize your images, here are some resources that may help!

</aside>

Understanding File Sizes

The size (or digital measurement of space) each file takes up on your computer's internal or external hard drive.

Understanding Resolution Sizes

Resolution refers to the clarity or definition of an image is made up of, but has a slightly different meaning in different mediums, such as:

• digital images: how many pixels are in the image, the more pixels there are the higher the definition (aka: high-def, or HD) the image will be
• printed images: how many dots of ink are in the image, the more dots that are printed, the clearer the picture & more detailed the picture will be

| Print vs Digital | Low Resolution (good, but small file size) | Typical Resolution (better, but medium file size) | High Resolution (best, but largest file size) | Abbreviation definition | | --- | --- | --- | --- | --- | | Print | 150dpi | 300dpi | 300+ dpi | dpi = dots per inch | | Web / Digital | 72ppi | 144ppi | 300ppi | ppi = pixels per inch |

Common Image Sizes

For different web (digital) use cases:

• ✨ For different print (physical product) use cases:

File Name Tips: