Here's the problem: Google doesn't like websites with heavy images. They slow down your website and that impacts your SEO. But if you compress your images to speed up your website, their quality will plummet and then your users
won't like them. So your users bounce and, well, that impacts your SEO. Optimizing your images can be a double-edged sword, but it's also one of the most important things you can do for your website. From making them smaller and quicker to load to adding captions for SEO, optimizing your images is easy to do and doesn't need much tech know-how. You're about to learn the simple techniques to shrink your images, hold their quality, and keep both Google and
your users happy. Yep, all in less than three minutes. Here's what you'll find in this post:
- Why optimizing your images can make or break your SEO ranking.
- What alt texts are and how to use them for better SEO (and accessibility).
- How to choose the best file format for your images.
- The simple rule for perfectly sized web images.
- Quick tips to ensure your images always appear on Google.
- WordPress plugins that can optimize your images in seconds.
Ready to kick bad SEO to the curb? Let's get started.
Why you should optimize your images
On average, images make up over 50%
of a total webpage’s weight. If they're not optimized, more than half of your website will drag down your page speed and ranking. Optimizing your images is good for business, not just for SEO but also for the user experience. Here's a quick peek of the main benefits:
- Your pages will load faster which will keep today's impatient users on your website longer. They'll leave if loading times exceed 2-3 seconds, so every second counts. Check our post on how to speed up your website for more tips.
- Your images will be crawled and indexed by Google so they'll appear in search results for users to find. This means more traffic for your site which in turn bumps up your SEO ranking.
- Your website will take up less storage space on your server. This is great news if you have a limited web hosting plan. (Check our beginners guide to web hosting for help on choosing the right host for you.)
- Smaller image sizes use less bandwidth, something your mobile users will greatly appreciate. Not to mention Google is big on mobile and if your site doesn't work well on the small screen, you'll be punished with a lower SEO score.
Alt texts and how to use them correctly
Alternative text is that field you always see beneath an image (no, not the caption. After that).
People either ignore this field completely or stuff it with keywords. But the primary use of alt texts is to give an image description for users who are blind or have low vision. You see, these users tend to have screen readers that read everything on the website out loud. So if your images don't have alt texts, these users simply won't know what the image is about. From an SEO perspective, the alt text serves as an opportunity for search engines to capture keywords in your content. The main thing to remember is to keep alt texts brief and as descriptive and specific as possible. Here's an example of a good vs bad alt text by Hubspot
. Take a look at the following image:
In their article, Hubspot describes the case of this image being used in a webpage promoting a business school. In this scenario, you'd want the alt text to include keywords relevant to business schools while also being descriptive enough to form a mental image in people's minds. Bad alt text would go something like, "Woman pointing to someone's computer screen." Whereas good alt text would read, "Business school professor pointing to female student's computer screen in class." See how that works?
Best file formats for your images
The format you choose for your images can make a world of difference in terms of size and quality. You know about JPEG, PNG, and GIF – but do you know when to use each one for web? We've got you.
JPEG is arguably the most popular image file format on the web, and for good reason. It's ideal for photographs and intensely colorful images, like products and homepage banners. You can hardly go wrong with JPEG, but there is a small catch. JPEG has two optimization modes: lossy and lossless. Lossy means that your image will be reduced by permanently deleting some information, which in turn degrades the image quality. With lossy, the more you compress the image, the lower the quality will be. Check the grey area in the images below (courtesy of Optimus
) to see what we mean.
On the other hand, lossless, as the name suggests, shrinks the image size but doesn't delete any information – so the quality stays the same. Granted, the image won't get as small as with lossy, but it'll look much better to the trained eye.
The main thing you need to know about PNG is that it's the best format for high-quality images that have transparent layers. If your image has overlays or a transparent background, save it in PNG. Where PNG is concerned, there's PNG-8 and PNG-24. We won't get into the technical details, but the higher the number the more colors it can handle. If you've got a logo with two colors in it, go ahead and save space with PNG-8. If you have a complex image or photo, go for PNG-24 so your image doesn't end up looking like an 80s video game graphic.
You know what GIFs are, but you'd be surprised at how many website owners save their product images and logos in GIF under the impression it's "better". Look, if your logo is simple and PNG is still too heavy, then go ahead and save it as a GIF. But for all that is good do not
use GIF for product images. They'll make your users think they need glasses to see them clearly.
The best size for web images
Honestly, there's no one size to rule them all. But webmasters generally agree that image dimensions should be anywhere between 1500 - 2500 px wide. It's big enough to maintain the quality, but not so big it'll weigh your page down. As for the size, when in doubt follow the "200 KB rule," which essentially means all your images will be a lot less troublesome if they're under 200 KB. If you don't have Photoshop to whittle your images down to size, try any of these free image optimization tools.
How to get your images on Google
Have you ever Googled your product or service and wondered why it's not appearing in Google Images? If you already added alt texts and your images still aren't showing, here are a few more things you can do to catch Google's attention.
Name images in plain English
Unless you know people who type "image10382365746.png" in the search bar, your images shouldn't be named like that. Giving your images a proper name that includes your top keywords is a great way to add extra SEO points to your website. Here's a short list of tips for naming your images for SEO.
- Keep the name to five words or fewer. Google doesn't like novels in image names.
- Use hyphens to separate the words so they're clearer to both Google and people. (E.g. "website-developer-portland" rather than "websitedeveloperportland")
- Add keywords but don't stuff them all in if they're not relevant to the image. Say "website-developer-oregon" not "best-website-developer-oregon-java-css-hosting-free-consultation".
- Make it descriptive enough for anyone to get the gist of what the image is about without having to look at it. Try reading the name out loud to someone as a test.
Add captions to every image
An empty caption is a missed SEO opportunity. Google crawls captions too so if anyone searches for a keyword that happens to be in one of your captions, they'll find your website. Captions are also helpful little things for users to understand your content better. According to KissMetrics
, captions under images are read 300% more often than the rest of the website. Writing a good caption is a lot like writing a good image name. Keep it clear and to the point so your users can understand the context of the image. For example, if you have a photo of a sunset, a good caption would be: Sunset on Palm Beach, Florida.
Generate an image site map
. (You can always more information on Google Webmaster Tools
WordPress plugins to optimize your images
Ah, WordPress plugins. There's no better way to spare yourself from the troubles of image optimization than installing a plugin. So here's a list of the top WordPress plugins for the job. Imagify
: For bulk optimization and three levels of compression, this plugin is the way to go. It also has a restore feature if you're not happy with the final image. More importantly, there's a free version you can use. WP Smush
: This plugin takes all the images you've uploaded and, well, smushes them down to size. It can do it in bulk or manually if you want. And yes, they have a free plan too. EWWW Image Optimizer
: There's nothing disgusting about this popular plugin. It's easy to use and automatically shrinks your images as soon as you upload them. You don't even need to create an account to use it. reSmush.it
: This one is currently the top-rated WordPress plugin for image optimization. It smushes images automatically and offers a bulk option too. The downside is it limits your uploads to 5MB in size. (Still good for a free plugin though.)
Need help optimizing your website?
Image optimization can be the extra spark your site needs to outrank the competition – but it's not something every website owner wants to deal with. If time is of the essence, let us deal with it for you. At Bilimoria Tech, we take care of each and every detail of your website so you can focus on running and growing your business. To spend less time stressing over optimization and SEO, drop us a note and we'll book you in for a quick chat to see how we can help. Sound good? Chat with us today!