Using Embeddable Getty Images

Last week, the world’s largest photo service, Getty Images, announced a new policy allowing their images to be embedded on websites for no charge. The images are embedded through an iframe which pulls from Getty’s CDN, and are watermark free, though there is a 75-pixel-high footer included.

Let’s start with the good: everyone who publishes content on the web just got free access to the largest repository of images in the world—the majority of their millions of photos are embeddable.

The bad news is that Getty isn’t doing this just to be nice. That’s not to say it’s a bad decision—I think it’s a fantastic decision on their part. Craig Peters, an executive at Getty, said, “Our content was everywhere already.” Getty’s images are obviously big piracy targets, and this is a way for them to turn that around and benefit from it—it’s not a matter of if they will monetize embedded photos, it’s a matter of when.

In regards to monetization, Peters had the following to say:

Advertising around the photo, over the photo, detailed tracking of image usage—they’re all options at Getty’s disposal. The most likely scenario is a combination: tracking and using data to sell ads to put around photos in a more targeted way.

In addition to the content implications of embedded photos, Benjamin Mayo brought up a few other interesting points to think about. Regarding usage of Getty’s CDN, Benjamin said:

In a footnote, Benjamin brings up the fact that, though somewhat extreme, “if Getty is hacked, you could be distributing malware to your visitors in mere minutes.”

Again, all this is not to say you shouldn’t use Getty’s embedded images, but it’s important to be aware of these things when considering usage.

Implementing embeds

Aside from the content and policy implications, I was curious about how we could best implement image embeds. I did a bit of experimentation over on CodePen, and I can’t say the results were encouraging.

By default, the iframe has width and height attributes that match up to the actual image size (which is fairly small, most are 600 pixels or less). Removing those attributes to rely on CSS rules for sizing causes the image to collapse all the way down to a tiny thumbnail. The image will scale up to the maximum size it can without breaking the bounds of the iframe—but scaling images up will produce extremely pixelated results.

Thinking responsively, it’ll be tricky to get natural scaling of the iframe with CSS rules alone. Each image’s aspect ratio will need to be calculated to be sized correctly. In order to do that, a small amount of JavaScript would be needed to do the calculations on viewport resize. It would certainly work, but I wouldn’t recommend it—relying on JavaScript for make-it-or-break-it layout rules is dangerous.

Performance-wise, there are a few things to keep in mind. The iframe content is entirely controlled by Getty. They could put something in there that could greatly affect your site’s performance—be it a huge, unoptimized image, slow scripts, or irresponsible requests. In that same vein, since you have no control over the images, you won’t be able to implement a responsive image strategy, once those solutions are released into the wild.

Ultimately, when considering Getty embed usage, keep in mind the advantages and disadvantages, but make the decision that’s right for you. I feel like I often end on this note, but it’s necessary: always choose what’s right for you, your team, your clients, and your use case, regardless of prevailing opinions.

Editor’s note: Updated 3/16/14 to reflect code changes made by Getty after the post’s original publication.