5 Don't-Skip Steps when Uploading Images to your Website
- Remove the current class from the content27_link item as Webflows native current state will automatically be applied.
- To add interactions which automatically expand and collapse sections in the table of contents select the content27_h-trigger element, add an element trigger and select Mouse click (tap)
- For the 1st click select the custom animation Content 28 table of contents [Expand] and for the 2nd click select the custom animation Content 28 table of contents [Collapse].
- In the Trigger Settings, deselect all checkboxes other than Desktop and above. This disables the interaction on tablet and below to prevent bugs when scrolling.
Images pack a big punch online. They stand out and draw attention.
So, you’ve found the perfect image for your webpage. What now? Most people will simply upload the image. Woohoo, you’re done, right? Not exactly. These are the five essential steps you should take when uploading a new image to your website. Yes, the extra work is a little annoying at first, but following these steps will improve your site’s SEO and web accessibility conformance. Aka — these steps help turn your image into a client magnet, helping to bring traffic to your site.
01. Name your images.
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 the file name is another way to let search engines know what that image is, which improves your search ranking. There are some simple rules to follow when naming your images.
- Use all lowercase characters.
- Don’t use spaces or underscores to separate words.
- Use hyphens to separate words.
- Don’t use any other special characters except hyphens.
- Don't use prepositions (e.g. for, in) or definite articles (e.g. the).
- Don’t try to stuff keywords in, just describe the picture as efficiently as possible.
Keep these image names short. Search engines like Google will only pay attention to the first five words.
Batch renaming
To save time, you can batch rename images aka rename a bunch of images at once. I’ll usually start by batch re-naming images by group. So if you have a whole gallery of images from one event, you might rename them as a group with numbers at the end. e.g. “launch-party-company-01”
If you’re a photographer, you may already do this in Lightroom. But you don’t need fancy software to do this. You can batch rename on a mac and rename multiple files on Windows.
TIP:
I often include the photographer’s name at the end of my image names as an extra way to credit them. (e.g. two-cats-oscar-pippin-eleanor-philips.jpg)This is especially useful for websites using lots of stock imagery. Not every image has a natural spot for a caption, so this is just another way to make it clear whose work you’re featuring!
02. Resize your images.
Images should be as small as possible while still looking good. A super high-res image is great to have, but they’re often too big.
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).
Ideally, your 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 resize images using Preview. When the image is open, go to Tools > Adjust Size. From here, you can resize based on pixel width. For most images, a longer side of 1000px is good.
Or, use a bulk image resizing tool like Red Ketchup. You can choose to resize based on file size.
03. Image named and smaller than 1MB? You’re ready to upload.
It’s the middle step. You’ve done it before. You’ll do it again. Hang in there, two to go.
04. Write alt text.
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.
Ideal Alt Text for an image is 125 characters or less, and get to the point of what the image is depicting and how it's functioning within the site.
As an example, the image we renamed earlier has some pretty straightforward alt text: “Renaming images example. Two cats sit on a messy bed, looking up. One is a silver tabby and the other is dark grey with white spots.”
When describing your work, feel free to get more poetic. A florist may have 10 images of wedding centerpiece arrangements. The alt text for each could be "Centerpiece floral arrangement" but you can give more details — color palette, vibe, inspiration, season, specific flowers.
Think about why you included that image when writing alt text. You don't always need to be as explicit as "renaming images example," but here it works.
05. Credit your photographer.
Last, but not least, is photo credit.
Photographers each have their own rules regarding how they should be credited, so check with them first! But typically, credit involves listing their name and sometimes also a link to their website or instagram.
Where to include credit.
- on social (tag them in the photo / in your caption)
- in a caption (on your website)
- in the footer or in the text of the section / page.
- on a separate page where you list all photographers / contributors
Creating a credits page where you list all the photographers and any other pros whose work is on your website (e.g. web designer, graphic designer, copywriter, videographer, etc.) can be a good way to give credit if you have a bunch of decorative images.
What about stock photos?
You may license stock photography, or you might turn to Unsplash or Pexels for background imagery or textures. Images from these sites can be used without photo credit, but it’s still good to credit, and especially nice to keep a list and link out to the photographers who work you use. This is a great example of when to include the photographer’s name in the image name.
So, once again, the five steps are:
- Name your image
- Resize your image
- Upload the image!
- Write alt text
- Credit the photographer
These steps will make your images hard-working assets — bringing in traffic as well as offering visual impact.