Too many of us overlook image best practices.
Using optimal practices with your images can help improve where and how often your site is found in search engines.
Page speed is a key website ranking factor for Google. Essentially, your site’s load time can improve or hinder it’s conversion rates.
The Aberdeen Group surveyed 1,048 online shoppers and found that 40% would abandon a site when it took longer than 3 seconds to load.
This is why optimizing images is so important.
Let’s look at some of the most important best practices for optimizing images and photos to ensure your website becomes and remains competitive online.
Don’t Overlook Image Slugs
Truth be told, I’d never heard of a “slug” (the non-icky kind, that is) until completing a marketing certification in 2017.
An image slug is simply the file name (URL) given to your pictures. For example, the slug for the above picture is: website-design-management700x500.jpg
I could have used a more keyword-rich slug for this image, however, I’m reusing this image from a blog post and didn’t make any adjustments to the file name/slug. I could have renamed to screenshot-website-images700x500.jpg or image-use-optimization700x500.jpg.
Here’s an example of image naming is in action:
Let’s say you’re writing a blog post called “5 Tips For Editing a Resume Without an Editor.”
The image you select for the top of your blog post (much like what you above) might be a photo of your monitor showing a resume you’re working on for a client (fictionalized, of course). Upon saving the image to your computer, you give the image a keyword-rich slug to help improve your post’s search engine rank position (SERP) — and possibly attract some eyes from Google images should you image become ranked there as well.
Is providing your images with a keyword-rich slug the “secret sauce” to catapulting your website to the top of Google Top 10 heap?
Probably not.
However, I do believe this technique provides search engines with a clearer picture of what your post and site are all about.
Alt Image Tags
Using an image’s caption field provides more photo or blog post descriptors.
You can also include a live link in this area too. Cool, right?
Too often, we skip by the small details to get from “to do” to “done.” Sometimes the small details seem so inconsequential and harmless to avoid.
Assigning your images with alternative text and title attributes are two of those small tasks that you shouldn’t avoid … and here’s why.
Remember I mentioned above that the image slug you select can help with your website’s search engine position?
Well, the same goes for the alt text you assign to your website’s images. Again, don’t expect your site to skyrocket to the top of Google mountain, but certainly taking just an additional 2-3 minutes to complete added image fields can go a long way to helping your site’s rankings.
Google offers a rather in-depth post titled Image Publishing Guidelines that’s worth reading, though what you will learn is likely what you already suspect. For example:
- Don’t keyword stuff your image file names (slugs), alt tags, or attributes (Note: the image title attribute is somewhat of a “blind spot” for mobile and tablet users.
- Use images that align with the topic of your blog post. For example, Google cautions: “…if you have a picture of a polar bear on a page about home-grown tomatoes, you’ll be sending a confused message to the search engines…”
Another way to add a bit more visual to your images is to utilize the “caption” field. The caption field enables you to put something witty or particularly notable about the photo or the blog post topic. You can also input a URL within the caption too. Not many people do this, for some odd reason.
Do You Have Permission For That?
I recently happened across a career blog that hasn’t been updated since 2014.
The site has more than 1,300 posts and was a very bustling site in it’s prime. The site peaked at 100,000 monthly visitors per month and currently has nearly 7,000 inbound links (IBLs).
Many of us would love that level of visitors.
Though, when you visit it today, you’ll quickly see old post dates, and more surprisingly, hundreds of broken images. The pages show .html page extensions and the site needs additional work to bring into compliance with mobile guidelines.
If viewing the site today, you would immediately blurt out, “What the heck?”
To be somewhat harsh, the site is now an eyesore. This is such a shame because what was once a beautiful career website with a unique brand has been demoted and become shamefully neglected.
The reason? Image issues.
The site owner deleted SEVERAL HUNDRED IMAGES from his website because of his inability to verify the source or “rights to use” for those images. The site was primarily made up of guest blog articles, which means the stock graphics may have been supplied by those guest writers. And although he never said so, I took his drastic actions to mean that he was caught using pictures he didn’t have permission using.
I mean, would you wake up one morning and delete all the graphics on your site, unless you had a damn good reason for doing so?
This is the time for you to identify and address your source of images before you find yourself in the same pickle jar as this site owner.
Are you new to Creative Commons – or don’t have a clue of what I’m talking about?
Creative Commons is a non-profit group that outlines the approved uses for creative works, such as images. Ideally, the images we use on our websites and blog should provide credit to the source of the images we use to include image source/artist.
In my case, I maintain an Essential Subscription with iStockPhoto.com, which affords me the ability to use their standard and signature images within my sites without source/artist attribution.
Here is what iStockPhoto.com’s license agreement states specifically to attribution and intellectual property rights:
“Do I need to include a photo credit? You do not need to include a photo credit for commercial use, but if you are using content for editorial purposes, you must include the following credit adjacent to the content or in visual production credits: “iStock.com/Artist’s Member Name.”
To learn more about Creative Commons and image attribution, I find this post very helpful and straightforward.
The point here is to make sure you have permission for all creatives on your website. Though we haven’t heard of much enforcement for the unauthorized use of photos, vector images, and so on, I suspect that will change in coming years. This could mean cease and desist notices and possibly even legal actions.
So, know exactly where your web designer and content manager are getting their images and that they have the right permissions for you to reuse those creatives.
Should you use stock images?
What? The above question might seem odd considering I just talked above about iStockPhotos.
But, there’s a new online conversation amongst content marketers that AVOIDING stock images just might be the best approach for site owners going forward.
The reasoning behind this is that visitors can grow tired of seeing similar photos from one site to the next. Of course, you can still use stock photos. Though find a way to customize and make your own by adding text (#3 tool below can help with this), performing some recoloration, or transposing additional features onto them.
Also, don’t overlook using professional photos of yourself or those of employees. This also helps add personality to your site as well.
6 Tools To Help You Develop/Optimize Your Website’s Images
In recent months, I’ve become quite fond of 5 tools that help me follow the best practices for website images.
You may have noticed that I use a consistent layout with blog posts. There are several reasons for this, though the most important is primarily so when I resize my images to fit optimally in my blog posts, I’m always shooting for 700×500 for the primary image and 300×200 for my featured image.
This makes my life as a Content Manager a lot easier.
For example, you’ll notice that I have an image at the top of this blog post and occasionally use additional photos and graphics throughout the remainder of the post.
I take the same steps anytime I’m ready to publish a new blog post.
My first step is to select a primary photo for my new post.
Tool #1 – iStockPhoto
To protect myself, I maintain a premier membership with iStockPhoto.com, as I mentioned above, which allows me to select and use signature photos that come with a standard license. iStockPhoto offers a large selection of photos and rarely disappoints.
You might be wondering why I don’t use a free online photo site. For example, FreeDigitalPhotos.net and Flickr.com. Honestly, I don’t use free image sites because I’m not confident in the origin of the photos and the permissions or terms and conditions applied to creative owners. Plus, I’m not comfortable with what using free images “says to Google.”
Plus, remember what I said above about Creative Commons?
Free image sites, like FreeDigitalPhotos.net, offer standard and extended photo licenses. Though, for the image to be used FREELY, an image attribution is required. This means you need to put the domain name within the attribution field or somewhere adjacent to the creative.
According to FDP’s terms, “If you use this free image, you must publish an acknowledgment to FreeDigitalPhotos.net and the image creator on the same page or screen where the image is used. If you are unwilling or unable to publish an acknowledgment, you must purchase the image, to avoid this requirement.”
Alternative sites for paid images include GettyImages.com, BigStock.com, and ShutterStock.com.
Tool #2 – Page2Images
Another tool I love, love, love is Page2Images.com. This free service enables me to take a screenshot of a specific page.
For example, see the screenshot of InterviewStrategies.com’s home page at the right.
Basically, the site works like this.
Input the URL of the page you wish a screenshot for and the site provides a 535×294 px graphic that you can save by right clicking over the image and clicking, “save image as.”
You can then resize website images later using a secondary tool, which I’ll talk about later in this post.
Tool #3 – PowerPoint
Few people know about PowerPoint’s image editing capabilities.
PowerPoint enables you to insert a graphic, add text overlay, insert a shaded box with color to offset the photo and so on.
Once the graphic design is to your liking, you simply take a screenshot of the finished creative and use the next tool (Pixlr) to crop and resize it appropriately.
For example, these graphics were made using PowerPoint:
Tool #4 – Pixlr Editor
Though this free image editor offers an array of functions, I primarily use it to resize my images.
That’s it. Nothing fancy.
I have learned (the hard way, unfortunately) that enlarging a picture deteriorates its quality. So, when using any image editor/resizing tool like Pixlr Editor, start with the largest image you can find and make it smaller (never bigger – unless only a tiny bit).
Because websites are laid out differently and possess varying column sizes, the ideal image size for me, may not be optimal for your site layout. So, when I say my ideal image sizes are 700×500 (this size works best inside the post) and 300×200 (this size works best for featured images), your site might prefer something different.
Tool #5 – Kraken Image Optimizer
Are your website images loading slowly? This is where Kraken can help.
Once you select and resize your images, be sure to optimize your images before you upload and use them in any blog posts.
Optimizing your images helps keep the size of your WordPress media file at an optimal level, plus optimized images enable your pages to load much faster. Since Google, in part, is taking site speed into consideration to determine search engine result positioning (SERP), keeping a fast website load speed is absolutely critical to ensuring your site elevates closer to the top of Google mountain.
This is really the main reason for using services like Kraken, which provides an easy drag-and-drop option for your images here.
Tool #6 – WP Smush
You might be wondering why I use 2 image optimization tools. I don’t really have a good reason other than to say that although Kraken routinely reduces the size of my images by up to 70%, WP Smush always seems to squeeze a bit more.
WP Smush is a WordPress plug-in that reduces the size of images upon uploading to your media file, making it an easy choice for many site owners.
