Search Engine Basics: Optimizing Images for Your Website

You have great pictures to add to your website, but every time you add them, the page feels much slower. Before you ever consider stopping the use of those pictures, it is entirely possible to showcase your campus, culture, and community without bogging down your website. In fact, it’s a pretty important search engine basic.

If your website loads slowly, it frustrates your Gen Z users (in particular) and can drop your SEO rankings. One of the most common problems causing slow websites? Images that haven’t been optimized.

And here’s the thing – the steps we take to optimize images also improve the overall accessibility of those images, too. Without these steps, not only can your website run slowly, but you can also expose your organization to unnecessary legal and ethical risks.

Ready to solve this problem? In this article, we will break down the full image optimization strategy you need to balance beautiful websites and technical performance.

A lot of SEO articles focus on how to write articles filled with keywords, headings, and structured data. But it’s not too often that we talk about how the images on your website affect your SEO.

And yet, crazily enough, image optimization has long been a key component of search engine optimization.

The images on your website can appear in Google Images, helping you reach people organically through a whole different channel. Students and parents alike can search for facilities, dorms, and even classrooms, and see what your university is like. But beyond getting found through image search, your images impact your overall search engine rankings, too.

While Google and other search engines are increasingly using AI to help them understand your website, they cannot see an image the way a human does. What we name that image matters. How we optimize it affects whether or not we get the “credit” for that image on our website in the first place. And just as a quick aside – since blind and visually-impaired students could be using assistive technology like screen readers, this also helps them understand your website, too.

Beyond all of this, Google also penalizes slow-loading websites. If your website does not perform well, it will not show up at the top of Google search results. Images are typically among the “heaviest” parts of a webpage, dragging down load time. Optimizing them allows you to improve your authority and keyword rankings.

Before we dive into what anyone adding content to a website can do, we need to talk about the code. I know, I know, you are not the one who does that. But the image’s code matters, so I want to ensure you have this discussion with your web developer.

For one, any image on your website needs to be placed in an <img> or <picture> tag. Not as a background image, hidden in a <div>. You will lose out on the value of the image if it’s semi-hidden in the page.

Wondering if this is all worth it? Remember: if a website takes too long to load, your Gen Z prospective students are gone, never to return.

Much of the work in image optimization happens before you ever upload an image to your website. (Don’t you love when search engine basics like this happen before you get online?) Let’s talk about how we resize your images and save them correctly to load fast on your website.

If you have a WordPress website, there is a high chance that your web developer uploaded some kind of image compression plugin. We do this because we know not all admins will resize an image before adding it to the media library, but you should.

Compressing an image means reducing the overall file size (shrinking the number of kilobytes or megabytes it uses). The downside is that it can degrade the image’s quality, even changing colors. Resizing it means we adjust the actual size of the pixels in an image.

When your campus photographer hands over images they have taken, it is very possible that they have given you a huge 10MB, 6000-pixel-wide image. Just one of those will cause severe lag on your website.

Before you do anything, resize that image to the size you actually need. Check the size of the spot on your website where you will be placing the image. What’s the max size it will be seen? For a lot of the websites we build, full screen is 2000, half is 1000, a quarter is 500, etc. This is a great time to have your web developer check and provide you with an image size reference to keep on hand.

Now that you have the image the right size, you need to save it. Guess what? The format matters a great deal to how large the file itself will be.

Traditionally, you had 2 options for saving static images:

• PNG – Only use these when you need a transparent background. These are much larger.
• JPG – Smaller image file size, but not as crisp as a PNG.

However, fun for us web developers, the world has been working on some new image formats.

• WebP – Smaller than JPGs and can handle transparency. However, these are newer, and while they’re supported by most web browsers, devices, and content management systems, you may encounter issues. (Apple only added support for them in 2020, so there are some misconceptions that they are not Safari-friendly.)
• AVIF – Even smaller than WebP images, AVIF is not yet usable by everyone. (Especially if you think your audience is using older devices.) These do tend to have better quality than WebP image compression, though, so keep an eye on these.

This may be part of your discussion with your web developer and require some testing, but start trying to save as WebP moving forward. If you aren’t sure your website can handle that, save as a JPG unless there’s transparency.

After you have chosen the format for your images, you have to name them. What you may not know is that Google looks at the image file name to get a first idea as to what’s in those images. Screen readers and assistive tools may also read image file names to users.

How do we want to name images safely? Get away from the camera’s default DSC00241 file structure and name it something descriptive, with dashes in between each word.

For instance, if you are uploading an image of students at a recent club event, you could name it “students-social-club-event.webp” or “students-talking-at-club-event.webp.” Think of the file name like the first impression of what is in the image.

Can you use SEO keywords? Yes, if this is actually accurate for what is in the image.

Theoretically, if you have correctly resized, picked the right format, and used a good file name, you have done a lot to improve your SEO. However, there is some work to be done when you upload that file to your website, too.

Almost every image you upload should have an alternative text description. Now, there are some nuances to this, including what we distinguish between decorative and non-decorative. But the ALT description will ensure optimal accessibility for your images and allow Google to capture the full context.

Alternative text is what is shown if your image does not load, and it is read to individuals using screen-reading tools. This allows people to get the full context of the image without being able to see it at all.

A few years ago, it was common SEO practice to use the ALT description to stuff keywords. Why is that bad? For one, Google still does not understand what is actually in the image, but, more importantly, that does not help your users who require ALT text to understand why the image is there.

To write good alternative text, we need to describe the image’s context and purpose. You also do not need to include “image of” or “graphic of” as the screen-reading tool will explain that. You want to keep this description super short, think less than 125 characters.

Taking our student club example from earlier, a good example of ALT text could be: “Multiple students smiling and talking to each other at a social club event in the ballroom.”

Alternative text gets a bit more complex when we are uploading infographics to our website. While these images are great for displaying statistics and communicating a lot of information in a small space, they can be difficult to make accessible.

How do you write ALT text for these? You keep it short. Use the ALT text to give a brief summary of the image, still staying under 125 characters. Then, underneath the image, you should include a full transcript of the infographic. If it is especially large, you can link to a dedicated page, but I think that’s too much work for most people to dig through.

Make sure the transcription’s formatting is super easy to read and understand.

Optimizing images should not rest solely with the web development team. It is a core part of your overall marketing and website strategy. Following these simple steps will help improve your SEO, user experience, web accessibility, and even brand reputation.

Will this take you a few extra minutes when you are making website updates? Sure, I guess. But that extra minute means your content is discoverable and accessible versus, well, not at all.

You do not need to create a new SOP for your team either. Make this easy and download our free Image Optimization Cheat Sheet. This has all the details you need as you resize, save, and upload your images.