Prep Images - See 5 easy steps
GETTING STARTED WITH IMAGES
The best way to get started with images for your website is to reflect on websites you enjoy and admire. Websites that are fun, inviting, bold, informative and charming. A happy homepage takes inspiration from coffee shop culture. Even though coffee shop culture is a thing of the past in Covid times! It is the feeling of walking in to a bright spacious room that is full of energy with a mellow, groovy undertone. Think Bebel Gilberto and lavender chai. There are splashes of color yet it is uncluttered, the aroma is warm and curious. Check out the website, menu, merch + recipe book for Lucky Lab Coffee! It is a delightful synthesis of colors, logo, fonts, images. You instantly get a feel for their brand and crew of coffee lovers. Lucky Lab Coffee’s flagship location is in Austin, TX. They are even mentioned in the seminal book, How to Style Your Brand by Fiona Humberstone.
HIGH RESOLUTION PHOTOGRAPHY AKA HI-RES IMAGES
If you are at the very beginning of your website journey, you can browse photography packages at phocus.io and Femforceshoots.com to see your options for portraits, seasonal events, locations. Mushaboom studio hosts portrait days in Atlanta and Boston. If you have physical products, check out Soona.com for their creative and colorful virtual photo shoots. A good photographer will help supply you with a variety of landscape, vertical and square images. When it comes to Squarespace, you will want to have several landscape style photographs for your website pages. For a 5-page website, plan to have at least 10 photographs from your photo shoot. Another approach is to blend custom photos and stock images. An awesome resource for royalty-free, high resolution stock photography is Unsplash.com. Why high resolution photographs? High resolution photography ( Hi-res images) will retain their quality across multiple devices and are ideal for website pages. Read this article by techsmith.com to learn more about pixels and dpi—dots per inch. Due to their depth and quality, hi-res images are big, big files that need to be resized and compressed before uploading to your Squarespace website. Whether you have hired a web designer or plan to DIY, you can learn the basic steps that go into to prepping your images for the web.
5 EASY STEPS TO PREP WEB IMAGES
1. CHOOSE
The journey of a thousand miles begins with a single step. Recently, I read that the correct translation for this quote by Lao Tzu is slightly different than what has been popularized. The journey of a thousand miles begins beneath one’s feet. Draw inspiration from your everyday life for your photographs. You don’t need images of your feet on a trekking tour through Machu Picchu (though, that is cool too!). What images tell your story ? It is a great puzzle! Embrace the mystery and be intentional with your process for selecting your visuals. Find a web designer and a photographer who keeps the process feeling do-able. Pin ideas to a Pinterest board to keep track of your inspiration and interests.
When you have selected the photograph you want to upload, go to the Show Inspector Tool to check the file size. Go to Tools > Show inspector > see file size in MB, KB. Then you will look at the pixels to see image size in width and height. For a Squarespace website, you are aiming for under 500 KB. Your next steps will be to duplicate, resize and rename the image before you upload it to your website page.
2. DUPLICATE
A common mistake that people make is to rush these steps and not keep a record of their original image or the photography credits. A good practice is to duplicate any photo that you plan to adjust or resize. On a mac, you can use preview, go to file, select duplicate. Label the copy for its intended website page. Label the original to include any photo credits or pertinent information.
3. RESIZE
You are ready to resize your image. Why do you need to change the image size? When image files are too big, your website pages will load slower. Slow page loading can cause you to lose visitors. Let’s say you have a photograph that is 1 MB to upload and you want to resize it for your Squarespace website. On a Mac, go to tools > select adjust size, with the setting at custom pixels and the width and height locked to scale proportionally, reduce the width to 1500-2000. Then you will select file > export and reduce to 500 KB. You may need to use an additional compression tool such as tinypng.com (free) to resize some larger image files.
4. RENAME
After you have resized your image, you will want to rename the image file. The image file name should include SEO best practices. Keep the file name 60 to 100 characters, include a reference to its intended website page such as About or Shop. You can read more about SEO in my blog post, SEO Inspo + Checklist. If you are not so sure about your SEO strategy, keep the file name directly reflective of the image content or include a keyword from your website content such as garden, travel, fitness.
5. UPLOAD
Now you can upload your amazing photograph-duplicated, resized, renamed. Do you want to include any photography credit information in your site credits? Don’t forget to check how your image looks on mobile and ipad screens. Squarespace makes this super easy by selecting the various device view options. Looking for more information on prepping images for your website? Designer Christy Price offers a self-paced online course. If you need some extra guidance for prepping images, you can schedule a Power hour or VIP day with me here.