Tips for beautiful website images and how to format them
High quality photography is really a must for a professional looking site. Along with other visual images to represent your brand, photos of yourself are especially important. This creates a connection between you and your brand, building trust and credibility for your site. Your personal photos should show off your personality to attract your ideal client or customer!
Along with photos of you, using stock images on your site can be a great way to add quality visuals if you do not yet have your own brand photos or are unable to hire a professional photographer for personal brand photos.
Always keep your brand mood and style in mind, and consistently use images that fit your style to create a cohesive and consistent look.
This post contains affiliate links, as noted with an asterisk.* I may receive a small commission for any purchases you make through these links at no additional cost to you, of course.Stock Photography Resources
When curating stock photos to use on your website, be sure to choose a style that fits your brand and consistently use images that match your style. Here are a few of my favorite online sources for free stock images:
Pexels.com
They have a lot of gorgeous photos to choose from that look like they are from a photoshoot. They also have a ton of stock videos to choose from. Consider choosing your photos from the same photography for that consistent look and feel.
Unsplash.com
Another huge selection of amazing photos to choose from to fit or supplement your brand. You can also find Unsplash images through the Stock Images library in Squarespace, however, it’s best practice to upload your images so that you can format and optimize them first (see Formatting your images below).
kaboompics.com
Authentically styled collection of photos for a variety of styles and color palettes with entire photoshoots for still life to business to food.
mockup.photos
This is a good option that is easy for you to show off your online designs on a device. It’s seriously as easy as finding your device of choice in almost any setting and uploading your image to magically appear on that device! All mockups are free and made by independent creators. You will find that a lot of these mockups are sourced from Unsplash.
A few favorite sources to purchase beautiful and authentic images, including scene mockups for creatives, are:
Moyo-Studio.com*
There are lots of different options, especially for creatives to showcase designs — from print design displays to screen displays — in so many amazing arrangments to fit and align with your brand style, including curated sets. (The phone image to the left is just one of their beautiful mockups!)
BONUS: Sign up to Moyo’s mailing list for 4 free mockups to get a jump start on elevating your brand!
CreativeMarket.com
A budget friendly option with an incredibly large option of just about everything to “Bring your creative ideas to life.”
Elegant and minimalistic device and product mockups for creative entrepreneurs. (They also have a beautiful collection of fonts. See the blog post on How to add your favorite custom brand font to your Squarespace website.)
BONUS: Sign up for the Harmonais Visual mailing list for 23 freebies to get your brand going!
Formatting your images.
It's so important to make sure your images are formatted correctly and optimized for a faster loading website. You have around 8 seconds to keep the attention of a visitor on your site. You don't want to lose them before your site even loads! The sizes of your images will affect your page loading time. Make sure you compress your images so the file sizes are smaller and load quicker!
Use these guidelines to format your images:
File Size:
less than > 500 Kb
Image:
1000 pixels width
Banner Image: (Landscape)
2000-2500 pixels width
Resolution:
72 dpi
Color Mode: RGB
File Format: .jpg or .png
JPG vs. PNG
How do you know whether to save your image as a jpg or png?
For photos, it’s best to save them as a jpg (or jpeg).
For graphics, illustrations, or transparent images, a png format is best for maximum image quality.
An exception to this rule is if a photo contains text that needs to be crystal clear, then you may want to use .png.
If you are wondering how to reduce the file size of your .jpg and .png files, a good online go to is tinypng.com or tinyjpg.com (it’s actually the same site so you don’t have to choose based on your file format).
For extra guidance on formatting your images for your website, see this Squarespace article:
Formatting your images for display on the web
Tip:
If you do not have Photoshop or another photo editing software, you can use the following to resize your images:
For Mac users …
Open your image in Preview (this App comes with every Mac).
In Tools / Adjust size … set your Width based on the pixel dimensions needed. Set the Resolution to 72 pixels/inch. Then File / Save or Export…
To open and resize images in bulk, select all files, open, and resize.
For PC users …
Go to https://www.bulkresizephotos.com to set your width based on the pixel dimensions.
SEO (Search Engine Optimization) friendly images
The image file name is important for SEO. After you have formatted your images, you will also want to optimize the name of your files with an SEO-friendly title that includes your keywords. This is what the search engines (like Google) will read in a search since they can’t actually “see” your images. This will also be what appears in the chance that your image doesn’t load, or for those that use assistive devices. Use dashes between words for the search engine to recognize this as an image file name. Keep the filename fairly short (five words or less), but descriptive.
For best SEO practices, also include Alt Text with your image. Write the image description using a few keywords describing the image. This is the description that is also used when the image does not display or for visually impaired readers.
For inline images, alt text can be included when adding the image in the Image Block.
For Gallery images, the title or description is the alt text.
Banner images do not have alt text so your image filename will need to include descriptive keywords.
NOTE: Keep alt text to 125 characters or less! It is also not necessary to use the keywords image or photo.
For extra support on adding alt text to your images, see this Squarespace article: Adding alt text to images
I want everything we do to be beautiful. — SAUL BASS
