Website Prep School: Images 101
So you’re making a new website. Yay! Congratulations on taking this big step toward sharing your work with the world.
One of the first things you’ll want to do is prepare your photos and images to be web-ready.
If you’re working with me, I’ll share with you a file structure that mirrors the page structure on your site. It will be your job to fill those folders with text and images, so that we can easily grab and place your content, and style things on the page to express your brand. For many of my clients, this is the most “heavy lifting” they will do during the design process, but it needn’t be a chore!
Here are some tips for formatting your images for the web.
#1 File Type
Make sure the images you want to use are saved as JPG, PNG, or GIF.
(Things like PDFs or DOCs can be linked to, allowing visitors to download or view them in a separate window.)
For images with text in them, such as digital posters or logos, I prefer PNG, as the text in JPGs tend to look a little fuzzy when the file size is compressed. Learn more about when to use JPG, PNG, and GIF.
#2 Image Size
For Squarespace sites, we recommend that images are sized to between 1500 and 2500 pixels on the longest side, with a resolution of 72 pixels per inch (PPI). (Don’t worry about dots per inch (DPI), as that’s for printing only.)
Keep in mind that horizontal images may be more suitable for filling the screen or banners that span across the screen. I recommend that background images always be sized to 2500 pixels wide.
To resize an image on a Mac, open it in Preview, then go to Tools > Adjust size… and toggle to Pixels to resize as needed. Click OK and Save.
Adjusting image size in Preview on a Mac.
Before adjusting the size…
… and after.
NEVER SIZE UP. Always start with the largest image possible and size down as needed. If your image is too small, it will appear grainy on the screen—not a good look!
If you’re going to crop your image, do that first, before resizing it.
You may want to keep your original, higher resolution, print-quality images somewhere else in your files for other uses. That’s why I find it helpful to keep a separate folder specifically for website-formatted assets.
When you’re done, the ideal file size is roughly 500 KB to 2 MB. Images that are too large (or too many on the page) can slow down load time for the page.
#3 File Name
Use only letters, numbers, underscores, and hyphens in your file name. Other characters can cause behavior problems on your site.
By default, an image's file name acts as alt text. Alt text is what will display if the image is unable to load in a browser. If accessibility is a concern for you (and it should be for all of us), be aware that alt text is also helpful for assistive screen readers, so you might want to give your file a simple, descriptive file name. Additionally, search engines use it to identify the content of a page, so good alt text can help with your SEO (search engine optimization, or how easy it is for folks to google you).
Many artists I work with use a traditional “Title-Photographer-Date” convention for naming their images. This is also fine, and will help us keep your content organized by project or body of work, and caption the images with proper attribution.
If you want to add more descriptive alt text for assistive screen readers (in actual sentences), you can create an image caption. I will often ask my clients to create a simple document or spreadsheet (example below) that lists each image file name and the caption they want to go with it, so that I can easily paste the correct captions on their website. Learn more about how to add alt text to your Squarespace site here.
Good luck with your website project, and have fun!
