Getty Images – one of the world’s largest photographic rights holders has made most of its 35 million images available free of charge for non-commercial, editorial use, allowing customers to embed them via <iframe> elements, as YouTube does with its videos. Unfortunately <iframe> elements are not responsive by default, making Getty’s standard fare of limited use in modern websites. In this article I’ll show you how to change that, together with even more resources for free images.

Getty Images

Not every image is available for embedding from Getty: those that are feature an embed icon in their detailed thumbnail view. Clicking on the icon will produce embed code that looks something like this:

<iframe src="//embed.gettyimages.com/embed/..." width="413" height="483" frameborder="0" scrolling="no"></iframe>

As you can see, the images provided are not yet high resolution, averaging around 420 pixels wide: good for illustration in body text, but not banner images. As it stands, the <iframe> will render the image at a fixed width. We’re about to change that in four steps, borrowing a technique used to make YouTube videos fluid:

Step One

Remove the width and height attributes from the <iframe>. Add http before the URL for the image, which will allow it to appear when you test the page locally. Then, add a <div> around the outside:

<div class="getty-container">
	<iframe src="http://embed.gettyimages.com/ embed/468887443..." frameborder="0" scrolling="no"></iframe>
</div>

Note the class that is added to the wrapping <div>.

Step Two

Determine the image’s aspect ratio: the division of the image’s height by its width. A square image will have a ratio of 1:1; an image that is twice is wide as it is tall will have a ratio of 1:2. Keep this ratio in mind: we’ll use it in the next step.

Step Three

Determine how wide you want the image to appear: I would suggest no more than half the width of your main content, to preserve image quality. Add the following styles to the page, adjusting the width as necessary:

.getty-container {
	position: relative;
	width: 50%;
	height: 0;
	overflow: hidden;
}
.getty-container iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
}

The image will be cut off. To compensate, add a padding-bottom amount using the ratio you determined in Step Two. For example, my image is slightly taller than it is wide:

.getty-container {
	position: relative;
	width: 50%;
	padding-bottom: 55%;
	height: 0;
	overflow: hidden;
}

Step Four

The image will now appear correct, but it’s not sitting quite right in its container. (Add a border to the <div> to see that for yourself). To compensate, we need to add 55 pixels in padding-top to make space for the caption at the bottom:

.responsive-container {
	position: relative;
	width: 50%;
	padding-bottom: 55%;
	padding-top: 55px;
	height: 0;
	overflow: hidden;
}

That’s it: you now have millions of responsive images at your fingers, provided you use them in a way that does not break Getty’s embedded image license.

The fact that Getty provides images via an <iframe> makes it important that you check that the images continue to work: technically, Getty could push anything they wanted through that iframe window, including ads, or choose to break the image entirely.

Zoommy

Zoommy is a new cheap (US$3.99) Mac OS X-only application that scrapes and searches many of the free stock photo sites mentioned here and in the previous article; 20 sites are currently covered, with searches available for both keyword and color.

Other image sources

A few alternative, free sources for photographs. The selection here is not as diverse as Getty, but offer higher resolution images, usually licensed under Creative Commons:

• Jay Mantri offers seven new professional, free-for-use photographs every Thursday.
• Startup Stock Photos provides business and technology images.
• It’s not generally appreciated that most government agencies are required to offer their creative output for free: NASA, for example, has an extensive multimedia collection available for use. Some of this collection is highlighted in Peek.space
• Foodies Feed has a growing, epicurean collection of high-quality food photographs.
• IMCreator offers free images for commercial or personal use.
• I really like the model used by imgembed: 10,000 free impressions of an image if it is attributed to the photographer, with a fee paid for every 10,000 views after that point.
• LibreStock searches some of the image collections here, plus many more.

Stocksy.com offers images at set prices of $10 and $25 for medium-sized professional images; the company is also notable for splitting income with contributing photographers at much fairer rates than other services, prompting photographers such as Thomas Hawk and Tyler Stalman to shift their images exclusively to the stock photography provider.

If you have other free (or nearly free) legal image sources you like to use, feel free to share them in the comments below! Before you do so, check out the previous article on gratis image resources.

Astrophotograph of globules in the Running Chicken Nebula by Fred Vanderhaven

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.