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, BTdubbs.)
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!
Why does it matter?
I hear you loud & clear, all the way from 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?
IOW: “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.
Optimizing the image titles helps 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.
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 2 ways to do this that work for people who 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: 300 dpi (dots per inch) is the lowest recommended resolution for print, but it makes file sizes 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.
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)
Click the Re-size button (looks like a dotted line square with arrows pointing in opposite directions)
This pop-up window will appear with all kinds of things you can change, in order to make the file size smaller.
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.
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:
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:
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!!)
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. 🙌🏻