Using images effectively on your school website is a great way to engage visitors! From your banner images on your home page to staff portraits, images bring your school website to life. Where you place an image and what kind of image you use can take your school website to the next level. Building an image bank for your school district is a great way to help elevate your website.
Images are an important part of any website. On school websites, they have two main jobs: showcase your school culture and support content on the page. Parents will probably visit your school’s website before enrolling their child, so you’ll want to ensure that your website is making a good impression. Parents might see those images before ever seeing the school grounds, so choose the images that best represent your school. You can show off your school facilities, playground, cafeteria, and more! Parents love to see images of kids having fun online. Think of every image on your school website as a way to show parents how great your school is.
Images should also support the page’s content, either by reinforcing the messaging or by breaking up the text on the page. Images make it easier for visitors to find what they’re looking for online. When people use a website, they take in the visual information before reading the text on a webpage. People might not even read a page if the image is unrelated to the information they’re looking for – they’ll assume they’re in the wrong spot and click away from the page.
Imagine you’re looking for graduation information online, but when you click on the page, an image of kindergarteners appears. Unless the page is about kindergarten graduation, people won’t even bother reading the page, because the image is indicating the wrong content. Choosing images that complement the page’s content will improve user’s experiences and help guide them to the content.
Would you want to read this article if it was just paragraphs of text without any supporting images? Probably not. But the images break up the text, making the articles more enticing to read. They also contextualize the content on the page and give readers a little mental break as they read through the page’s content. If you have a page with a lot of content, add images throughout it to help space out the content so it doesn’t look daunting to read. Adding different image alignments (left/right, center) throughout the page creates a more interesting visual layout and can help keep visitors engaged. Remember, users expect to scroll through a webpage, so don’t worry about images making the page longer!
Not every page on your school website needs an image. Pages that showcase your school and its culture to parents (About Us, Athletics, Programs, etc) should have high quality images to accompany the text. Most of these pages are in the top-level of your menu, and help organize other information on your website.
The most important image on your website is the banner image on your home page. It should create a warm, welcoming feeling and showcase your school, students, and/or staff. Other pages should have images that support the content on the page. Not sure what to include? Here are some ideas for images you could include on common school website pages.
About
- Students on school grounds having fun
- School building
- Front entrance
Programs
- Academic spaces in school
- Students in class
- Field trips
Athletics
- Recent games or practices
- School gymnasium
- Student athlete team photos
Student Services
- Graduation images
- Support staff working with students
- Students doing school work
How do you tell what pages need an image and which ones don’t? There are a few of questions you can ask to help narrow it down:
- Is this a top-level page in your menu?
- Will the information on the page help parents decide if they want to send their child to your school?
- Would an image here help clarify the content on the page or would it distract from it?
If you answered yes to one or more of the above questions, try to include an image (or images) on the page.
Image size is especially important for your banner image on your home page - always double check that it’s sized properly and not cut off. Your website provider should indicate the best size for a banner image on your website.
For images on other pages, check how the image aligns with content. Sometimes, an image aligned on one side or the other can result in lines of “widowed” text, where a line extends to one side on its own. If an image is extending the full width of the page, such as at the start of this blog post, it will really break up the flow of the content and add a lot of extra emphasis. If you have an image of this size on your page, ensure that it's high resolution and it relates to and enhances the text on the page.
Avoid images that you don’t have permission to use, such as anything with a watermark. And remember, just because you can download an image from Google, doesn’t mean you have permission to use that image on your school website. If you are looking for stock images, we recommend Unsplash, where you can find a wide variety of free high quality stock images.
Most importantly, don’t include text on your images! We see this all the time on school websites, and while it may seem like a great idea to help communicate what’s going on the page, that’s not where text-based information goes. There’s a reason that websites have different places for text and images. Text included in images poses a big accessibility problem: not everyone uses a computer in the same way. For example, some people have software that reads a website to them, because they can’t see. But if you’re adding text-based content in an image, that will get missed by someone accessing your website in this way. It also won’t get picked up by things like Google translate, so anyone needing to translate the website won’t get that information. Your images should only be images, and not include text. You should be able to add an Alternate Text Description to images on your website. This text is great to include to keep your website accessible. When you add alternate text to an image, that’s what will be read out in lieu of the image.
An image bank is a great way to ensure you have high-quality, recent images for your school website. If you’ve never built an image bank before, it’s pretty simple. Start by attending as many school events as you can: sports games, student performances, field trips, science-experiments in the classroom, etc. Keep these photos organized on your computer or on something like Google Photos (ask your district webmaster, they should know what’s preferred for your district). Create a folder for the year and a sub folder for each event to keep your images organized. When you want to update your website with a new image for the volleyball team, you’ll be able to quickly find a recent image and upload it to your website.
It’s also a good idea to swap out any outdated images on your website for new ones. We’re amazed at the number of schools who have photos of students from ten years ago on their websites! Changing out your images (especially your banner image) is a great way to keep your website fresh for returning visitors.
Images on your school website should help it shine! They should support and enhance the content on the page (without using any text in the image) and create a good first impression of your school. It’s a good habit to double check images on your website to ensure they’re properly sized, not creating any widowed text, and complementing the page, not overwhelming it. Creating an image bank for your school is a great way to elevate the images on your website.