How to Successfully Upload Adobe Stock Images on Squarespace

When edifice a website, one of the most important visual elements of your entire site is your images. Just take a look at the beneath example and tell me… which website would you be more likely to keep browsing?

At that place's a large difference between the two, correct? One supports the feeling of tranquility while the other feels cold and empty feeling.

Whether it'south branded images, stock images, or maybe even images from your iPhone… the images you choose make a HUGE difference.

But what yous might not realize if you're DIYing your site, is that your images tin can either help plow your site traffic into engaged viewers + buyers… or they tin really hinder you from having a profitable website. And I'chiliad not just talking nearly the images yous cull… I'grand talking almost the importance of optimizing your website images for your site.

What we will cover in this post…

>> Why does formatting and optimizing thing?

>> How Squarespace helps brand sure your images look great

>> The bottom line (and what you're really looking for when formatting images for your website)

>> How to properly format an paradigm for a imprint department of your site

>> How to change your image size without sacrificing image quality

>> Helpful tips and things to proceed in mind when working with images in Squarespace

>> Recommended tools and resources to help y'all optimize your images

>> Plus, a special bonus training: How to move blocks in Squarespace then your images go exactly where you want them to!

Why Does formatting and optimizing you images affair?

The larger the image file size, the longer it will take to upload on your site. And sites that take longer to load volition negatively impact your SEO or Search Engine Optimization (aka. How well your site is getting found on Google… and HINT, formatting your images is a part of the Ultimate Squarespace SEO checklist that you can take hold of right here if y'all want to acquire even more)… also, if a site takes too long to load, you lot're more likely to lose your viewer before yous even become them in front of your home page.

The bottom line is that formatting your images correctly can accept a direct impact on the amount of traffic you get on your site… plus, it tin can affect how long your traffic sticks around your site to learn more virtually you and your offers. And that'south a BIG deal.

Squarespace helps you out...

When you create a Squarespace website and upload images to it, Squarespace automatically helps you out by creating up to 7 different variations of that epitome, each with a unlike image width. These widths are…

• 100 pixels

• 300 pixels

• 500 pixels

• 750 pixels

• 1000 pixels

• 1500 pixels

• And 2500 pixels

The height will automatically be determined based on the width… but this all ensures that your images wait not bad no thing the device information technology's beingness viewed on (making it already mobile responsive… or set up for a mobile device of any size!)

But I always want to assistance Squarespace out as much as possible (plus see the note beneath well-nigh why formatting your Banner images ahead of fourth dimension is crucial!)... because of this, I always aim to format and optimize my images earlier uploading them to my site.

Annotation: Images such as full-width groundwork images will display at their original image width. This means that if yous have a really large image that you upload earlier properly optimizing it for your site, information technology could have a really long time to load!

What y'all don't want…

You don't want images that are also big.

As you lot just read, images that are likewise large will increase site load fourth dimension, which frustrates visitors and hurts your SEO.

But you also don't want images that are besides small.

Images that have been shrunk down into smaller file sizes may effect in images that (while they do load speedily) end up looking blurry, and low quality.

The bottom line...

The bottom line is that yous want to observe a happy place betwixt a actually large epitome size, and an image size that is then small that it looks low quality and 'grainy'.

Can you run across the deviation between these images? The pinnacle has been properly formatted for the site while the bottom prototype was downsized besides much. You can see how blurry information technology is.

Properly formatted banner image:

Poorly formatted imprint image:

Just keep in mind, if yous're uploading an image to a banner section (like this paradigm above), and so you'll need a larger file size. But if you lot're filling a smaller image space (like the images in the screenshot below), so a smaller file size is fine.

Just, it can get a little tricky when you have into account a responsive website (this ways it's a site that's totally prepare upwardly for Whatsoever screen size you lot view it on). Hither's a quick video explaining how this affects your image formatting...

And so, now that we know what it all ways…

How practice I actually change my image file size then they wait great on my Squarespace website?

1. Y'all'll first need to determine your original image file size.

Squarespace recommends that your image file sizes all exist 500kb or less. To observe the size and dimensions of your original epitome before uploading it to your site:

-On a PC: Right click on the image and select Backdrop.

-On a Mac: Press Pick while clicking on the image file, then select GET INFO.

2. Determine if your image needs to exist downsized.

Now, later on seeing your image file size, you'll know if it needs to be downsized. When you find your file size, you may see that it's a few MB. And maybe you're wondering how that relates to 500KB. Well, here's a quick file conversion chart for y'all in case you're curious…

3. Adjust your paradigm size for your banner section or image block.

Here's a quick video walking you through how to downsize your image for Squarespace on a Mac using the basic PREVIEW application…

Hither's a video showing y'all how I optimize my images using Photoshop on my mac…

And here's a video showing you how to downsize an image using Paint, if you use a PC. (Sorry, I don't have a PC, so this is the random YouTube video yous get LOL)

My general rule of thumb is that I try not to go under 1,500 pixels wide for banners, while other images on your site can be under 1,000 pixels wide.

iv. Double check to make sure information technology looks adept.

One time y'all've downsized your images, you will desire to upload it to your size and then bank check to make certain information technology's a good size. Here's how I do a visual check on my sites…

Some things to continue in mind…

Yous'll need to save your images equally supported files types. I always aim to use JPG images as these are generally the near compressed. But sometimes another file type may be necessary. If you want a file with a transparent background, and then you tin can upload a PNG file.

Squarespace supported Image file types:

• JPG (preferred)

• PNG (for transparent backgrounds)

• GIF (used for animated images)

Name your files correctly. Proceed in heed that letters, numbers, underscores, and hyphens are the just characters supported in image file names, so try to continue your file names merely to these characters. Other characters (like question marks, per centum signs, etc.) may upload incorrectly or crusade unexpected beliefs in galleries.

Name your files for organization and SEO. I endeavour to proper name my files something descriptive of the picture, but besides, yous can call back about what you want to be found for on Google, and include some of these keywords in your image file names. This will help boost your SEO (as long as you're not 'keyword stuffing' and putting words into images where it doesn't make sense!).

Save your images in the correct color mode. This is actually only something you have to worry about if working in Photoshop or some other advanced epitome editing software program. Be certain that your images are saved in RGB colour mode and not CMYK, as these colors won't load on the spider web.

My full general rule of pollex is 'Don't enlarge images!". I never recommend enlarging an image to fit into a space. For case, if y'all're trying to put an image into a banner section and it appears blurry, the but prepare for this is to find a improve, college quality ORIGINAL image. In that location volition really be nothing you can do to 'enlarge' this paradigm in a third party plan to brand it look less blurry.

Why is my banner image cropping weird on my website? If you're finding that your banner images in Squarespace are getting cut off in strange places, you may try turning on the "smart ingather" feature in the Site Styles. Here's a quick video showing you what this looks like and what the departure is betwixt turning this characteristic on or leaving it off.

Using text within an prototype in Squarespace. I always recommend that you put your text into Squarespace whenever possible vs overlaying text into an image and flattening it all together. There are a few reasons for this… 1) When text is in an image and you lot view that image on a mobile device, it'due south ofttimes really hard to read the text as it'due south so small. 2) When y'all put text into an paradigm you lose potential SEO power because Google can't 'read' that text on your folio. 3) The text tin announced blurry while text written on your website is crisp and clean looking.

