Image Ratio Templates for Squarespace:

Jump over to this page 👇🏼

Image Ratios + Canva Templates (freebie)

</aside>

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

Table of Contents

Quick Favorite Resources:

OptimizeMyPics - Free Batch Image Converter & Resizer

Bulk resize, rename, & reformat images –all at the same time
- WEBP, JPG, JPEG, PNG, HEIC, HEIF, MP4, MOV
Free, no account necessary, no limits
Works in your internet browser
good at compressing images, but TinyJpg can make the file sizes even smaller

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.

Abbreviation	Name	Size	info
kb or KB	kilobytes	smallest	1,000kb = 1MB (ex: a browser icon or app icon)
mb or MB	megabytes	medium	1,000mb = 1GB (ex: a 500 pg e-book)
gb or GB	gigabytes	large	1,000gb = 1TB (ex: 7 minutes of HD video)
tb or TB	terabytes	largest	1,000tb = 1PB (ex: over 100,000 photos)
pb or PB	petabyte	ginormous

File Formats for Web

Which image format should you use on websites?

Icon Key:

ATTRIBUTES	WebP	JPG	PNG	GIF
smallest file size	✅	☑️	☑️	❌
maintains quality	✅	☑️	✅	❌
Squarespace-compatible	✅ 🆕	✅	✅	✅
supports transparent backgrounds (optional)	✅	❌	✅	✅
supports animation	✅	❌	❌	✅
best for logos	☑️	☑️	✅	❌

<aside> 💡

Important: PNGs & WebPs 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