How to Optimize Images for Your Website
Without sales, your company won’t generate the revenue it needs to survive – and thrive – in a competitive economy. And sales begin with quality leads.
Have you ever evaluated your company’s ability to bring in high-interest sales leads? Are you using your website to its full potential as a lead generation system? How much can your sales increase with a well-optimized website that brings in unique, high-quality leads?
To answer that last question, we’ve seen results up to 100%.
A website that has been fully optimized with industry-related keywords for search engines has the power to collect leads and fuel your sales team’s goals. Optimizing a website requires many components, but for now we’re going to focus on images.
One of the first steps to create a high-interest sales lead is to grab their attention from search engines and direct them to your website where they are funnelled through the buyer’s journey – awareness, consideration, decision. Optimized website images can improve search rankings and click-through rate, directly impacting website traffic. Improved click-through rate also typically improves search rankings, so you get dual benefits. Optimized images can help your website get more views in both organic web search results and image results, further rewarding your SEO efforts.
The key is to optimize images according to SEO best practices so that they can be searched, indexed, and found in search results.
But SEO isn’t the only master here. Google cares about user experience and so should we. Images help your website visitors understand, visualize, and relate to your services or products. Visually, they break up the text into digestible chunks; viewers can glance at an image and get a general idea of what it is you do without reading any of your content. Images are easier to recall after your visitor leaves your site.
Key take-away: For the sake of SEO and on behalf of your readers, every single webpage and blog article on your website should have at least one well-optimized image.
You may be asking, “So what are the best images I should use on my website?” Well, first, you need to follow copyright regulations according to the Digital Millennium Copyright Act. This means you can’t download and use whichever image on the internet suits your fancy – you don’t want expensive fines or penalties. So be sure whatever images you use, you have the right and license to do so.
When it comes to the different kinds of images at your disposal, options are virtually limitless:
Types of images:
- Original Photography – by far the most preferable option
- Stock Art – a workable solution if you can’t use original photography
- Animated GIFs – continually rising in popularity these days
- Clipart, Vectors, & Icons – useful for lists to break up the content
- Infographics – helpful when you need to visually explain a concept in an eye-catching format
- Illustrations & Cartoons – an often humorous, memorable way to make a point
- Charts & Graphs – display statistics and compare facts
- Screenshots – a convenient way to visually share a concept
In general, images that evoke emotion and include people in them are the most popular. We find that real people like real photos – they like to see your team working in a real company, as opposed to stock art that can often look staged and fake. Obviously there are exceptions and it depends on your industry/business and what appeals to your specific target audience.
If original photography isn’t an option for you, we like to use free resources like Unsplash and Pexels. Flickr is another popular option, but make sure you filter by license to find pictures that don’t have copyright restrictions. Although they’re second-best to authentic, real-life images from your business, free photos like these don’t appear stocky.
“You can also personalize stock images through free photo editing tools. Our favorite is Canva. It allows you to easily add text, frames, borders, logos, and illustrations to your photos.” ~ Kendall Brittingham, Content Writer
Search engines don’t necessarily care what types of image appear throughout your site as long as they are optimized. So choose the option that best caters to your viewers. What resonates with them? What catches their attention? Then choose accordingly.
Once you have the images you want to use, you need to select the right format.
JPEGs are the most common because they’re supported pretty much everywhere, so you can’t go wrong with JPEG. JPEGs can be significantly compressed and resized but still maintain high-resolution of the image. Although they can’t be used for transparent backgrounds, they accommodate many colors, making them the most common choice for website images.
GIFs are best used for simple animations. Since they use a limited number of colors, they’re not suitable for still-lifes, but their small file size makes them work well as an additional page element.
PNGs are best used for transparent backgrounds since their file size is larger than JPEGs. Photos with text should be formatted as a PNG. Since they’re more modern, PNGs may not be supported in some places.
SVGs can convert an image to text, which is especially helpful with icons. If the icon file is 2D, it can be saved as SVG which can be scaled up or down without losing any image quality. “We should use them when we can. I think they stay nice and crisp.” ~ Lisa Courtney-Holmes, Creative Director
Now that you’ve selected the type (or types) of image that suits your target audience and the image format, let’s talk about how to optimize those images according to SEO best practices.
Make sure your industry-specific keyword appears in the image’s file name, title tag, caption, alt tag, and description. Let’s break each one of these down.
1.) File name
Don’t use the automatic file name (the URL of an image), which looks something like “46427905_l.jpg.” It doesn’t mean anything! The file name should include the keyword but it should also describe the subject matter of the image to help with search queries. If possible, include the keyword in the beginning of the file name. It’s also important to use hyphens (-) instead of underscores (_) or spaces.
2.) Title Attribute
The title attribute will automatically mimic the file name unless otherwise specified. You can include your keyword in the title attribute, but it doesn’t necessarily help or hinder SEO. The text will typically appear in a tooltip when a cursor hovers over the image.
In WordPress, captions appear in a little gray box beneath the image. They help describe the image and they are important because they’re sometimes read more often than the body of text. Caveat: not all images need a caption – avoid over-optimization and keyword-stuffing. You’ll have to decide if including a caption would help the reader understand your message or if it’s not absolutely necessary.
4.) Alt tags or Alternative tags
Search engines can’t “read” images (at least not yet). They use alt tags (also known as alt text) to figure out what the image is about and if it correlates with the surrounding text. Optimized alt tags give search engines content they can index. If you don’t specify your own alt tags, most content management systems like WordPress will automatically use the file name or leave it blank, which doesn’t benefit you at all. Alt tags should always include your keyword/keyword phrase. Unlike the file name, it’s ok to include spaces since alt tags are read as straight text, even by search engines.
This is what the file name, title tag, caption, alt text, and description look like in the backend of WordPress:
Using Images for Social Media
Images not only make your content more relatable, but also more “shareable.” Make sure your website, especially the blog section, includes social share buttons that readers can use to easily share your content on social media.
To lead traffic directly to your site from social channels, you can upload a webpage link accompanied with an image – posts with an image get better engagement than text-only posts.
Images & Page Load Speed
Images play a huge roll in page load speed, which is important for both user experience and SEO. The faster your site loads, the better it ranks – especially on mobile. If you upload a HUGE image only to show it significantly scaled down, the page still has to load the original size. That’s why you need to compress the image size.
So there are two essentials for optimizing an image.
1.) Compress to Reduce File Size
Compressing an image helps the website load faster, improving user experience – and Google notices. “When we compress an image, we make sure the quality change isn’t really noticeable by the human eye, or barely detectable. We like to use the tinyPNG compression tool, which can sometimes reduce the image size by 70% or more.” ~ Michael Pisanzio, Developer
Photoshop is another good option.
2.) Scale the image down to the appropriate size (“serve scaled image”)
Next, we make sure the image size is correct. Even though we can shrink the size of the image with code (like CSS), the web still loads the full size of the image first. If an image is saved at 1980px wide, but the website shows only 400px, it’s important to save the image at its max (400px).
We like to use WordPress as our CMS because we can upload the images at full resolution. By using WordPress settings and manual code in the functions.php file, we can generate image thumbnails from the full resolution image that was uploaded; this tells the page to load a specific thumbnail size instead of the full sized image.
Images for Mobile
I already hinted at mobile – mobile is a big deal, given that more than half of the world uses smartphones. Images have the power to enhance user experience in mobile – or sabotage it, which increases bounce rate. Make sure your images have responsive design: the ability to respond to the size of device it’s being viewed on, including large monitors, smartphones, tablets, etc.
Image resolutions should be optimal for mobile. The responsive design should be fluid with any size or resolution, and this applies to images as well. We like to have the images 100% width, and if they are not 100% width, it is nice to have them centered horizontally.
Content Delivery Network
To help their site load faster, some companies use third-party image hosting platforms. This essentially uploads images to the third-party server, which lessens bandwidth of your site. One kind of third-party hosting that can be helpful for image SEO is a Content Delivery Network (CDN), a tool for increasing page load speed. With a CDN, website images are saved to various servers throughout the world. This allows viewers to load them from a server nearer to them, boosting the speed of your website.
This is a lot of information. If you feel lost in image SEO, just keep these 4 main points in mind when optimizing images for your website:
- Optimize the image’s file size to improve load time.
- Optimize the scaling of an image.
- Choose descriptive alt text with a keyword.
- Include the keyword in the image file name.
Google doesn’t try to hide what they want to see concerning image SEO. They list out the principles in their Webmaster Guidelines, which you can always check to make sure you’re on the right track.
Image SEO is a LOT of work, but it’s worth the time and effort since it can increase your sales leads. Contact us if you have any questions or would like to schedule a meeting to talk more about image optimization.
Posted on: December 15, 2017