Complete Guide: how to use & optimize images & videos for websites

What's inside this post: Hide

Today, I'm sharing my favorite tips for optimizing images for the web, including resources for resizing, renaming, understanding pixel dimensions vs. resolution, and handling unusual cropped ratios in website builders like Squarespace.

If you’re confused by ratios like 1:1, 3:2, 4:3 (because,… what the hell??), I'll explain those, and share my best advice for videos too: where to host & find stock videos. Don't worry, all of today’s info on image & video tips & resources is in a freebie here.

As a Squarespace educator and designer with years of experience in graphic and web design (I started in print design in 2006 and transitioned to web design in 2020), my print background gives me a unique understanding of resolution, file size, and dimensions.

Now I’m sharing a brain dump (& resources), and how it applies to website design.

Now, let's dive in!

Understanding Image File Sizes & Resolutions

First we need to understand the difference between image file sizes (dimensions) and resolutions, so let's break them down.

Image file sizes

I made a handy color-coded cheat sheet which will help a lot if you’ve never known or understood the different file size abbreviations. On this cheatsheet, green represents the ideal file sizes for use on websites. As you drift towards yellow, orange, red, and pink, the file size becomes increasingly less useful & damn near impossible to use. So, of these in the cheatsheet, the only file sizes you should really be working with for websites are in KB (kilobytes) or MB (megabytes).

Kilobytes are the smallest file size, and it takes a thousand of them to make up one Megabyte. Simple, right?

vs Image resolutions

Now, let's talk about resolution. This isn't about the height and width of an image, but rather the density of pixels (basically digital dots of color) being used in it.

Each pixel has a “job” to display one tiny piece of the image we see, with a combination of its tri-color system (red, green & blue), where each pixel can also be “on” or “off” which is where the white and black come from. The more pixels you have in the screen, the more detailed the image can be. So, the higher the resolution (pixel density, or pixel count) the cleaner & more high quality the image produced.

For print, the lowest resolution starts around 150dpi (dots per inch). You could go lower, but the quality deteriorates quickly and it won't look great. Dots per inch, is only possible with printer ink, and again, the more dots per inch, the cleaner & more vivid the image printed.

For web, the average resolution of image files ranges from 72ppi to 144ppi (pixels per inch).

I know it may seem overwhelming right now, but once you start applying it, it'll make much more sense. Let's continue to the next section where we'll discuss how to use your images effectively.

Optimal Image Sizes for Different Web Elements

