Optimizing images for your website

Screengrab of a recent TBH Creative blog post that incorporates an optmized image
When adding images to blog posts, use accurate
file names, minimize file sizes, and add relevant
caption information.
Have you visited a web site that loads slowly because the designer embedded a really high resolution photo on the page? Ever landed on a web page from a search result that includes a piece of art that confuses you because it's not labeled and has nothing to do with the content?

When images are improperly incorporated on websites, it can frustrate users, but that's not all. Bad images may also hurt websites when it comes to user experience issues related to accessibility as well as search engine optimization problems, like bounce rates.

It takes a bit of extra time on the front end, but proper image optimization results in better web pages. When it comes to ideal image optimization, though, the solution is easy. Just follow these best practices:
  • Use labels,
  • Minimize file sizes, and
  • Provide context.

Labels

Make sure you always name your files logically and use accurate and tidy descriptive labels.

File names

Your search engine rankings will improve if you add descriptive names to your files. Keep in mind what you want the image to rank for when you pick the name. This keyword (or set of keywords) should play a part in your file's name. For example, for a photo of a smartphone, which file name do you think would tell more valid information to a search engine: IMG_8922.jpg or smartphone.jpg?

Alt attributes

Images' alt attributes (sometimes referred to as "alt tags") are that provide alternative text when  images don't render on screen.

In simple terms, the copy added as a value to an image's alt attribute is meant to be an alternative for the image in instances when the user cannot view it (e.g., slow connection, error in the src attribute, or if the user uses a screen reader).

The alt attribute is supported in all major browsers.

Helpful hints: As you write the text for the alt attribute, keep in mind what information would be useful to someone who cannot see the image. The text should describe the image if the image contains information. Use alt="" only if the image is used for decoration.

File size

To keep users happy, make sure your image file sizes are as small as possible (without sacrificing quality) to minimize download times. Note: page load times also influence SEO rankings, which is another reason to keep image files optimized.

Compression tools

Even if you don't have a fancy image editing program like Photoshop, you can use one of several free options online to reduce your image file sizes. Here are some options we like:
To learn more about file image compression check out TBH Creative's recent post blog "Quick Tips: Optimizing Images."

Context

We've all heard that a picture is worth a thousand words, and that's why captions and credit lines are so important: they provide context.

Jakob Nielson’s important web usability study from 1997 revealed that 79% of web users scan rather than read. When scanning web pages, along with bold headlines, users are naturally drawn to images. Take advantage of this known user behavior by making sure to provide additional, relevant information through the use of captions and credit lines paired with your images.

Captions

According to KISSMetrics, "captions under images are read on average 300% more than the body copy itself, so not using them, or not using them correctly, means missing out on an opportunity."

Captions, also called cutlines, are the succinct and informative text blurbs that sometimes appear with images. Most of the time, captions explain what is happening in the image that isn't obvious to help explain why it's included on the page.

They can be deep—long enough to intrigue your user to dig in and read the body copy—or they can be snappy—short enough to act strictly as a descriptive label.

If you don't have a caption style set-up for your website yet, this Typophile guide will help you get started.

Helpful hints: If you want your images to show up on a Google Images search? Captions can help. They are a good place to incorporate keywords.

Credit lines

Credit lines identify the photographer, artist, and/or copyright holder for images. This text will often appear as part of caption text or adjacent to or overprinted on top of photos. It's the equivalent of a byline for copy.

Joy

About the author | J.O. Miller

Joy is the creative director at TBH Creative and helps companies use their online communications to build, design, and manage their brands. She likes to blog about latest trends, social media, conferences, and share tools.

View more posts by Joy

Receive articles in your inbox