Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

SEO image optimistation for improved rankings

Manage the size and quality of your images and speed up load times to make them SEO-friendly

As designers we’ll often spend a huge amount of time carefully crafting graphics for use online, but you shouldn’t think that’s the end of the process. To get the best results from your graphics you need to understand what happens next…

This tutorial will show you what WordPress does when you upload images and the steps you can take to improve the results you achieve. We’ll also help you avoid the pitfalls that will adversely affect your image quality or make your files unnecessarily bulky.

Currently, images are one of the most overlooked aspects of search engine optimisation (SEO). In this workshop, we’ll cover some effective techniques you can apply to drive much more traffic to your site. We’ll also help you decide when to leave things to an image-management plug-in and other occasions when you might want to be a little more hands on.

What’s that crunching?

When you upload an image using Upload New Media, you might have noticed the progress bar says ‘Crunching’. This is when WordPress is creating copies of your image at the three sizes specified in your Media Settings and any theme-specific custom image sizes (eg Twenty Twelve creates a 624px-wide image).

Cut that out

If you’re never going to use these image copies you can put ‘0’ in each of the image size fields under Media Settings and they won’t be generated. Remember they won’t be available for selection when adding images to your pages or posts. Your theme may still generate its own custom-sized images though.

A quality decision

If you decide you want to keep those images you’ll need to be sure that they achieve the right balance between quality and file size. The default image quality percentage is 90, but you can change this to any value you prefer either by installing a plug-in or by adding a single line of code to your theme.

JPG Image Quality

This plug-in adds an option to the Media Settings page to enter a value from 1-100 for the generated copies of your image. Settings above 95 are unlikely to deliver a perceivable improvement and setting 100 will significantly increase file sizes. Remember that neither this plug-in nor the default WordPress setup will change the quality of your original image.

Without a plug-in

If you don’t want to add a plug-in to your site then you can simply add the following code to your theme’s function.php file. Ideally you’ll be working with a child theme and add this line to the function.php through Appearance>Editor and selecting Theme Functions. Remember that you will need to reapply this edit if you replace it with an upgraded version in the future.

001 add_filter(‘jpeg_quality’, function($arg){return 95;});

Lost for good

If you upload a heavily compressed JPEG to your site and allow WordPress to generate resized copies at a higher-quality setting you’ll end up with larger files but with no improvement in quality. You’ll achieve the best results by creating the finished file you need from the highest-quality original image you have.

The handmade approach

If it’s manageable we’d normally recommend that you compress your images at each of the sizes you need them on an individual image basis and then upload them to WordPress. That way, you’re in complete control over the quality/file size decision and you are only creating files that you’re actually going to use.

Going deeper…

Delve a little deeper into JPEG compression and how your chosen optimisation tool works to achieve the best results. For example, you can dramatically improve the quality of some images by understanding the JPEG’s 8px grid. There are also some great tips online; for instance, use a quality setting of 51 in Photoshop.

A new engine

If you intend to use WordPress to generate resized images from your original image you should try out the ImageMagick Engine plug-in. This replaces the standard graphic library used by WordPress and can deliver huge improvements in the quality of resized images. ImageMagick is not as widely supported as the default WordPress setup so be sure to read the installation instructions.

The greater good

The search engines constantly refine their algorithms to deliver better results. Original, high-quality content, including images, genuinely relevant to the searcher should be your number one goal. Always keep your target audience in mind. Create great new images and follow the other search engine-friendly techniques listed here and you’re much more likely to achieve good results.

Provide some context

Pages and posts that make consistent good use of related keywords within the image attributes and in nearby headings and body text will rank better than pages just containing images. That portfolio or case study you’re working on will really benefit from creating some associated text. Your audience will appreciate it and Google et al will reward you for it too.

Resize – then upload

Search engines penalise slow-loading sites. Avoid using WordPress to scale down your image on the fly. Instead work out the width and height you want the image to appear, create the very best, most optimised, suitably cropped and finished version of the image that you can – then upload it.

Friendly file names

Be sure to give your images search engine-friendly filenames that include relevant keywords separated by hyphens. It’s tempting to overlook this, knowing the filename won’t appear on the finished page – however, it will be seen when the page is crawled. See for yourself with a Google image search. You’ll find most of the top results contain the word or phrase that you used.

Image title attribute

The text you type here will pop up after hovering over the image for a second. Make it snappy and descriptive. Avoid repeating the same content for different attributes and using ‘stop words’; these are words that search engines tend to ignore and therefore offer no benefit. Search for stop word lists online to find out more.

What’s the alternative?

This attribute was originally developed for visually impaired users so keep this in mind when crafting alt text. If you couldn’t see the image and hoped for the most helpful and richest experience, what alternative text would you wish the designer had provided? Type that text here and Google will reward you for your trouble.

Captive captions

Along with the page title, lead and section heading, captions are the most commonly read words on a page. A good caption clearly identifies the subject of the image. Without being redundant, it is succinct, establishes the picture’s relevance to the page, provides context for the picture and draws a reader’s attention into the page. Why wouldn’t you use one?

The Description attribute

This text appears on any page where the Attachment Post URL option is used when inserting an image and may also be used by some themes. If search engines can crawl to it they will take it into consideration when assessing a site’s relevance.

Width and height

When you add an image using Add Media the width and height are included in the code so the browser can build the page more quickly. If you add image code yourself be sure to include these attributes to avoid slowing your page.

Feed the bot

This handy tool from examines the images on a page, gives you information about the alt attribute and whether the width and height are set right. This can highlight issues with images you might have overlooked, like alt text for your site logo. Be prepared to edit your theme template to fix that one.

Visit the Gallery

The Gallery contains a variety of options you can easily set to suit your requirements and take better control of your images. Highlights include the ability to exclude specific images, which is useful if you don’t want a featured image to also appear again in your Gallery. Here’s the full list of options: Remember, the Codex is your friend.

Don’t stop there!

This tutorial has covered some of the most popular image-management techniques, but there’s still more you can do. Media handling improvements are likely to feature heavily in future WordPress releases and developers are always finding innovative ways of extending the platform’s functionality like Lazy Load, which only loads images when they are visible to the user.