Dissecting GettyImage Embeds
Yes, GettyImages have decided to encourage people to embed their images. Despite opinions to the contrary I think this is A Good Thing. So what happens when you embed a Getty image into your HTML? To get something like this in your page:
you need to include a little snippet of HTML in your pages:
<iframe src="//embed.gettyimages.com/embed/81901686?et=4td6Xm2f0k6pMgQVX7pNFA&sig=fhRom4eoepnZbyWjZ0_2N3SdVG1dxQTC2GUAK4XrPjg=" width="462" height="440" frameborder="0" scrolling="no"></iframe>
which in turn embeds this HTML into your page:
<!DOCTYPE html>
<html>
<head>
<base target="_parent" />
<title>20 - 30 year old female worker pulls box off of warehouse shelf [Getty Images]</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--[if lt IE 10]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<link rel="stylesheet" type="text/css" href="//embed.gettyimages.com/css/style.css" />
<section id="embed-body" data-asset-id="81901686" data-collection-id="41">
<a href="http://gty.im/81901686" target="_blank"><img src="http://d2v0gs5b86mjil.cloudfront.net/xc/81901686.jpg?v=1&c=IWSAsset&k=2&d=F5B5107058D53DF50D8BA2399504758256BF753C679B89B417A38C0E9F1FBB9F&Expires=1394499600&Key-Pair-Id=APKAJZZHJ4LGWQENK3OQ&Signature=UC1YXxhGwSAY0BduwMZqnFQ7fcAQTdCksDvYu4WVmNWlTou7NktH7rZ8uk7BLbupJ4sp0ijiDaA93Yi2XijnC-TtcUO1Kylcew4nZpM~Al9jD0OSfx5yNe7jcIalweGpLGOdMLTXn0wRs6XfEh3~1fc~csMrAesHJkUayhBqNxo6Xja-35XQLx98d5fg6UXazOsCRT-UzebWA4dFURz~BSxXgq0RtU~LhKVKRZvkUTvl2RrsqBcN4bW3i~dbNMwHKn~7s9dMy5CxH-7k4ELyJaBClWEO2Jgr5WV9cXy~WGBQnNd-5Lb7CMcZclzn88-LbmDnFcO~BVLgtSU5x-KTpw__" /></a>
<footer>
<ul class="meta">
<li class="gi-logo icon icon-logo"></li>
<li>Bob O'Connor / Stone</li>
</ul>
<ul class="reblog">
<li>
<a href="//twitter.com/share" title="Share on Twitter" class="twitter-share-button" data-lang="en" data-count="none" data-url="http://gty.im/81901686"></a>
</li>
<li>
<a class="icon-tumblr" target="_self" title="Share on Tumblr" href="//www.tumblr.com/share/video?embed=%3Ciframe%20src%3D%22%2f%2fembed.gettyimages.com%2fembed%2f81901686%3fet%3d4td6Xm2f0k6pMgQVX7pNFA%26sig%3dfhRom4eoepnZbyWjZ0_2N3SdVG1dxQTC2GUAK4XrPjg%3d%22%20width%3D%22462%22%20height%3D%22440%22%20frameborder%3D%220%22%20%3E%3C%2Fiframe%3E"></a>
</li>
<li>
<a href="javascript:void(0);" title="Re-embed this image"><i class="icon-code"></i></a>
</li>
</ul>
</footer>
</section>
<aside class='modal embed-modal' style='display: none;'>
<div class='contents'>
<a class="icon modal-close icon-close" href="#close" title="Close"></a>
<span id="re-embed-body">
<h3>Embed this image</h3>
<p>Copy this code to your website or blog. <a href="http://www.gettyimages.com/helpcenter" target="_blank" id="learn-more">Learn more</a></p>
<p class="commercial-use">
Note: Embedded images may not be used for commercial purposes.</p>
<p id="embed-link">
<textarea></textarea></p>
<p class="terms">
By embedding this image, you agree to Getty Images
<a href="http://www.gettyimages.com/corporate/terms.aspx" target="_blank">terms of use</a>.</p>
</span>
</div>
</aside>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/script/embed.js"></script>
<script src="//platform.tumblr.com/v1/share.js"></script>
<script src="//platform.twitter.com/widgets.js"></script>
</body>
</html>
You can see Amazon’s CloudFront is being used as a CDN for the images, and that Getty are using CloudFront’s Signed URLs to expire the images…it looks like after 24 hours? This isn’t a problem because Getty are serving the page up, but anyone that’s tried to snag the image URL for reuse (Google Images?) will end up getting a 400 error.
I thought it was interesting that the embedded iframe gives you not only the image, author and collection, but also links to re-share the image on Twitter and Tumblr. I guess this is Viral Marketing 101, but it’s smart I think, since it encourages reuse, and the recycling of content on the Web. Conspicuously absent from the reshare buttons is Facebook – maybe there’s a story there? Also, as we’ll see in a second, the description of the image is missing from the embedded view:
20 - 30 year old female worker pulls box off of warehouse shelf
Of course the other big thing the iframe does is gives Getty an idea of where their content is being used. Anyone who uses this one line embed iframe will trigger an HTTP request to a embed.gettyimages.com URL (hosted on Amazon EC2 incidentally). These requests, and their referral information can be stashed away and analyzed, so that Getty can get a picture of who is using their content, and how. Embedded images and the Twitter and Tumblr reshares are automatically linked to Getty’s specific short URLs, such as:
http://gty.im/81901686
The number used in the short URL is also used in the expanded URL:
http://www.gettyimages.com/detail/photo/year-old-female-worker-pulls-box-off-of-high-res-stock-photography/81901686
But the title text is just there for SEO, it can be changed to anything:
http://www.gettyimages.com/detail/photo/wikileaks-storage-annex/81901686
Ordinarily I’d be down on the use of a short URL, but in this case it’s role is more of a permalink. Of course these short URLs have the same problem as Handles and PURLs in that people won’t ordinarily bookmark them. But, Que Sera Sera. As the Verge pointed out these embedded iframes could end up depriving Web content of lead images, if the GettyImages decides to pull the plug on the embeds and they suddenly 404. But their credibility would suffer quite a bit by a decision like that. I think it’s important that they are encouraging the Web to rely on these URLs, and that they are putting their reputation on the line.
Of course lots of inbound links to those pages should do wonders for their PageRank. Plus, following that link allows you to purchase the image, explore other images by the photographer, related images in the GettyImages collection, as well as see some additional metadata about the photo: item number, rights, license type, original file dimensions, size, dots-per-inch. Some of this metadata is even expressed using RDFa (Facebook’s OpenGraph metadata) … which makes the lack of a Facebook share button even more interesting. In addition there is also some minimal use of schema.org HTML microdata for the search engine’s to nibble on. If you are curious, Google’s Structured Data Testing Tool provides a view on this metadata.
It seems like there’s an opportunity to express more information in RDFa or microdata, specifically the details about the original, as well as licensing/rights metadata. Oddly the RDFa doesn’t even mark up the author of the image, I suppose because Facebook’s OpenGraph doesn’t give a way of expressing it. They could start by marking up the author of the image, but what if Getty established photographer pages, so instead of Bob O’Connor linking to:
http://www.gettyimages.com/search/2/image?artist=Bob+O%27Connor&family=Creative
What if it linked to a vanity URL like:
http://www.gettyimages.com/people/bob-oconnor
This would be a perfect place to share links to author’s other social media accounts, a bio, their photographer friends, etc. I’m thinking of the sort of work that National Geographic are doing with their YourShot application, for example this Profile page for Bahareh Mohamadian.
The licensing restrictions and iframes around these images would have ordinarily turned me off. But given Getty’s market position in this space it’s completely understandle, and seems like a useful compromise for now. These landing pages are a perfect place to make more structured metadata available that could be used by integrating applications. Getty should invest in this real estate, not only for the Web, but also for data resuse across their enterprise. The landing pages are an example of just how influential Facebook and Google have been in promoting the use of metadata on the Web. Without them, I think it is safe to assume we wouldn’t have seen any structured metadata on these pages at all.