A picture is worth a thousand clicks. Images can bring life to your webpage, explain concepts that are difficult to write out, and pull in traffic from users with visual appetites – provided that you’re using them correctly. Almost all modern websites use images in their design. Whether that usage is sparing or splendorous, you need to put in the work to optimize your images for search engines.
From logos to data visualization to hero images, the modern web is a vivid and colorful space. The payoff from using images in design range from branding and visual appeal to educating consumers, but the bottom line cost is in loading times and optimization. Google has come a long way in accommodating image searches and incorporating them into ranking, but like all things SEO, it takes some work on behalf of the designer to make sure you’re getting the most bang out of your buck.
Before getting into the nitty gritty of SEO, it’s worth taking a moment to consider the gold standard of content marketing: original content. Stock images can work when you’re pressed for resources or looking at a page that isn’t intended for mass traffic, but, for the most part, your strongest bet for pulling in traffic and setting apart you brand is to use high quality original content. Stock images aren’t going to pull in any major traffic on their own, whereas impressive original photography can do just that.
Best Practices
On the very front-end of image optimization, there are four major concerns:
- File size
- Naming
- Captions
- Alt-text
The file size of your images can make a major dent on site load times, which affects both your SEO ranking and bounce rate. Slow loading times are a surefire way to chase off users and reflect poorly on your brand. The best way to address file size is by using the right format for the purpose of the image and compress wherever possible without losing too much quality.
Naming, captions, and alt-text are all criteria that Google’s machine learning algorithms use to understand the context of an image and website. These algorithms have come a long way in identifying the subject matter of images, but they’re a work in progress. They aren’t going to be able to differentiate between honey or tree sap by looking at other cues, which is where alt-text, descriptions, and naming come in. Using default image titles like “IMG_8979” is a non-starter for SEO. “Raspberry Cheesecake” is a much better alternative. Captions in particular play a major role as they receive 16% more readership than other on-site text.
You want to include keywords in all text associated with your image, but not to the point of stuffing. Alt-text is a prime culprit for this tactic as it’s only shown when the image fails to load. But it’s a bad idea to, for instance, tag an image of a joyous couple as “discount car sales” since it can throw off the machine learning algorithm trying to understand the specific image, and also works against accessibility for users with disabilities who will be unable to view the image. Once again, descriptive and accurate is the way to go.
File Formats Galore
As mentioned earlier, file formats and compression are a huge part of image optimization, and you have quite a few choices at your fingertips. Some of the most popular image formats on the web include:
- JPEG
- GIF
- PNG
- SVG
Each format has its own strengths and weaknesses, making them best-suited for specific applications.
JPEGs are popular because they have efficient file compression, allowing for high resolution with low file size. They’re your go-to choice for hero images, product display, or any image that requires high definition.
SVGs are vector graphics, which use lines, points, and polygons to render images that display without pixilation at all different resolutions. Vector graphics are great for simple geometric designs but can’t be used for high-definition photorealistic images.
PNG vs. GIF
One of the limitations of JPEG is that it doesn’t support transparency, which makes it difficult to apply to a number of on-site elements like logos and buttons. The remaining choices to accommodate this aspect of your design are GIFs and PNGs. Both file formats support transparency and offer viable file compression with minimal loss for size considerations, so it leaves the designer with a toss-up.
PNGs present the advantages of allowing for variable levels of transparency through alpha channels, brightness controls through gamma correction, and two-dimensional interlacing (allowing for images to load low to high res instead of one pixel at a time). All of these functionalities of PNG compression are a reflection of the fact that they are a much more recent file format than the LZW compression method of GIFs which extends back to the early years of the web. This is the same reason why GIFs are still used and present one significant strength: compatibility. Modern web browsers won’t have trouble loading up a PNG, but older versions may not accommodate the previously mentioned functionalities of the PNG format.
Tricks of the Trade
With the basics out of the way, there are a handful of other steps you can and should take to optimize your images.
- An image sitemap helps site crawlers navigate your website and specifically identify images uploaded through Javascript. WordPress can create a sitemap automatically with the “Google XML Sitemap for images” plugin.
- Responsive images load at different resolutions depending on screen size. You can set this manually with HTML, but WordPress 4.4 automatically generates lower resolution images from the ones you upload.
- OG Tags and Twitter Cards can be made with plugins like Yoast to ensure that your images show up whenever you’re linked on social media.
And, with that, we’ve covered the basics of SEO considerations for web design. Such is life in the day of a web designer. In a nutshell, your pain points are naming, tagging, file format choice, and a handful of SEO tricks. Happy tagging!