Now, we need to talk about best practices for “web optimized” images, which include both height, width and resolution of an image. To make your site load faster, aim for EACH image to be 250 kilobytes, or less. To achieve this file size, keep your resolution at 72 ppi and make sure the longest side (whether it's the width or height) is only as big as you need it for the space you’ll use it in.

In the same way you wouldn’t put a king size bed in your newborn’s nursery, you don’t need images on web that are 4,000 or even 8,000 pixels wide. Those files will be huge & your screen can’t even take advantage of all the quality, because the page will load much more slowly –excruciatingly slowly if there are more than 1 of those giant images on the page.

So let's break this down based on where you use images on a website:

1. Inline Images or Image Blocks: Whether you're on Squarespace or any other platform, you're aiming for an image around 800-1,000 pixels in width or height (whichever is longest/tallest). This is the sweet spot for inline images that allows them to be good quality without being a big file.

2. Gallery Images: Similar sizing to inline images, but you can go slightly bigger if the images will be “lightboxed” or displayed larger on click, or will display full-width across the whole screen. The resolution should still be 72 or 144, and the longest edget should be around 1,000-1,500 pixels or less.

3. Logos: Logos are usually smaller file sizes because they are graphics & need fewer pixels to display the image content inside. That said, you want a higher quality image for these because it will be displayed so small & lower quality images tend to look fuzzy at those sizes. Ideally, it would be great if you could upload an SVG file because those are lossless (retain quality at any size), but as Squarespace doesn't yet support this, PNGs are your best bet. PNGs give you the option to have a transparent background in the file, but because of this, they are typically larger file sizes than JPGs. Depending on the logo, it can be 800-2,000 pixels for the longest side. Squarespace will likely optimize the image, so make sure your resolution is high enough that it remains clear after optimization.

4. Background Images: Here, you can go up to about 3,000 pixels in width or height, although on average, you may want to stick closer to 2,000 - 2,500 pixels wide. Avoid using portrait images as backgrounds; they're tough to position correctly & it’s a waste of space because the width will need to be large, meaning the height will be WAY larger than necessary, making the file bigger than it needs to be & wasting space in your website’s asset library, and potentially contributing to a slower page load speed. Stick to landscape orientation. You can go up to 500-1,000 kilobytes for these images if you need to, but keep in mind that larger files can slow down your page's load time. A higher resolution is great for these images, as they'll potentially display edge-to-edge on the website.

Aim for a range of 250 to 500 kilobytes per image, always, so that when you need to have one that’s larger, that’s not the norm & it won’t affect your page load speed.

What affects your page load speed?

Squarespace says the overall page size limit should be 5MB (5,000 kilobytes = 1 megabte) or LESS, in order to load quickly. You can read more about page size recommendations from Squarespace here.

The goal is always to ensure your images are just high-quality enough without slowing down your site's loading speed.

Decoding Squarespace's Image Ratios with Canva Templates

Alright, let's dive right into the topic of image cropping and those quirky/confusing ratios you'll see in Squarespace, in places like Summary Blocks, Auto Layout sections, Shop/Event/Blog/Portfolio post thumbnails, & more.

You may already be familiar with the 1:1 ratio, because of social media; that ratio is a square & all 4 sides are exactly the same length.

But what about the rest? Don't worry, I've got you covered. I've created a set of blank Canva templates, all set to high-quality pixel sizes, to help you easily design or crop images to these ratios when needed. These templates will allow you to design your graphics with the confidence that it’ll fit perfectly, without guesswork & accidentally cropping out any crucial elements.

Pro tip: Avoid putting essential text inside these images. It's not accessible and can be easily missed by screen readers.

• 1:1 – As mentioned, this is a square. All sides are equal, and the Canva template I've prepared is 1,920 x 1920 pixels. I chose 1,920 because it falls within the HD size range, ensuring a crisp, clear graphic that you can reduce the quality of when you export in Canva to help get the file size down if needed.

• 3:2 – This one is horizontal and is similar to the shape of a YouTube video. The Canva template for this is 2,880 pixels by 1,920 pixels. Here, the 1,920px side is the shortest (height), and 2,880 is the longest (width).

• 2:3 –This is just the vertical version of 3:2. It's the same dimensions, just rotated 90 degrees. Easy, right?!

• 4:3 – It's basically the same as 3:2, but narrower than 3:2. The longest edge in the Canva template is 1,920 pixels, and the shorter edge is 1,440 pixels.

• 3:4 – Of course, this ratio is the vertical version of it’s pair, 4:3; just rotated 90 degrees.

• 16:9 – This (maybe familiar) standard format is used for YouTube videos, widescreen TVs and more. This is also the same size used for social media videos, but flipped upright (90 degrees) for platforms like TikTok, Instagram Reels & YouTube Shorts. The typical size for HD video in this ratio starts at 1,920 x 1,080 pixels (known as 1080p, the lower end of HD quality).

• Ultrawide or Anamorphic – I'll be honest, I'm totally guessing on this one, since the Squarespace article I referred to didn't include the actual size for this ratio. I'm assuming it's 21:9, so using the ratio calculator (also linked in the freebie too) I put in the ratio at 1,920 and it came out at 2,520 wide.

Remember, these Canva templates can be upsized, and you can modify them once you've accessed them. Now, go ahead and explore these ratios. Happy designing!

Effective File Naming Strategies for SEO

Next, let's chat about naming files. If you want to give your SEO a boost, the way you name your image files can make a difference in several ways. Here's some advice on how to do it right:

Tip 1: Include your business name in the file name.

This is key if you want your images to have a chance to show up when someone searches for your business or similar keywords in Google Images.

Tip 2: Add a brief description in the file name.

Think of this as an alternative to alt text, especially when alt text fields aren't available (like in Squarespace background images; we're all still waiting for Squarespace to add this feature!). The file name ends up in URL of the image where it gets stored and used in the code that makes up your web page, so ya might as well take advantage of that! PLUS this helps you find images easier in your Asset Library, via the search function.

Tip 3: Use delimiters in your file name.

This helps break up long file names and makes them easier to read. You can use dashes, the pipe symbol (found underneath the delete key on a Mac), plus signs, or underscores. You might also consider using these instead of spaces. Honestly, in my experience, spaces, dashes, plus signs, etc., don't seem to make a huge impact on SEO, so it's more about your preferences.

Tip 4: Avoid colons and periods.

These can cause issues with the computer reading the file, so it has less to do with use on the website & more with how it gets stored & read by your computer before you upload it to the web. For example, if you use a period in the middle of the name, everything after the period could be mistaken for the file format designation (ie: .jpg or . Squarespace Asset Libary.jpg). Just trust me on this one, do it & you may start seeing error messages.

Here are a few examples:

• Katelyn smiling, sitting at desk in home office + Launch the Damn Thing®.jpg

