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>

What’s in this guide? Here’s the quick links + table of contents 👇🏻

• Table of Contents

<aside> <img src="/icons/info-alternate_lightgray.svg" alt="/icons/info-alternate_lightgray.svg" width="40px" />

Quick Favorite Resources:

PIXRESIZE by Squarestylist

• Bulk resize, rename, & reformat images –all at the same time
  • WEBP, JPG, PNG, (accepts HEIC too)
• Free, no account necessary, no limits
• Works in your internet browser
• good at compressing images, but TinyJpg can make the file sizes even smaller

TinyJPG – Compress WebP, PNG and JPEG images intelligently

• Bulk resize images (WebP, JPG or PNG)
• Free, no account necessary, can only upload up to 20 images at once to resize in small batches
• Paid, ~$40/yr (bulk upload 20+ images at once & resize in larger groups)
• Works in your internet browser
• best at compressing images for THE SMALLEST file size possible
• doesn’t convert images from one format to another (ie: JPG → WebP, etc) </aside>

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.

File Formats for Web

Which image format should you use on websites?

• Icon Key:

<aside> 💡

Important: PNGs can have transparent backgrounds OR NOT (because it supports BOTH & whether it does or not depends on your design), while JPGs can never have a transparent background.

</aside>

Common Image Sizes

For different web (digital) use cases:

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

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

| --- | --- | --- | --- | --- |

File Name Tips:

• Name your files with a format like "Brief Description + Business Name" or "Brief Description + Your Name" makes the content of the image and the name of your business searchable in places like your computer's hard drive, the Asset Library in Squarespace, Google Image search, and potentially helps screen readers describe the image to people with visual impairments
• using delimiters in your file names like spaces, dashes -, pipes |, plus signs +, or underscores _
• don't use a colon : in a file name, most computer operating systems don't like that