7 Apr 2015

Two free tools that synergise to optimise images for search

So, we were having further discussions on Google+ about images and how to optimise them for the web. Image search, normal search and their use on social. Our conversation took a distinct left turn when this post by Dustin W Stout appeared on Social Media Examiner.

It made me smile. Dustin is a self-confessed non-SEO type dude, but the element of his article that talked about optimising images for the search engines was bang on the money. He'd either navigated a steep learning curve or drafted in help.

Turns out, it was the latter. He'd drafted in Kristoffer Howes to assist him on how the search engines 'see' images. Moreover, what we can do to help them. As such, the resultant accuracy in the article is much less of a surprise.

But when the article got scooped into the Google Semantic Search Community, the discussion went into much greater depth. Not only did we summarise the points Dustin and Kristoffer made, but we took a deep dive into the semantic elements of online images.

Understanding how search indexers 'see' images

To understand mark-up, we must first recognise how machines "see" an online image. Google, with the help of DeepMind, is making great progress in understanding images at Pixel level. While this is grand in relation to more accurate results in image search, it misses the semantic bullseye.

flowcharts of a glimpse sensor and a glimpse network and how they work to compute images by pixel
How Google is breaking down images to make their computation at pixel level less demanding

HTML, the railway tracks upon which the semantic train chugs, is not a human-legible tool. Its purpose is to help machines interpret information in a way that they and people with accessibility issues can "see" the web like fully-functioning humans.

In a previous article, we touched on the type of mark-up you can incorporate to help identify what license you were publishing images under. But the mark-up in that article is only a glimpse of the potential we have to help machines understand our published images.

Responsive web design: why image optimisation is so important

I use responsive design in lieu of 'mobile' for a very distinct reason. There's been a lot of kerfuffle about Google's impending update for mobile search. That is, non-mobile optimised sites have less chance of showing up in mobile search than those that are "mobile-friendly".

Responsive design should have a positive impact on user-friendliness on any content platform. So that's what we're going to look at, below. Whether it's worth everyone optmising for mobile is conjecture.

Although it may be a way to squeeze customers for more money, as an SEO, you still have to prove ROI. There are doubts that the demographic for many mobile users will benefit many sites that employ SEOs.

Many preaching the urgency for "mobile friendly" updates to their clients' sites will end up with egg on their face when figures don't rise in line with (undeliverable) expectations. But that's for another time.

Responsive in my book means a great experience however your user finds your website. For that, it's imperative that you nail fast load speed, a ranking factor across all search mediums.

But we also have to consider semantics. How does your image relate to searcher's intent?

Great, your page loads fast and your alt text is a close match to the search string. But if it's not relevant to the query intent, you've blown it. And that's where the difference between applying a fit title, description and alt text and full semantic mark up can make the difference for you.

Toolbox Tip:

your alt text should read so that a blind person visiting your site would not know that they're not seeing an image.

The words describing the image should fit fluently in line with your prose, providing a smooth, accessible experience for the impaired visitor.

Irfanview and GeoSetter - Resize and Encode your images

The first thing you need to do is download the two free programs we're going to use to mark up our images. They are:

  1. Irfanview;
  2. GeoSetter;

I downloaded Irfanview from CNET (I think - but I've had it for three years, so don't quote me on that). But you may well have your own favourite repository from those offered on the download page.

Geosetter, the setup_exe didn't work for me, but the zip file was just dandy. I also created an account. There's no harm in helping freeware sources build their own resource, where applicable.

Why Irfanview?

Geosetter, I'd never heard of. When researching EXIF data, I was pointed its way by an article on data editors on Digital Inspiration. But what a find.

Resize/Resample image pop up box in Irfanview image editor showing resizing capacity
resize image function in Irfanview

But why, of all the image editors, should I choose Irfanview?

One of the reasons ties in with something Dustin shares in the catalytic post I mention at the outset. Dustin's a great one for being up to date with the right image sizes for the social platform of your choice.

Very often, we create the same epic image, but adopting their size to each platform is so labour-intensive.

With Irfanview, when you come to resize your bespoke image sizes, you can save each size as a template in the settings. This is invaluable when it comes to distribution of similar content across multiple platforms.

This ties in nicely with the first aspect we need to look at. Resizing our images to optimise page load speed, but in a way that the image is still clear.

Using the "Glimpse" image above, we'll look at resizing the object with the RIOT plugin you've downloaded with Irfanview. Then we'll look at adding EXIF data to the resized image with both Irfanview and, for bulk processing, Geosetter.

Resizing/Sampling your image with Irfanview/RIOT

Once you've downloaded the three pieces of software (Irfanview, its plugins and Geosetter), restart your computer. This is just a double-check measure to ensure your new programs have access to all your drives.

Irfanview Command Ribbon in Windows