• Transferring ownership of a website to a client -- Launch the Damn Thing®! Blog post thumbnail.jpg

• Portrait of Katelyn Dekle sitting at her desk & wearing an excited but goofy smile.jpg

Here are a few examples using dashes, spaces and a dash, underscores, and plus signs.

• the dash (short - , or long –) is often used in place of, or in addition to spaces:

  • example: Katelyn smiling - sitting at desk in home office – Launch the Damn Thing®.jpg

  • example: Katelyn-smiling--sitting-at-desk-in-home-office-–Launch-the-Damn-Thing®.jpg

• spaces are often used on a Mac, because Macs don't force you to put characters in all the empty spaces the way PCs seem to prefer in file names

  • example: Katelyn smiling & sitting at desk in home office - 2023.jpg

• underscores work similarly to dashes, but create more visual space between words in file names

  • example: Katelyn_smiling_&_sitting_at_desk_in_home_office__2023.jpg

• plus sign is typically used in an additive manner in searches, like:

  • example: THIS (plus) THAT or KATELYN + LAUNCH THE DAMN THING

Again, one of the advantages of using a descriptive naming system is that it makes your images searchable in your Asset Library. This is super handy when you've got an older website with thousands of images and need to find something specific.

Best Practices for Image Size Limits on Squarespace

When it comes to SEO optimization, I go by Henry Purchase’s SEOSpace* recommendations; it's a fantastic DIY-friendly tool that I can't recommend enough. According to Henry, the sweet spot for an image file size is 250 KB or less. This is because Squarespace has an optimization feature that can sometimes enlarge your image sizes, and of course the smaller the file the smaller the size of the overall page that’s loading.

If you upload an image that's very close to 250 KB, Squarespace’s re-optimization might just tip it over the edge, but don’t panic if your image is a smidge over 250 KB, or even up to 700 KB. It's not the end of the world, as long as it's not a frequent occurrence.

Squarespace themselves recommend keeping images under 500 KB, so you have some wiggle room!

So, why do I stick to the 250 KB rule if Squarespace suggests 500 KB? Well, it's always better to be safe than sorry. Smaller file sizes (without compromising quality) result in faster page load times - and that's a huge win for your website's user experience.

To hit that sweet spot of 250 KB, you'll need to master the art of adjusting both the resolution and the size (dimensions) of your image. This is why it's crucial to understand the difference between the two and why I mentioned those details FIRST.

Aiming for an image file size of 250 KB or less is a great practice for faster loading times and a potentially better SEO rank, because while page speed is only about 3% (as of posting) of your overall SEO score from Google (which it uses to rank you in search results), it’s something we can easily contribute poorly to by accident, if we’re not careful.

Want to learn more about SEO + Squarespace myths (including insights on page speed)? Check out this video from SEOSpace where Henry busts 7 common SEO myths about Squarespace.

Resizing & Compressing Images for Web

Next, let's address resizing and compressing images. You don't need fancy software like Photoshop for this. You can actually do it in Finder on a Mac, or even in Canva (though that requires a few more steps & isn’t as precise).

This post guides you through renaming and resizing images in Finder. Once you've resized the image (lowering resolution, height, and width), you can then compress it using a tool like TinyJPG to further reduce the file size.

Here's the thing, these tools can compress files WAY WAY WAY better and faster than Photoshop, which I literally didn’t believe until very recently. 😂

For example, TinyJPG is a free web-based tool that anyone can use. It allows you to compress up to 20 images at a time with a limit of about 5MB per image. If you need to compress more, just refresh the page and do another batch. There are other options like Squoosh and Image Compressor. These tools give your image that last bit of squeeze to get it under the recommended size limitations for optimal page loading speed, for free!

Here are the no-nos (what to avoid):

1. Leaving the original file names: No more IMG_1057 or DSC_18567, please! It's hard to search for, track and differentiate between files with these names. Always make a copy of your image, rename it, and resize the copy, leaving the original untouched so you can come back to it if needed.

2. Uploading images larger than 1 megabyte each: Although Squarespace allows up to 20 megabytes per file, that size WILL drastically slow down your page loading time ––in ways you and your users WILL notice & be highly annoyed with. It could even seriously affect your SEO rank! The 20 MB image file limit is more suitable for file downloadables (like PDFs linked to buttons & things like that), not for individual images.

3. Skipping alt text: Adding alt text is important for accessibility. It helps screen readers understand what's inside the image when a human can’t see it. So, use the Alt Text fields where available to describe what's inside the image, what's happening, or at least indicate that the image is decorative and not crucial to understanding the page's content.

Now, let's move on to the video tips!

