Use Professional Photographs from Getty Images for Free

Getty is following the YouTube model. You can embed an image from their website using a line of code and the embedded images, in future, may carry advertising. It’s a win-win situation for both parties.

There are a couple of restrictions though. One, you cannot modify the size of images embedded through Getty Images. Getty says that you cannot use their images on commercial sites where the intent is to sell a product (if your blog has AdSense, it should not be an issue). Also, since these images are served inside an IFRAME, they will not be indexed by search engines.

WHICH GETTY IMAGES CAN I EMBED

Not all images on the Getty website are available for embedding on your website. When you perform a search, hover your mouse over the image thumbnail and look for the embed icon. If the icon is present, that image is embeddable and you can click the icon to get the actual embed code.

MAKING GETTY IMAGE EMBEDS RESPONSIVE

The embed code from Getty has a fixed height and width and it may thus break the layout of your website, especially on mobile devices. As a workaround, we can add a bit of responsiveness to the embed code (remember Google Maps) so that the embedded image will automatically fit the screen of the user.

All you have to do is take Getty’s HTML code and add it inside the .getty-images class in the snippet below. 

<style>
  .getty-images {
    position: relative;
    padding-bottom: 80%; 
    height: 0;
    overflow: hidden;
  }
  .getty-images iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }
</style>

<div class="getty-images">
  <!-- Getty Images Embed Code Goes Here -->
</div>

[*] The value of padding-bottom in line #4 is basically the aspect ratio of the image and you may have to modify this number based on the dimensions of the image provided by Getty.