Great images draw the eye and bring your website content to life for your potential clients. Using them effectively, though, is not as simple as choosing great images and adding those images to your website.
You also need to optimize your website’s images so that they are accessible to users, understood by search engines, and ready to be a part of an engaging online experience for your perfect clients.
Need help whipping your images into shape? Below, you’ll find our best tips for optimizing images for your law firm’s website.
Optimization Starts With the Names of Your Image Files
You should always optimize your images with descriptive files names, including little touches that make those file names play nicely with your website.
Image file names are typically NOT the place to target high-level, vanity keywords. Instead, you should stick to short, simple descriptions of what the images show.
That being said, though, the photographs on your bio pages can be the limited exception to this rule. For example, if you want to name your bio photo “des-moines-personal-injury-attorney-carmen-sandiego.jpg” instead of “carmen-sandiego.jpg,” that is acceptable because it still appropriately identifies the subject of the picture.
We also recommend that you always use dashes between the words in your image file names. Spaces in filenames aren’t always handled well when they’re uploaded, and you can sometimes see some crazy characters, like this:
Those “%20”s replace the spaces and make a mess of the filename in the URL. When you instead use dashes in your file names, there are no spaces to worry about.
It might seem like a lot of concern over something small, but you and your users get a lot out of the few extra steps it takes to name image files appropriately.
Need some concrete examples? Take a look at this picture:
Let’s say that we have three options for naming this image file:
- img-377863702.jpg
- san-antonio-medical-malpractice-attorney.jpg
- medical-patient-in-hospital-bed.jpg
Example A, “img-377863702.jpg,” is a terrible file name, from an optimization standpoint. It gives no information about the file and doesn’t help anyone understand what it contains.
Example B, “san-antonio-medical-malpractice-attorney.jpg,” is an unacceptable file name. Again, it does not help anyone understand what the image file contains, and it adds salt to the wound by rudely stuffing keywords where they do not belong.
Example C, “medical-patient-in-hospital-bed.jpg,” is a good file name and the best choice of the three. It describes exactly what is in the image, and it does not try to shove keywords in your face. Imagine, too, how much easier it is to find and use this image if you download it or want to use it again later! You know what to expect from the image before you even open the file or see a thumbnail.
Compress Large Images to Retain Quality and Protect Load Speeds
If your site loads quickly, that’s a good thing. Google likes fast sites, and so do your site’s visitors. That is why you may have to do a little balancing act with the images you use.
Few things slow down page load times like humongous image files, particularly huge image files that have to be shrunk to a small display size on the page.
You may think you’re doing the right thing by using the 4MB, 2080x4056 pixel version of your photo. However, that huge image is going to considerably hamper how quickly your page loads, and you might be shrinking it to a 200x300 pixel image anyway to fit the layout of the page.
Fortunately, you can quickly and easily compress an image (while retaining its original quality!) to reduce the file size of your image. I like to use TinyPNG, though JPEGmini (notice a trend?) is also a fine option for fast, free, in-browser image compression. Simply drag and drop your image. It will be compressed, and you can download your new, smaller file. This compressed file is the one you should upload to your site.
Keep in mind that, along with the size of the image file, the size of your image as displayed on your site matters. If it is too small, it lacks visual effect and can be hard to understand. If it is too big, it can mess up the text formatting on the page and become a distraction. For example, an image that is over 500 pixels wide is so big that it will cause problems with the way your website displays. As an example of an image that is too small, here is our image from above shrunk by half:
Are you squinting to figure out what is happening in this picture? Does the smaller picture have the same visual impact as the larger version of the image? An image’s display size can make a surprisingly big difference!
Use Alt Text to Help Search Engines and Screen Readers Understand Your Images
“Alt text” is a text description of an image that is added to your page code with the image file. Alt text helps users with visual impairments, users using screen readers, and search engine crawlers understand what the picture should show, even though they may not “see” the image directly.
Alt text can also help visitors understand what they should be seeing in the event of technical difficulties that prevent images from load properly on the page.
Like image file names, you want your alt tags to be short, simple, and descriptive of the image. Remember that the alt text you write is there to help people understand the picture on the page and make your website more accessible. While keywords can naturally fit into alt text, trying to over-optimize or stuff keywords here can get you in trouble with Google and disappoint your users.
If you are having trouble thinking of alt text to add to your images, imagine they are being described to you by a screen reading device. Screen readers already tell users that they are describing an image, so you don’t have to worry about prefacing your alt text with words like “picture of” or “photograph showing.”
You want your description of the image to be straightforward, but as descriptive as possible. For example, the alt text for a photo of the Statue of Liberty could just be “Statue of Liberty,” but you can provide a better user experience by being a little more specific. For example, you could use alt text to more accurately describe your image as an “aerial view of the Statue of Liberty” or a “stylized Statue of Liberty holding U.S. flag.”
Give Your Images Some Space to Look Neat and Professional on the Page
Sometimes, images speak for themselves. However, most of the time, you are using the images on your attorney website to help illustrate and bring interest to your text content. They need to look nice, but they can’t interfere with the text on the page.
DSS gives you a lot of flexibility for stylizing your images and formatting text. One of the best and most common ways to get started is to learn how to add margins to a website image and use wraparound text.
Wise use of margins and text formatting gives your images a professional-looking touch, and the extra “white space” between text and image improves the reading experience.
Get Help Making the Images on Your Law Firm’s Website Perform Better
Little optimizations and extra steps are what make the user experience on your website stand out to your perfect clients. However, it can be a challenge to keep up with every detail and follow through with every best practice on your own.
Are You A Lawyer Or podiatrist Who Wants To Learn How Solid Content Can Earn You More Clients?
If you are seeking a trusted, authoritative partner to help you write content that not only attracts but actually converts into clients, Foster Web Marketing is here to help. Contact us online or call our office directly at 866.497.6199 to schedule your free consultation. We have been helping clients throughout the United States and internationally since 1998 and are confident we can help you not only reach but exceed your goals.