Video Hosting & Optimization Tips

Before we dive into the world of videos, I'm no Spielberg, but I've picked up a few handy tips & tricks along the way which I think you'll find useful as a beginner.

Storing/Hosting videos on Squarespace

First up, did you know that Squarespace hosts videos? You get 30 minutes of video hosting storage for free with all Squarespace plans. However, if you're a video queen and need more storage, you're going to have to shell out some cash for an additional hosting plan. This is, of course, separate from your website's hosting subscription, so it will make your Squarespace bill more expensive, –arguably more expensive than if you pay for video hosting elsewhere.

If you're just starting out and have short videos (around 10-15 seconds or even up to a minute), you shouldn't have any issues with video files & video players affecting page load speed. I've uploaded many short videos and still had plenty of storage space left, which did not seem to affect how fast the page loaded. However, be aware that larger videos could potentially slow things down.

Video Backgrounds

A word of advice, using video backgrounds can look really cool, but they can also be pretty distracting and aren't very accessible in Squarespace, as of posting. This is because there's no way to add alt text, or play, pause, &/or mute buttons without a third-party plugin. If you need a way to add those things, check out Will Myers’ shop for image background captions and video background play/pause buttons.

If Squarespace's add-on video hosting plans are too steep for you, consider hosting your videos elsewhere. This reduces the likelihood of your page speed slowing down & can save a few bucks at the same time.

YouTube video hosting

Free platforms like YouTube are a great place to start. Not only does YouTube manage and store the video files for you, but they also provide shareable players with accessible features. Plus, your videos are likely to show up in video searches or even text-based searches.

However, it’s important to know that “unlisted” videos, while not showing up on your channel or in searches, they can still be easily shared with a link right from the player, which might not be ideal if you want to keep certain content exclusive or gated behind a paywall (in memberships, courses, and other digital products.

Another hosting alternative is Vimeo. They have very affordable plans and offer more control over video sharing. Plus, they don't plaster your videos with unwanted ads. Vimeo even integrates with Zoom, allowing you to record replays in the Zoom cloud and automatically send that recording to your Vimeo account if you share a lot of meeting replays.

See this post’s video & the freebie for a more detailed breakdown of pros vs cons!

Now you're probably wondering, "Great, I've got my videos, I know where to put them, but how do I edit them?"

• Apps like Handbrake are excellent for compressing videos and converting them into other formats.

• If you need to do some editing, consider using Descript* because it offers a variety of features like resizing videos, adding fancy animated captions, and even access to stock images, videos, GIFs, stickers, music, and a high-quality video interview recording system called SquadCast.

• For more advanced editing needs, Final Cut Pro is a solid investment. It's a one-time fee for a powerful tool that's still user-friendly, especially if you're familiar with iMovie.

Where to Find & How to Use Stock Videos

The last thing I want to mention is where & how to find quality stock videos for your projects.

• Pexels – a treasure trove of free stock videos, images, and graphics

• Canva – just don't forget to check the license; you wouldn't want a ‘cease & desist’ letter or fine, would ya?

• DIY – of course, the DIY route; grab your phone (use the back camera), head out, and create your own b-roll video footage. Yes, you might feel a tad strange doing it, but hey, you won't have to worry about licensing. Plus, it could be fun!

• Motion Array – It's literally like a buffet for your professional creative needs: stock videos, b-roll footage, music, graphics, and even templates for titles and transitions. It costs around $30 a month, but it's totally worth it if you're a frequent user.

• Creative Market – this is my favorite go-to for so many creative things: videos, images, graphics, logos, fonts, and more. The best part? Each item is very affordable!

• Descript* – again, it offers a built-in collection of images, videos, gifs, stickers, and music. The license to use that stuff is included in the service fee, making it a one-stop-shop for beginners & intermediate users.

• Packsia – this platform offers vertical stock video footage specifically, making it a fantastic choice if your marketing strategy leans heavily on social media (TikTok, Shorts, Reels, Stories, etc)

Now you have a list of places to start your hunt for stock videos, b-roll, or video footage, however you tend to say it.

But remember, always check the license and make sure you're using it within its legal limitations. No one wants an unexpected surprise in the form of a copyright issue. 😬

Wrapping up!

I hope ALL this has been helpful for you!

Remember, you can always start by dropping your files into TinyJPG to see their original sizes, but if the compression isn't enough or the file size is still too large, don't stress - you can always use this resizing process and then try again.

If this guide sparked an "aha!" moment, or if you're feeling grateful you stumbled on it, I'd love to hear about it! Leave a comment below and let me know how this information helped you. Your feedback helps me decide which topics to cover in the future!