The number of images on one page matters. Keep in mind that even if you downsize all of your images to less than 500KB simply you take a ton of images on one folio, that page will still accept forrrever to load. So, I e'er try to break upward large galleries into smaller gallery pages and link them all together with an 'overview' page. Hither's an instance of an overview folio.

Logo file sizes. I typically similar to save my logo files downward to about 500 pixels broad for the chief site logo. You tin then arrange your logo size in the site styles department (DESIGN > SITE STYLES, and then click on the logo and yous will meet a slider where you lot tin can adjust the size). Y'all will want to create your favicon as a square image. So you could create this as 100x100 pixels and this would work fine. It volition be displayed equally 16x16 pixels, so go along this in mind when designing information technology… yous'll want to keep the design super simple!

Why are my PNG images larger? The only time I use (and recommend using PNG files) is if y'all want to achieve a layered outcome of an paradigm on top of a banner section. You tin encounter some examples of this in this blog post all virtually creating unique and attractive banner sections. However, if you use transparent PNG files, you volition discover that the file sizes are much larger than JPGs. This is why I try to stick with JPG files. But sometimes a PNG file just looks so much better, so I will break the 500kb rule on rare occasions.

What about animated GIF files? The same thing applies to blithe GIF files equally the PNG exception above. If you must utilize a GIF, you'll notice that it's well-nigh incommunicable to downsize it to less than 500kb, so I usually focus on getting the GIF as small equally possible and call it expert. I likewise endeavour to use these sparingly. I will opt for a video uploaded to Vimeo earlier using a GIF.

Using stock images in Squarespace. Did you know that yous can observe and upload complimentary stock images right in Squarespace? I Love this characteristic and use it all the fourth dimension. You just navigate on the page like y'all're going to upload an epitome into an prototype block, click SEARCH FOR IMAGE, and then you can browse tons of complimentary stock images correct at that place.

Squarespace has every bit built in image editor. In case you didn't know, Squarespace does have a congenital in image editor. I really like this tool and use it a lot. Yous can crop images, flip them horizontally (which I practice allllll the fourth dimension for stock banner images) or vertically, forth with light editing capabilities such as adjusting the brightness, dissimilarity, saturation, and more.

Here's my recommended image optimizing and formatting toolbox…

Photoshop - I personally use Photoshop Creative Cloud to format all of my website images for my Squarespace sites. I love the 'salvage for web' options and since I know Photoshop within and out, I discover it pretty easy to use. However, I know that most of my clients have no need for photoshop outside of formatting images… and then keep reading for more resource.

Canva - If y'all demand to create a graphic then yous need to check out Canva. Even though I'm an Adobe Creative Cloud junkie, I Dearest using Canva for quick and piece of cake designs and I recommend it to all my clients. From creating DIY logos (here'southward my free 'how to' training video if you want to DIY an amazing logo), to pdf documents and branded social media graphics… Canva's got y'all covered.

Preview (on Mac) or Paint (on PC) - This is the easiest option that pretty much every computer volition support. I've given tutorial videos on how to format your images for your Squarespace website using these programs above in this post.

And as an added bonus, hither is a free training showing you lot how to move those images around on your Squarespace pages like a pro. I've been hearing some buzz lately about how there's a bit of a learning curve with this, so I decided to tape a quick training for you! You lot can watch that training here.

Well there you take it. I'd love to know if this mail service was helpful for y'all, but comment below and allow me know!

Ever cheering yous on!

Sandra

Save your seat for my free masterclass…

iv steps to a captivating and assisting website!

durhamangth1960.blogspot.com

Source: https://sandrahouseman.com/blog/formatting-images-for-squarespace

Share this post