Squarespace How to Allow User to Upload an Image

Table of Contents

Affiliate 1
Cull the correct prototype file
(png, jpg, gif, etc.)

Affiliate 2
Correct image settings
(rbg, dpi, ppi, etc.)

Chapter three
Size matters! Reduce your images
(Bigger isn't improve)

Chapter iv
Properly name your images
(and how Google "reads" them)

Affiliate 5
Alt Text for Squarespace SEO
(and how to do it)

Chapter half dozen
The key to adding image text
(and what not to do)

Affiliate vii
Push images below the fold

Chapter viii
Use original images

** Bonus **
License all images

CHAPTER 1

How choosing the right image file tin can boost your rankings

JPG? PNG? SVG? WTF?

There are so many unlike file types it tin can be overwhelming when choosing the correct 1.

But it doesn't have to be.

This chapter volition break down which file blazon to use and when to use them.

Having compelling images is paramount to having a successful website.

The reason is twofold.

Beginning, images play a vital role in breaking up your content, increasing the take a chance of property your visitors attention longer than viii seconds. The longer a visitor stays on your page, the lower your bounce charge per unit becomes, and the more points Google gives your website.

Second, when your images are optimized properly information technology's yet another manner to tell Google what your site is about.

How to choose the correct file extension

When optimizing images we need to ensure we're using the correct file extension. But when there's so many file choices available how do we know which i to choose?

Choosing the correct file extension is the foundation for correctly optimizing your images (no pressure!) so be intentional on which extension you use. Luckily, Squarespace simplifies the decision making procedure by just supporting PNG, JPEG / JPG, and GIFS.

Here'south what to consider when deciding what prototype blazon to employ:

PNG is the sharpest, crispest pick for images. That said, it also ends up being the largest file size so it's better to employ this extension for smaller images.

If you need to edit the prototype, it'southward all-time to do information technology in PNG course first every bit the quality is college, then convert information technology to a JPEG for uploading.

And definitely use PNG if you need a transparent background such every bit logos (encounter SVG below).

JPEG (or JPG) is the best choice for larger photos (like banners). It's important to keep the file size as pocket-size every bit possible without compromising quality (more on that to come up in Affiliate 3) and the JPEG / JPG format volition produce the highest quality image with the lowest file size.

GIFs are animated images and super fun to utilise just take up a massive amount of storage and so use them sparingly.

SVG is how about graphic designers save logos because they can exist increased to any size without being distorted or pixilated. That said, Squarespace does non back up SVG files so you'll demand to convert the file to JPG or PNG.

If your SVG file is specifically for a logo converting it to PNG is the best option.

How to convert an image from one extension to another

What if you lot have a PNG epitome and you want to utilise a JPG? How do you convert an image from 1 file extension to another?

It's really not that hard. Yous tin can use a free online file extension converter or practice it on your figurer. Either option works merely I prefer to use my MAC for this.

Convert an extension with a MAC

one. Open the epitome in Preview

2. Click File in the pinnacle left corner

iii. Select Export

4. Choose your file extension (JPG, PNG, etc.)

5. Save the file

Catechumen an extension with a PC:

1. Open up the image in Paint

2. Become to File

three. Ringlet over Salvage As

4. Choose your file extension (JPG, PNG, etc.)

5. Save the file

At present that you've successfully identified which file type to use, it's fourth dimension to move to Chapter 2: selecting the correct photo settings.

Affiliate two

The Nitty Gritty: Photo Settings

DPI, PPI, RBG, CMYK, OMG

Familiarize yourself with these photo resolution settings for best SEO practices.

Salvage Your Photos in RGB

RGB simply stands for red, green, blue. This is the standard method for getting the colors correct on screens such as figurer monitors and TVs, which means you'll want to save all your photos in RGB.

How to do this:

1. Go to Image on the menu bar

2. Hover over Mode, and from the options select RGB Color

3. And so Salvage As

DPI & PPI

DPI = Dots Per Inch

PPI = Pixels Per Inch

DPI is only used to measure the resolution of an prototype when it comes to press. If yous utilise a printer that tin can fit more dots inside of an inch, the quality of the photo volition be much higher. DPI isn't relevant when it comes to computers as they measure out in pixels, non dots.

PPI is how many pixels there are per inch in an epitome on the web. The more than pixels at that place are, the higher the quality of the epitome. The standard paradigm resolution size is 72 PPI.

Squarespace isn't likewise concerned with the PPI though. They're more focused on making sure the image stays 500KB or smaller. Preferably smaller.

CMYK

CMYK color manner is only used for printing and will make your images look strange when viewed on a website so be sure to skip over this setting for your website images.

Chapter 3

Size matters! Bigger isn't better

REDUCE YOUR FILE SIZE, SPEED Upward YOUR SITE

A slow site negatively impacts your SEO.

Reduce file sizes to make your website load faster.

If you lot don't have a fast website people will bounce harder than a fat kid on a trampoline.

On average, people await effectually 3 seconds for a website to load before finding a faster one. Fifty-fifty a one second delay in load time can cut conversions by 7 per centum.

A slow site will demolition your seo

Page speed is a critical cistron when it comes to ranking your website college on Google'due south search engine results. A site that loads also slowly hurts your SEO and CTR (Click Through Rate).

Having images is important in breaking upwards content and keeping readers engaged. The more than content you take, the more than images you'll need to use. This is why keeping photograph file sizes as small as possible, without compromising quality, is crucial.

Squarespace image Magic ✨

I of the many reasons I love Squarespace is because the platform magically creates seven versions of every image we upload (except banner images), each with a different width:

• 100 pixels

• 300 pixels

• 500 pixels

• 750 pixels

• 1000 pixels

• 1500 pixels

• 2500 pixels

Squarespace automatically displays the corresponding epitome on the user end depending on their browser size. This helps Squarespace websites load faster BUT we still demand to fix our site upwardly for success by reducing the file size.

First, nosotros must choose the right file extension (Chapter ane) and select the right settings (Affiliate 2). Side by side, nosotros demand to reduce the file size by scaling the image then compressing it.

Thankfully, it's not as hard every bit information technology sounds.

To scale your paradigm on a MAC:

1. Open the image in Preview

2. Select Tools

3. Enter dimensions

4. Salvage image

5. That's it!

To calibration your image on a PC:

1. Open up the epitome in Pigment

2. Select Resize

3. Select Pixels

4. Enter dimensions

5. Salve image

File Size Recommendations

While Squarespace supports images upwardly to 20mb (that'southward HUGE folks), images should be less than 500kb (personally, I shoot for 350kb). I most ever use the dimensions 1500 px broad by chiliad px loftier for landscape images; portrait images will be flipped (1000 px wide by 1500 px high).

Pages should never be more than than 5mb and anything over 1mb will tiresome down load time on mobile devices. It'south a good idea to check your folio content size for adept measure.

Don't apply distorted images under any circumstances. Blurry, pixelated, or stretched images will make your site look unprofessional and visitors will be able to tell immediately.

How to properly size imprint images

Banner images tin be the trickiest image to get right because they e'er display at their original image width. A good rule of pollex is to set banner image dimensions to 1500px by 1000px and proceed them in landscape orientation.

The absolute maximum width should exist 2500px. Anything over that volition cause page loading issues. Since Squarespace doesn't resize banner images, it'south up to us to make certain it's right.

Shrink your images

At present that you've selected the correct file extension and scaled your image, it's time to shrink information technology.

TinyPNG is my get-to resource every bit it uses smart pinch techniques toreduce the file size of files without jeopardizing image quality.

Information technology tin can be a deadening task to calibration and compress images through the pinch tool but I've constitute the issue is most invisible and really does a great job of decreasing the file size.

Not just will your SEO ranking improve, but people volition stay on your site longer if they don't take to wait for it to load.

Affiliate 4

How to name your images then Google can read them

Draw THE IMAGE

Naming your photos correctly will assist them get indexed into the right searches.

The better indexed your paradigm is, the better your SEO will be. Keep reading to encounter how piece of cake it is to do on Squarespace.

Google may know your mother'southward maiden proper name and the next vacation you idea about taking (yea, information technology's creepy) but currently the search engine behemothic can't "read" your images (withal).

The file name tells a search engines what it's looking at and then information technology can rank your site accordingly, increasing the chances it will bear witness up in image searches. The name also acts as Alt Text if it isn't otherwise provided.

Having a file name like "IMG_1144" means zippo to Google.

Instead of using the default file name utilise a short description about the image, incorporating your keyword into the name when appropriate.

Name your image files using lowercase messages, numbers, and hyphens.

Shortly describe what's in the movie without going overboard by using a long name. And recollect that keyword stuffing is never okay and so make sure if you lot're adding your site's keywords that it's really relevant to the photograph.

You tin can alter the filename for epitome blocks directly in the platform. Simply click on "edit image" and enter the file name.

For banner images, y'all'll need to re-upload the prototype with the new name.

See this guide for other areas to add keywords.

Chapter 5

Alt Text for Squarespace SEO

ADD ALT TEXT TO RANK IN SEARCH RESULTS

If you want to rank on Google, adding Alt Text is imperative.

So what the heck is it? And why does it assist SEO?

In this chapter y'all'll learn what Alt Text is, why information technology's important, and how to add it to your Squarespace images.

Google references the importance of adding Alt Text in their SEO starter guide.

Alt text, or alternative text, describes an paradigm on a web page. It's non unremarkably visible on the page itself but it'south a fundamental step in optimizing your images.

Alt Text both improves UX (User Feel) and improves your SEO.

Why is Alt Text so Important?

Alt Text is the description of the picture that appears on the screen if the image itself doesn't load. Information technology helps Google crawl and rank your site.

This is as well the text that'southward read aloud for those who are visually impaired. Millions of people use screen readers to catechumen online content, including images, to audio. If an images doesn't have Alt Text they will either skip over the images or read out file names.

It's a proficient thing you've already properly named your image file!

There are several right and incorrect means to add Alt Text to Squarespace Images.

Allow'south bound in.

How NOT to add alt text

Let's look at the picture. Beneath it I've given examples of what bad alt text looks like.

Bad Alt Text example: alt="This is a picture of a desk-bound with a computer water bloom and other decor on it that displays a website and has a keyboard and chair"

Best Alt Text practices

A good example of Alt Text is: alt="organized desk with feminine decor and computer displaying a beautiful Squarespace website"

Proceed the Alt Text to a maximum of 125 characters and don't start off past maxim "this is a picture of."

Instead, get direct into the clarification of what's in the paradigm and utilise your keyword if information technology fits in naturally. If information technology sounds like a robot is talking it'due south a sign you're probably non doing it right.

You tin omit words like "a, and, the" and refrain from using hyphens in your Alt Text.

How to add together Alt Text in Squarespace

Squarespace very excitingly added the capability to enter Alt Text for images.

Up until recently, the workaround was to simply add the Alt Text to the caption or championship field. This worked because Google knows and understands that the explanation is effectively the Alt Text.

Yet, now at that place's an easy way to add Alt Text to image blocks.

Simply upload your image and enter the Alt Text into the "Paradigm ALT TEXT" class field.

Affiliate 6

The key to calculation Image Text

DON'T USE A Photo EDITOR TO Add together TEXT TO YOUR IMAGES

A short, just important chapter!

This is one of the most mutual mistakes people make when designing their ain websites.

And information technology's one of the easiest to fix.

Make sure you're not adding text straight to your images with a photo editor. Using an epitome that has text is both bad for SEO and for UX (user feel).

Google can't read pictures and then annihilation y'all have written on an image won't be optimized past search engine results, screen recorders for the visually impaired won't pick the words, and text could become impossible to read depending on the browser a visitor is using.

Images are browser responsive

Images change size depending on which browser screen a visitor is using so images can either get and so small text becomes unreadable or blow up then big it looks disproportionate to the residual of your site.

Too, banner images in Squarespace are cropped depending on what device visitors use so the text may be completely cutting off the screen.

This ways if you added words to your epitome via a photograph editor they would about likely be cropped off on a smartphone or tablet, which makes up for over 50% of web traffic.

Instead, create a text overlay

Adding a header over an image is ever the best option. If you tin can highlight the text with your mouse Google will be able to read it.

Your content will move seamlessly within the container and then your text will never be cut off, no matter what device your visitor is using.

It's also much easier to edit text and so having to go dorsum into your photo editor to manipulate the content.

Affiliate 7

Push images below the fold

Continue YOUR READERS ENGAGED

Images add to the artful, only words are always more of import.

Make sure they're the first thing that appears on your homepage. Coil downwardly for a couple examples on how to do this well.

When a visitor lands on your site they want answers and they want them FAST.

Which is why pushing your photos below the fold is almost always the best practice.

So instead of this:

Information technology's definitely okay to use larger images on your site if they are optimized properly (run across Chapter 1 and Chapter 2) but make sure your content is easily readable when first landing on your site.

Chapter 8

Personalize your site with authentic photos

Apply ORIGINAL IMAGES

Nosotros know, stock images are nice, piece of cake, and costless. But there's a catch. You'll never reach your full SEO potential if you don't use original images.

You want your make to stand up out! Professional photos are the only way to make your site i of a kind.

Do you use stock images on your website?

Of class, we all practice!

An in-depth study evaluated the effect stock images have on Google rankings.

Turns out, it'southward not the all-time for SEO.

Researchers created several brand spanking new websites using stock images on some of the sites and original images on others.

The results?

Sites with unique images outranked the sites using stock photos.

People desire authenticity now more ever. Equally gorgeous and convenient as stock photos are, your audience will know they're fake.

Which isn't the worst thing. Similar I said, there are some stunning stock photos out there. Only if you lot really want to step upwards your SEO game, taking beautiful, original photographs is in your best interest.

Hiring a professional photographer and using unique, loftier-quality images is ideal, merely not always practical. They tin exist pretty expensive, and if your business is brand new, spending that much money isn't an option right now.

In one case you're able to piece of work a lensman into your upkeep, do it. They'll work with you lot to get images that accurately reverberate your personality and make. The best part is, you tin take a consequent manner throughout your site.

Also, you'll end upwards spending hours trying to detect the right stock photos. Past hiring a professional, you tin take the photos and be washed with it in a day.

A work around is to use a few professional photos for your homepage, nigh, and services page. Then using paid Stock Photo options like Adobe Stock, Deposit Photos, iStock and PikWizard for other pages, including your weblog.

Less people will be inclined to pay for stock photos over using free sites, decreasing the chances of your photos being used on thousands of other sites.

All that being said, it'due south okay to mix in stock and original photos if you do information technology correct.

When to apply stock

• For temporary projects that have a express turn-effectually fourth dimension

• When yous notice a photo that matches the tone and style of your site

• To aid supplement the professional images

• Blog posts and ability pages

• For projects that are more than playful and fun

when to use professional person photos

• Professional person profiles

• When information technology's important to accurately convey your brand

• On materials that represent yous and your business

• For product and food photography

Pro tip: if you don't have the budget for paid photos here's a list of costless stock photograph options.

Chapter ix

Bonus: license images correctly

IF Yous'RE NOT SURE, DON'T USE IT

I can't stress how imperative it is to simply use images that you can accept the rights to.

In this bonus section, we'll go over what kinds of photos are rubber to utilise, and which ones are off limits.

It's super important to make certain we're always using properly licensed images on our sites.

In fact, it's so important I felt compelled to add a bonus section to this mail explaining why.

I've had existent-life clients unknowingly use images they didn't have rights to and ended up being sued past the rightful possessor.

Learn from their mistakes instead of repeating them.

how do you know if you can use an image?

Showtime, let's address what NOT to do.

Don't grab a random paradigm off the internet whether information technology's from a Google search or from a website you visited.

Instead, you'll need to use a stock photo website where photographers have submitted their work to be used by the full general public.

Squarespace has an awesome built-in option using Getty Images. Add an epitome block, click search, and enter a keyword.

You can import the image directly into your site if you're pinched for time and name the file within the image cake. Still, equally we learned, it's better to download the prototype, select the correct settings, proper noun it properly, then calibration and compress the epitome before uploading information technology to your site.

Information technology'southward always best to use custom images rather than stock photography (Chapter 8) only if you can't swing your own personal and unique images, it'southward better to use a paid site because less people are willing to buy photos when they tin can get them for free.

Adobe Stock gives the showtime month gratis for first time users and you can properly license 10 images. Y'all'll need to enter an email accost and credit card to register but as long as yous cancel within the month you lot won't be charged.

A annotation to my fellow Squarespace Web Designers

If you lot're like me, i of my favorite jobs is culling stock photography for the perfect photograph that lucifer my clients' vision and make. After I select the photos I always have my clients license the images themselves.

I include a clause in my contract along the following:

We will select the images used for the site (with client input, of course) but client will be responsible for all prototype licensing.

All materials you submit to Be Aligned Web Design for utilise on your website shall be obtained legally and not borrow on any copyright, trademark or other proprietary rights.

Should you obtain images or other fabric illegally you shall be held liable for whatsoever amercement resulting from infringement of such. We claim no intellectual property rights over the material yous supply.

If information technology helps feel free to add something similar, checking of course for local and state laws showtime.

I'd beloved to hear from y'all

Optimizing your site for SEO is highly technical and can exist a pain-staking task. Only if you take a plan, and starting time small, information technology can be done.

I'm on folio one of Google for "Squarespace Web Designer" and optimizing my images played a office in getting me there. It'due south played a paramount part in ranking my clients on the commencement page, too.

Having leads come to you instead of hustling for them will complimentary up time and energy so y'all tin focus on serving your clients instead of growing your business.

If you lot found this listing valuable, or you have any questions, go out a comment below 👇

Now showtime optimizing your images!

toliveranempon1992.blogspot.com

Source: https://www.bealignedwebdesign.com/squarespace-image-optimization

Share this post