What does this mean? There are two main steps you should take before jumping into customization: Resizing and Renaming files.
The assumption is that once you’ve gotten all your images, files, copy, etc. together, you’re ready to upload. But taking the time to optimize your content — especially your images — is an important step.
“Optimizing” is anything you do to make your website run more efficiently, improve user experience, and increase legibility for search engine robots and screen reading technology.
For most websites, that’s mostly about your images. High-res images will look best, but if you upload them at their original size, you might be slowing down your website.
Taking the extra time to prep your images is important for a few reasons:
Renaming your images is another often-skipped step that you should take. While you won’t see it on your website, it means that when someone googles you, your images definitely come up.
Here’s how to prep your content for the web.
Taking the extra time to optimize your images can improve your website’s load time.
You want to make sure your image is as small as possible while still looking good on every screen size. When you receive high res images from your headshot photographer, they may be anywhere from 2MB to 18MB+.
Image size refers to the amount of storage space an image requires (like GB, MB, and KB). But the size of the image, measured in bytes, is impacted by the width and height of the image (the image dimensions) as well as the resolution (ppi).
Your mac will show you the image size, dimensions, and resolution in your finder window.
Ideally, web images are smaller than 500KB, but I use 1MB as my upper limit when it comes to banner or fullscreen images. For any image that’s going to span the full width of the browser, look for an image that’s 2000px wide. (Or wider, then you can resize it down.)
If you’re on a MacOS, you can individually resize images using Preview.
A faster way to resize images in bulk on a Mac is to:
Bulk resizing and renaming image files on MacOS (no audio)
Bulk resizing and renaming image files on MacOS (no audio)
You can also use a photo resizing tool like https://redketchup.io/ or a batch resizing tool like https://bulkresizephotos.com/en.
Keep track of photo credits for yourself, so you can properly credit your photographers. We’ll walk through where this information will go!
Photo credit typically includes the photographer’s name and website or instagram link, but each photographer may require slightly different credits.
Yes, what your image file is called matters. It may seem like something no visitor to your site will see (unless they download your image) but if alt text isn't readily available, your image name will be what is pulled for alt text, so having something relevant, like your name, instead of DSC_0456.jpg is useful.
Also, if someone is searching for you and your name is in the file name, your image is more likely to show up in their search results.
So you're just trying to make sure that everything is as clear as possible.
Try to keep these image names under 5 words, but you can go over 5. The first 5 words will be indexed for search engines.
<aside> ✨ Tip: Add the photographer name to the end of your file name. I like doing this to make sure the photo credit stays even if the image is pulled off of your site. Don’t count this towards the length of your file name.
</aside>
Example: eleanor-philips-actor-headshot-austin-ruffer.jpg
You can batch name changes, change files so you don't have to do them individually. This might be ideal for an album of a photoshoot done for a campaign with one photographer, where you can name them all your-company-fall-campaign-01, your-company-fall-campaign-02, etc.
Although, even then, you benefit from adding an image specific keyword(s) in place of the numbers:
your-company-fall-campaign-shirt, your-company-fall-campaign-sneakers-blue
How to batch change image names on a Mac
How to batch change image names on Windows
Keep track of photo credits for yourself, so you can properly credit your photographers. We’ll walk through where this information will go!
To make sure your headshot and resume stay together, I suggest combining them into a pdf file. If you’re not sure how to do this, you can use a tool like Adobe Acrobat’s online pdf merger.
Alt text stands for Alternative Text, and is sometimes referred to as alt tags or alt descriptions. This is the text that is read by screen readers, displayed if an image doesn't load, and can also be read by search engines.
Ideally, your Alt Text for an image should be 125 characters or less, and get to the point of what the image is depicting and how it's functioning within the site.
example Alt Text: Brown tabby cat lays on his back on a gray couch, his paws tucked up against the white fur of his belly.
Alt Text is not necessary for images that are purely decorative, since they can make your site hard to follow for screen reading technology.
For a deep dive into Alt Text, here's an article from WebAIM (Web Accessibility in Mind).
Image Descriptions are longer, more detailed descriptions of the image. These can be 1-3 sentences, and should paint the picture of the image. It can include information about the mood or vibe, the action taking place, and key information about the subjects of the image. These can be entered as a caption, but aren’t needed for every image.
example Image Description: Brown tabby cat lays on his back on a gray, velvet couch, his paws tucked up against the white fur of his belly. The cat is resting up against a person's hand and leg, both out of focus.