Squarespace SEO: Optimizing Images
📌 Pin it!
Are you frustrated with uploading large images to your website (but didn’t know there was another way)?
🤬 ‘I’m pulling out my hair over here!’
Don’t know what to name your image files?
😨 ‘Is IMG_0321-edit1.jpg is wrong?’
Think it doesn’t matter what you name your files, or how large they are?
😏 ‘Yes, no one can see the file name anyway!’
(You’re wrong about that, BTW.)
Optimizing images for Squarespace SEO purposes (and the web in general) isn’t actually hard or time-consuming, so this’ll be quick, with lots of screenshots!
Does optimizing your website images actually matter?
I hear you loud & clear, all the way from the US in south Georgia where the ‘ol folks don’t want you looking at your phone/computer/tablet screen so much –until they need help with their email because so-and-so sent a picture & they don’t know how to get to it. #salty
Why does it matter if we optimize?
How does doing this benefit me?
It’s beneficial for two main reasons:
Smaller file sizes help your site load faster. People are impatient & they don’t want to wait on your giant AF images to download, even if they are gorgeous. Statistics say you have just HALF a second for the visitor to decide whether to stay/leave, so your images better load quickly or your viewer is probably gonna bail & lots of fast bails equals a high “bounce rate“ which Google penalizes you for, in your search rankings.
Optimizing the image titles help Google with your SEO. That makes your site rank better in searches if Google knows what your images are & why they’re being used in your content. (ie: IMG_0321-edit1.jpg tells Google nothing about the content of that photo, whereas LTDT-Squarespace-SEO-Best-Practices-Blog-Post.jpg does).
Now that we’ve got that out of the way! Ready to move on to the HOW part??
How to save images for web
This part is easy and I’ll show you 3 ways to do this that works for people who have a computer & an internet connection, have Adobe products, and Mac users who may/may not have Adobe software. (#SorryNotSorry! I don’t have a PC & haven’t used one regularly in nearly a decade, so I can’t give ya a tutorial for that.)
Ideally, you are lookin’ for a web-resolution image (72 ppi = pixels per inch) but at a larger scale so it still looks clear & isn’t pixelated/distorted on screen.
Fun Factoid #1: 300 dpi (dots per inch) is the lowest recommended resolution for print, but it makes file sizes much larger. Putting those types of images on websites will make your site load slower, making your viewers impatient, and causing them to bounce (leave) faster.
Fun Factoid #2: websites like Unsplash have HUGE image sizes, even thought they’re all at 72ppi, they’re usually 4,000 to 8,000 pixels wide, which is about 2-4x the width needed for desktop websites. If you scale it down to between 1,000 and 2,500 pixels wide, the file size will be a lot smaller & will load faster.
Method #1
If you have a computer & an internet connection:
Then go to the online Image Compressor. Upload the photo(s) you want, wait for it to finish uploading, then compressing. When it’s done, scroll down a bit and use the slider to control the quality level.
In the example below, I uploaded an image that was 9.9 MB and got the file size down below 695 KB without really losing much quality that the visitor would notice since the size of the image was so large (5,000+ pixels in width).
In the actual screenshot file, I’ve embedded below, it was only 834KB at the original size, and after compressing, I got it down to 192KB.
If you’re not familiar with file size delineations, there are:
1,000 kilobytes (KB) in 1 megabyte (MB) = think the size of most iPhone photos (in MB)
1,000 MB in 1 gigabyte (GB) = think decent phone storage sized space (in GB)
1,000 GB in 1 terabyte (TB) = think computer hard drive sized space (in TB)
So 9.9 MB would be around 9,900 KB, which is why that file is so large. That’s about 9,400 kilobytes more than is recommended for use per image on the internet. If all of your images are similar in size, they would take way more time to load than the average person is willing to wait.
The standard suggestion for internet use is to try to keep all of your images at, around, or well below 500KB wherever possible, so they can load quickly.
Going above this 500KB limit occasionally (per page) isn’t a big deal, but the average images should be in this neighborhood, ideally.
Squarespace has overall size limitation suggestions for faster loading of each page, and keeping to this rule of thumb will help achieve that goal.
Online Image Compressor, example use
Method #2
If you don’t have Adobe software…
…but you do have a Mac:
Open your image in Preview.
Duplicate the image & name the copy something different.
I usually just add “-web” before the file format suffix, so I know which ones I’ve optimized for web at a glance.
So my file name would look like, “S1862_Example-web.jpg”
Click the Markup button (that looks like the tip of a pen/marker)
Markup button
Click the Re-size button (looks like a dotted line square with arrows pointing in opposite directions)
Resize button
This pop-up window will appear with all kinds of things you can change, in order to make the file size smaller.
What to change & pay attention to, within the re-size tool pop-up window.
(Click to enlarge)
Make the changes you want, click “OK” and move on to the next one!
If you made changes you don’t like, press Command + Z on the keyboard, or go to Edit < Undo, to undo those changes and start over again until you get what you want.
Simple JPEG export with preview
You can also do this simply by going to File < Export and select JPEG. Click & drag the slider (let go of the slider to preview the new file size number before saving) to control the file size you’re aiming for, then click Save. Easy!
Method #3
If you do have Adobe software
Maybe this was taught in one of my many design classes in college and I just missed it, or maybe it wasn’t & I figured it out after starting my own business & hated how long it took to upload “small” files for my own website. 😂
Exporting the normal way does not achieve quite the same results, so I encourage you to use the actual Save for Web process, when saving for web. I know that seems redundant but I’m saying it anyway for the folks who need to hear it. 😉
Aaaaaanyway, here’s how to save your images for Web in Adobe Illustrator (also works in Photoshop, CS6 or CC).
In Illustrator, go to File < Save for Web
In CC this is under File < Export (if I’m remembering correctly)
You’ll get a big pop-up window (with more options than the Preview app offers) that looks like this:
(click to enlarge)
In the menu bar on the right, change the same things I mentioned before with the Preview app.
Choose your file format:
If you want a jpeg, select that from the pull down menu, 2nd from the top. Other options are png-8, png-24, & gif.
Choose your image quality:
From the drop down right below the file format options, you can choose between Low, Medium, High, Very High, and Maximum.You can also adjust the Quality percentage, next to that dropdown, to adjust more specifically between quality levels.
For example, if Maximum is too large of a file size, Very High is small enough but maybe slightly too pixelated, try choosing Very High and bumping the quality percentage up by 5 or 10%.
Choose your actual image size & resolution:
You can dictate the size of the image (width and height) in pixels or inches or whatever works for you, based on whatever you’re using in that document profile. (This image is using pixels, specifically for my Pinterest images for this blog post.)
Keep an eye on the stats at the bottom LEFT.
The numbers on the bottom left will tell you what the new file size will be, so pay attention as you make changes & before you save!
Preview the newly resized image in your browser:
If you click the Preview button (down in the bottom left corner) it will open the image with the current resizing options in your browser window, so you can see it as it will appear on the web.
Want to see a before & after?
Use the “2 Up” feature (click that tab at the top, center) to see the original image on one side, and the newly resized image side-by-side.
Save your changes:
When you get the image resized the way you want, click Save and re-name your image something SEO friendly (use your newfound knowledge from my last post: SEO Best Practices: Using Keywords)Watch where you’re saving. I’ve noticed this particular save pop-up window doesn’t remember where you opened that file from, it opens to the last place you saved instead (typically).
If you save it without checking the location first, don’t worry: just search your computer for the file name you gave it, and move it to the folder where you intended to save it.
In Photoshop, the options are a little different:
Photoshop allows you to figure out exactly how quickly the image will load in a web browser, which can be pretty handy!
To look for that, check the bottom LEFT corner, within the Save for Web (Photoshop) pop-up.
See where it says “2 sec @ 2 Mbps” under the file size? That’s where you want to be looking for the loading speed.
That means on a connection of 2 Mbps, the image will load in 2 seconds. If you want to change the speed, click that menu icon to the immediate right of that line of text; you’ll get this pop-up:
You can also preview 2 or 4 at a time, similar to Illustrator:
2-Up (side by side; each image’s stats are at the bottom LEFT)
Select the one you want to edit, by clicking on that image, then changing the options in the menu bar on the RIGHT.
4-Up (side by side; each image’s stats are at the bottom LEFT)
Select the one you want to edit, by clicking on that image, then changing the options in the menu bar on the RIGHT.
Once you’ve gotten the newly resized image the way you want, click Save and remember to check your save location before you finish!
These tips fall under SEO Best Practices, because they’ll help you:
Name your images with SEO in mind
(no more file names like: IMG_0756.jpg!!)
BONUS: also helps you search for an exact file on your computer; harder to find it if you have to search for the exact IMG # 😂
Create higher, web-ready resolution images, that load faster (which Google likes!)
It’s easier than it seems, just play with the options until you figure out what you like, and by then you’ll develop go-to numbers you can plug-in super quick. The more you do it, the faster you’ll be. 🙌🏻
Too much to deal with yourself?
I’ll handle it for ya. Find out how I can help you get shit done! 👇🏻
