10 tips for picking & resizing images for your Squarespace site
So, you're all ready to build your site and you're getting around to picking out or take photos for it? Or maybe you're thinking of building a new site soon, and are just doing your research to get prepared for when the big site build comes?
Either way, today's post is for you!
Before I go even one step further, I have an insider web designer secret for you.
Photos will make or break your website, so it's important to give them serious thought, and maybe throw a couple dollars at getting good ones.
I don't say photos will make or break you site as in make or break the functionality, but make or break in terms of the look of the design and the overall professional look of your site.
If you give some dark, off-brand, or blurry photos to the world's most talented web designer and ask them to build you a beautiful website, the site won't live up to your dreams.
So, to avoid that situation, wether you're hiring a web designer or DIY'ing, these tips will be vital to you either picking, buying or having photos taken for your site.
10 tips for picking & preparing website images
Banner image tips:
1. Banner images should always be horizontal (landscape)
If you try to take a vertical (portrait) image and make it a banner on a site, you'll likely find the image will get blurry, as the vertical image needs to take up the full width of the page.
Also, you'll only get in a small portion of the vertical image in a banner, so you'll have to decide what part of the image is most important to you, the top, middle, or bottom.
To avoid this, ensure that all the images you choose to go in your banner areas are images taken horizontally.
2. If you plan to have text or buttons on top of your site banners, choose images that are more abstract
When you have text or buttons on top of a banner, you don't want them to be awkwardly covering anything important on the image behind them. Prime example, banner images with people's faces in them.
I know I can hear you saying over there 'well, if there's something important in the image, can't I just make sure I put the text and buttons not on that area?'
Yes, you definitely can.
Butttt as websites are responsive these days and all the site content rearranges depending on the size of screen it's being viewed on, there's a good chance that when you were designing and the banner text wasn't covering someones face in an image on your screen, that might not be the case on all the different screens your visitors are viewing your site on.
So to try to avoid this issue all together, choose more abstract or pictures of landscapes for banner images. Choose photos where's theres nothing super important in them that would look strange if it was covered by text or a button (such as someone's face).
3. Go all light or all dark with your banner images if you'll have text, buttons or your navigation overlaying on top of your banners
In Squarespace, you choose colors for fonts and buttons in bulk, meaning once you set the navigation, heading 1, 2, 3 and body text colors and styles, those stay the same across the whole site.
Because you want the text to be easily readable on top of all banners, choose to go with all darker colored photos, or all lighter colored photos, and then pick contrasting colors for all the bits (navigation, text, buttons, etc.) that may go over top of them.
This is especially important if you're going for the new look of having your navigation sit directly on top of your images, as opposed to having them on top of a navigation background color.
General photo tips:
4. Buying stock photos? Only buy from one photographer to keep a consistent look and style
Each photographer has their own unique style and look to their images.
Two different photographers could take a photo of the same fruit bowl, but how those photos look at the end can be very different.
One photographer might edit the photos in a very light and airy way, while the other edits in a more moody and dark look. As you can imagine, these two editing styles can produce a very different style of image, even if the image is of the exact same thing.
So, in order to keep your images looking consistent (consistency is key to building a strong brand look), take your time at the beginning before you build your site to find one photographer who takes photos perfectly in your brands style, and stick to buying photos only from them.
5. Side by side images should always be cropped to the same ratio
Anywhere on your site where you have images side by side, they should be cropped to the same ratio. See how much more clean and professional the symmetrical photos look over the mismatched ones?
If your photos aren't already cropped to the same ratio before you upload to Squarespace, you can hit 'edit' and then crop, and pick one ratio to which to crop both to.
6. Never, ever use a blurry image
Blurry images are enemy number one of professional looking websites.
If you image isn't crystal clear quality, always go for no image over using a blurry one.
Preparing & resizing images to be uploaded to Squarespace tips:
7. Ensure photos uploaded to Squarespace are 500 KB or less
Images play into your sites SEO in a few ways. The speed that your site loads at plays into Google's algorithm. One of the main issues I see with slowly loading sites is having images that haven't been optimized for the web (that is, haven't been tweaked to Squarespace best practices for images).
One easy way to speed up your site, and therefore help out your Google rank, and just in general make your site a more pleasant viewing experience for your visitors is to ensure all images are a file size of 500 KB or less.
How do you do that?
On a Mac:
Double click your image to open in in Preview
Click 'Tools'
Click 'Adjust size'
Play with the numbers in the 'width' area until the 'resulting size' is somewhere at 500 KB or less
Note: You'll want banner images to be about 2,000 px in width, and photos on the content of your page to be about 1,000 - 1,500 px in width. If you adjust the size of the images to these dimensions and it's not under 500 KB, see the next 2 tips below.
8. Use JPEG's over PNG's to help bring down image file size
There's nothing really wrong with using a PNG on your site, Squarespace accepts PNG's as a file type for images.
However, PNG's tend to be much heavier file-size-wise, so converting an image from a PNG to a JPEG could help you get your image under 500 KB.
How do you convert from a PNG to a JPEG?
On a Mac:
Double click your image to open in in Preview.
Click 'File'
Click 'Export'
Select 'JPEG' from the 'Format' dropdown
Click 'Save'
9. Use JPEGmini to compress the file size, without loosing photo quality
If your photo still isn't at 500 KB yet, head to JPEGmini.com and upload your photo where it will be compressed and downloaded 'mini-version' onto your computer.
If you need to compress a LOT of images (like I do because I'm a web designer, or you might need to do if you're a photographer, blogger, etc.) there's a JPEGmini app you can download to your computer to bulk drop a bunch of images to be optimized all at once, as opposed to uploading each individually to JPEGmini's site one at a time.
(There'a free trial version of the JPEGmini app so you can give it a test drive before deciding if it's worth it to buy it for you.)
10. Name every image so Google can 'see' it
Google's pretty darn advanced, but their fancy computers haven't yet figured out how to 'see' your photos.
So, all Google knows about your photo is what the name of the photo file is. If your photo file is named SAM_15372 or IMG_69309, that tells Google a whole lot of nothing, and you're missing out on valuable SEO opportunities!
To help out your SEO, name every image whatever is happening in the image. If you can incorporate a keyword or two into the same of the image, that's great!
Note, keyword stuffing, that is naming a photo 'baby photographer NYC baby photographer NYC baby photographer NYC baby photographer NYC baby photographer NYC baby photographer NYC' isn't going to help anymore, it'll only hurt, so name your images something a reasonable human would consider normal.
So quick recap, here's everything you need to keep in mind:
When picking photos:
Choose images that were taken horizontally for banner images
Choose images that are more abstract or images of a nice landscape for banners, and avoid photos with something that would look weird if covered (eg. someones face)
Choose photos that are all light or all dark for banners
If you're buying stock photos, buy from only one photographer for a consistent look
Never ever use a blurry image!
When preparing photos:
If you have any photos side by side on your site, ensure you crop them to the same ratio
Only upload photos to Squarespace that are a file size of 500 KB or less.
Convert your PNG photo to a JPEG if you're having a hard time getting your photo down to size
Use JPEGmini to get your photos down to size if all else didn't work
Name every image so Google can 'see' it
Ballin’ on a budget and looking to DIY your site? Perfect! You’ll love these other posts …
Website heatmap: Why you need one & what to do with the info collected
Boost your Squarespace SEO with one simple step that you probably haven’t heard of!
Which Squarespace templates have a sidebar, index, parallax, second navigation + more!
The one thing you need on every page of your website to increase conversions
8 reasons I chose to build my business's online home on Squarespace
