file names, minimize file sizes, and add relevant
caption information.
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.
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.
Optimizing images on your website can help to improve your website, and TBH Creative would be happy to develop a strategy for handling art and photos. Learn more about our web design services.