Open Irfanview (click the Start menu and type Irfanview in the search box if you've not created a taskbar/desktop shortcut). In the top left corner of the open program, choose File > Open or simply type the letter "O". Then navigate to an existing image on your PC that you want to optimise, click the image and it will open in the Irfanview editor.

The command ribbon across the top shows several options:

File | Edit | Image | Options | View | Help

With your image open in the Irfanview editor, click the word "Options"; a drop-down menu will offer many prompts.

To perform a lossless resize, you need to choose "JPG Lossless Rotation (Plugin)", as per:

screenshot: Irfanview JPG Lossless Rotation Context Menu

This will bring up yet another menu. The default radio button command is set to "Transformation: None (can be used for optimizing and cleaning)". This is what we want.

Also, you should see that "Optimize JPG File" and "Apply original EXIF data to new file" are ticked. We want to leave them that way, too.

screenshot: Irfanview Lossless Transformations Default Settings

All that you need to do is press the "Start" button and the software will optimise your image. You can do all manner of fancy things, here. But for most people who just want a great looking image that loads faster, the default settings work just fine.

Toolbox Tip:

for even greater compression, when saving the image, choose the "Save as web" option. This takes you to the two-panel RIOT dashboard. You'll see your existing image in the left and an even more compressed version in the right panel.

To compress the image further, hit the save button and it will save as the reduced size file. You can also have a play around with sizes and ratios in the RIOT plugin before pressing save.

What is EXIF and IPTC data

If you've been paying attention, you'll have noticed several prompts in the Irfanview images rendered here to date to amend EXIF data. The reason I've not mentioned these before is because we're going to update that data now, but in a more in depth manner.

EXIF data is the data that a smartphone or digital device stamps on a recording. This could be audio, a photo or a video, and is an indelible stamp added by the machine that made it.

IPTC is the recognised body that launched the need for such file data to be stored. The keywords, location data, origin and category information metadata helps news and publishing companies identify specific media.

You can read more about IPTC here. The reason it's important for our exercise is because it's under this tab that Irfanview hides the metadata that we can edit.

Still in the Irfanview window you have open, look up to the command ribbon again and click "Image". The first prompt on the dropdowm menu is "Information"; either click that or type in "I".

This will show you the metadata that Irfanview has extracted about the image.

screenshot: Irfanview Image Properties

This includes size, resolution (which you can change), where it's stored and much more. Beneath the table are two buttons, "EXIF info*" and "IPTC info". Click "IPTC".

This opens up a whole other box of options. Here, you can really optimise your image for discoverability:

screenshot: Irfanview editable metadata database

The amount of IPTC data you can enter is comprehensive. From the author name and their byline to the precise location and date, you can safeguard copyright. From a search point of view, you can add a category, sub-category, keywords and, from a Google Local aspect, location again is important.

When thinking about the keywords you want to add, they - and the image - need to be relevant to the content in the same article. The category should also align with the topic, concept or ontology of the words around the image.

The incorrect use of an image or the way it's tagged leads to bad user experiences. We all know what search engines think about those: penalty time!

Once you've input as much of the data as you want, simply hit the "Write" button. All of your information will now be embedded in the file.

Geosetter - bulk writing of EXIF data

Geosetter has a much more user-friendly interface that Irfanview. You can choose themes and as soon as you load it, the software extracts all image files on your hard drive into its database.

The default load file is, of course, your Windows "Pictures" folder. But if you click over "Images" in the top command bar and click Open, you can open any directory (folder) in the cloud or on your hard drive.

Any data file that Geosetter can edit will load into the dashboard:

screenshot: Geosetter dashboard

You can then edit just one or any number of images from the directory. Say you had a folder of holiday pictures, but only wanted to tag those with your spouse in. You could select all of those photos in one batch and then bulk edit all of them together.

You do this by clicking once on the first image you want to edit. For every additional image you want to add the same data to, hold down the CTRL key before you click that next picture. The selected files should display set against a blue border.

Right click over of any one of those selected images and a context menu will pop up. Mouse over "Geosetter > Edit Metadata of Image files" and click that latter instruction:

screenshot: Geosetter multi-image select option

An editable window similar to that in Irfanview will greet you. It will show one main image in the left panel, a list of all the file names selected beneath the image and the familiar edit panel to the right.

screenshot: Geosetter multi-image select option - EXIF data
Here, you can enter one batch of descriptions, then hit the "Select Current Values for All Selected Images" button to update all of your selected images with the input data. If you're sorting out your entire holiday picture library, the ability to bulk-edit your EXIF metadata is priceless.

Toolbox Tip:

you have the ability to add more metadata in Geosetter, especially location information.

If you preferred working with the Geosetter interface, there's no reason why you can't just use Irfanview to resize your images and then Geosetter to add your EXIF data.

And that is all there is to it. Once you've embedded that data in your file, it will travel with the image, unless someone edits or removes it.

This last image I'll share is the same one as the first one in this post, but now subjected to the outlined edited EXIF data process:

Glimpse recurrent neural network image with additional, opimised EXIF data

Put through exifdata.com, an exif metadata ripper, you can see the additional information embedded into the image:

Extracted EXIF data from optimised image

Extra work, but the for opportunity to rank with your images in Google image search with confidence? Worth every extra penny you commit to the process. Happy editing!

Bonus Tip:

you can 'plug in' Geosetter into Irfanview. This makes the transition between the two programs seamless.

With the Irfanview program open, go to "File > Open with external editor":

setting open with external editor in Irfanview

In the image, I've already set my two external editors as Geosetter and Windows Photo Viewer. When you first select the external editor option, you'll be presented with two empty spaces.

To set these up, first, click in the first empty space, whereby you'll be prompted to browse for the program you want to use. Simply navigate to the file that contains Geosetter (in mine, C:\Program Files (x86)\Geosetter), open that file and click on the [filename].exe.

You can repeat this for the second empty space and choose any image editor/viewer of your choosing. Once both programs are selected, they'll be ready for you every time you use Irfanview.

Any time you've made your edits in Irfanview and want to open them in either of the chosen programs, click "File > Open with external editor". Your file will be open and ready for you to edit in the program you choose. Happy days.