06: Image types 🖼️ when to use what file in Squarespace
-
Episode Transcript
00:00 The term Squarespace is a trademark of Squarespace, Incorporated. This content is not affiliated with Squarespace Incorporated.
00:08 Welcome to Think Inside The Square, a podcast full of quick tips and tricks that will help you create a Squarespace website that you're proud of.
00:14 I'm your host, Becca Harpain, creator of Iisidethesquare.co, and in this episode I'll be sharing my recommendations for image types that you'll want to use in your Squarespace website.
00:24 We're going to be talking about the most common image formats that you'll be encountering, the key differences between them, and where to use what in Squarespace.
00:32 For a transcript of this episode, along with the links to any resources mentioned, visit insidethesquare.co/pocodcast.
00:42 I'm going to be talking about three types of images in this episode because all three serve a specific purpose for specific parts of your Squarespace website. JPEGs, PNGs, and Gifs.
00:53 And yes, that's how I pronounce those. Feel free to comment about it, but I'm stuck in my ways. So what's the difference here?
00:59 A GIF is an animated image that's compressed on a loop, and it's great for some very specific things in Squarespace and for adding some motion to a site.
01:08 It's definitely becoming a lot more common. And we'll be discussing some unique places to use a GIF that you might not have thought of.
01:14 The next type is a PNG, which stands for a portable network graphic, and it's a higher quality image that can exist with layers and a transparent background.
01:24 Great for creating shapes and making really unique layers of content in Squarespace.
01:29 And then we have a JPEG, which is one of the most common image types. It is a fantastic compressed single layer of pixels, and I probably use it more than any other image type myself.
01:40 So I'm actually going to start this episode talking about PNGs and where I recommend you use them, because it's only a few key places.
01:48 The first, your favicon. The little icon on the top of the browser window. At the very top of that tab on the left hand side, before the site title or the page title, you'll see a small image.
02:00 That right there should be a PNG, because it can be any shape you want it to be.
02:06 Now, the recommended image size is at least 100 pixels squared, but keep in mind, a lot of browsers are going to resize that to 40 pixels square or smaller.
02:16So definitely keep this image simple. Do not put a word up there a letter at the most.
02:22 The second place I recommend using a PNG image type is the logo for your website.
02:28 Now, this is in your website header, a standard logo for desktop and a smaller version for mobile, or maybe an alternate version.
02:35 But anywhere you have your logo on your website, I want to encourage you to use a PNG.
02:40 Not only because the transparent background is crucial here for a lot of logo and header designs, but you want the highest quality image for your brand and that's going to be a PNG.
02:51 Now using this PNG for the header of your website, you don't actually need a file that is wider than 500 pixels in width.
02:59 Not only is that huge for a portion of the header that's going to scale down for smaller screens and you want to make sure that quality is still there.
03:06 So you really don't need to go larger than 500. Again, if you're using the logo for the header of your website.
03:13 Now the last place you might want to use the transparency feature of a PNG will be a content block where you're creating a unique shape, like maybe a custom button background image or something along those lines.
03:24 That's where I would use that file type. Otherwise, for most of the images on your site, I'd recommend using a JPEG.
03:31 A JPEG is the perfect image type for image blocks, page section, backgrounds, blog post thumbnails, social Share images all of the places where you have a full image and don't need any transparency.
03:44 That's because JPEGs will be a much smaller file. They are a flat layer of pixels, so it's going to load so much faster, creating a great user experience.
03:54 Personally, I use JPEGs for almost everything in Squarespace, but there are two spots where you could use a GIF and I think you should.
04:03 The first spot is for a mobile fallback image for a page section video background. That sounds complicated. Stick with me here if you've never added one of those before.
04:13 In squarespace 7.1 for a page section, you can upload a video to be the background of that page section. But this will be a very big file. So Squarespace prioritizes images on smaller screens like mobile devices.
04:30 So it asks that you upload a mobile fallback image. It won't show the video on small screens, but it'll show your mobile fallback image.
04:37 And guess what? That image can still be animated if you use a GIF.
04:42 Because it's for smaller screens, that breakpoint is under 800 pixels in width, so your GIF doesn't have to be a big one.
04:49 It can be a small image that will still upload much quicker than a video would.
04:53 The other place in Squarespace where I've seen people use a lot of gifs is honestly just about everywhere these days.
04:59 When I started writing this episode, I saw some really cool product pages where people had used gifs to show off how the product was being used. And that's an excellent example.
05:09 But at the time of recording this, Squarespace has given us the ability to upload a GIF pretty much anywhere we can upload an image and I think that's awesome.
05:18 I'm definitely consider using them for some of my blog post thumbnails and maybe even some event thumbnails.
05:24 We've got a lot more opportunity to add active motion to a site without requiring things like extra JavaScript animations or anything along those lines.
05:32 We can definitely utilize GIFs in content blocks, but unlike PNGs, again, we can't have a transparent background that's only for the PNG file type.
05:41 So use those animated Gifs, but remember that it's going to take up the entire space of the content block or the background where you've added it.
05:49 Okay, quick recap here. PNGs, we've got the high quality images. They can have levels of transparency, so they're great for favicons and your logo.
05:59 JPEGs super common image type, and I recommend using it for just about everything else except when you need movement, then you should use a GIF.
06:07 I definitely recommend using a GIF for a mobile fallback image and have seen some cool designs that use them for products and blog thumbnails, so that's definitely something to consider.
06:17 Before we call this episode a wrap, I do want to answer an image question that I get all the time.
06:23 How does Squarespace resizeimages for different devices?
06:27 When you upload an image to Squarespace, it actually creates SEVEN - you heard that right - SEVEN different versions of that image.
06:35 It compresses them for smaller screens. So those of you running your images through a compression program before you upload them to Squarespace?
06:43 Save yourself some time and skip it. Squarespace does it for you.
06:47 Now, these image sizes range from 100 pixels in width to 2500 pixels for those large page section backgrounds.
06:55 And don't worry, Squarespace uses its responsive design to automatically adjust which version of the image is being shown, based on what kind of device your visitors are using.
07:05 So for a full list of the image sizes that Squarespace creates and all the images that I covered in this episode, check out the show notes insidethesquare.co/podcast
07:14 Thank you so much for listening to this episode of ThinkInsideTheSquare.
07:19 I have a lot more tips and tricks to share with you about making an amazing Squarespace website that is uniquely yours.
07:25 So be sure to subscribe to this podcast wherever you happen to be listening to this episode.
07:30 Thanks again for listening, and most importantly, have fun with your Squarespace website. Bye for now.
-
Squarespace Support: Formatting your images for display on the web
-
Image blocs are automatically compressed and resized for the following widths:
100 pixels300 pixels
500 pixels
750 pixels
1000 pixels
1500 pixels
2500 pixels
Source: Support.squarespace.com
