Introduction: How to Embed Photos in an Instructable

Recently, I've been trying out making Instructables with photo-only instructions (see my Rosette and Mesh Decolletage Instructables).  For simple Instructables, I think it's a format that looks good, and I like the idea of wordless instructions.

If you'd like to try this yourself, here's a quick tutorial on embedding photos into your text space. It's not just button clicking; you'll be learning a little bit of basic HTML. But if you've never done any coding before, don't be afraid! It's not that hard, and you only need to learn a tiny bit to embed a photo.

And here it is: <img src="photourl.jpg"/>

Except you'll replace photourl.jpg with your photo's URL.
But what is your photo's URL? Let's take a step back.

For this Instructable, I'm going to be working with this photo of a robot t-shirt:

You should follow along in a different window and try all of the stuff I show you.


Step 1: Upload the Photo
Upload the photo to Instructables normally. You don't even have to attach it to the Instructable, just get it onto the site. (It can actually be a picture from anywhere on the internet, but I'm just going to work from inside the Instructables site.)
You should upload a pretty big photo so that you'll be able to see all of the options.

Step 2: Copy the image URL
Right click on the thumbnail of the image and select "Copy Image URL".



Step 3: Playing around with the URL
We're going to take that URL and play with it a little bit, so go ahead and paste that URL string into a new tab of your browser. Instructables has a few different versions of your photo.
Because we copied from the thumbnail, the URL string should currently end with ".THUMB.jpg". So the image is small, like this:


Now change .THUMB.jpg to .TINY.jpg to make it even smaller.


Try SQUARE, SQUARE2, and SQUARE3:


Try MEDIUM.


Try LARGE.


So you see that you have a lot of default options for the size, and even the shape, of your photo.

Step 4: Inserting into the source code
Back in your Instructable, click on the Source button. Now you're seeing the HTML that your Instructable is using. We're just going to be messing with images, so you can ignore most of it. Navigate to the place where you want to put your photo, and use that code we learned earlier: <img src="photourl.jpg"/>

But instead of photourl.jpg, put in your own photo URL. For example, this is
<img src="https://cdn.instructables.com/FWJ/14GN/H401UXBX/FWJ14GNH401UXBX.THUMB.jpg"/>



Step 5: Width and height
You don't have to be limited by the default sizes that we explored in Step 3. You can also specify a specific width or height (or both!) in the HTML. It's easy! Try:

<img src="photourl.jpg" width="200"/>


<img src="photourl.jpg" height="200"/>


<img src="photourl.jpg" width="200" height="200"/> OR <img src="photourl.jpg" height="200" width="200"/>

But when you constrain both width and height, you can distort your image.

The width of an Instructable is usually 650px. You should set your image URL to LARGE in most cases so that you have high resolution. Otherwise it might look like this:


And that's all you need to know!
To embed an image here, anyway. But if you enjoyed this small taste of power from coding, you should learn more! It comes in handy sometimes. Probably the easiest way to learn is codeacademy.org. Click the link! Try it! Just stop if you get bored.

Comments

author
offtherails2010 (author)2017-04-14

Nice, thanks loads !!

Just that this is NOT working nowadays since Instructables has changed the editor layout environment :((

Does anyone know how to fix this "img src" adding ?

major thx in advance :)

author
pumudu88 (author)2016-12-15

This is no longer working in both chrome and firefox browsers? Is there any other way to embed images ?

author
HALİL KEREMS (author)2016-11-28

goooood

author
wjsandbe (author)2016-08-31

When I do this, the image appears in my editor, but once I save and preview the image disappears. Any idea what's happening?

author
JemmaP (author)2016-01-07

HELP!!! I don't know how to upload the photos!!!! I click on the thing that says "Click To Add Image" and drag the photos to the box (they are .JPEG btw) but I can't seem to be able to find the right button.

author
jessemckee (author)2015-01-30

This changes everything! Thanks for this, this helps big time. I'm going back through and updating my Instructable to finally lay it out the way I really wanted.

author
Igloo Studio (author)2014-12-29

Thank you! i really needed this for my instructable

https://www.instructables.com/id/Small-Engine-Lamp/

author
electronichamsters (author)2014-08-21

Do you have to do something special to get the SOURCE button? Most of those menu options don't appear in the edit view of my Instructables.

author

The instructable is a little out of date now, good catch. Now it looks like this (use the highlighted `</>` button)

Screen Shot 2014-08-22 at 10.58.24 AM.png
author

The <> button doesn't exist on my Instructable's Edit view. Does it for you?

author

Ah– when I wrote this, I think it was a pro feature. It's possible that it still is.

author
shazni (author)2014-06-17

Is it possible to embed a gif animation in an instructable where the notes are written? below is my instructable and the GIF animations only animates when it's clicked on.

https://www.instructables.com/id/Swirly-PVC-Pendant-Light/?comments=all#CKE9WDZHWJ79WSY

author
SelkeyMoonbeam (author)shazni2014-08-22

Good question.. I don't know. I'd suspect that animate-only-on-click is something the programmers of instructables put in there on purpose to make GIFs less distracting.

author
offtherails2010 (author)2012-07-05

Just tried this 'ible and am really impressed with this and once again rated 5 stars !!!

one quick question though...

how would i 'centre' an inserted picture like the t-shirt picture you have used as your examples ?

what would i write in the source code to centre only one picture inserted into an instructable ??

many thanks in advance!

;-)

author

Good question! And an easy answer.
Just surround whatever it is you want to center with < c e n t e r >< / c e n t e r>
Like this: < c e n t e r > < i m g s r c = " p h o t o u r l . j p g " / > < / c e n t e r >

(But take away the extra spaces- trying to make the comment box not read my HTML as code)

author

Ok hopefully this is the last time i bug you for another hair-brained-want of mine, lol x 2 !!!

but i really would like to change the colour of text in my instructables and was wondering if you knew how to do that ??? (if possible lol ! ! !)

author

Anything is possible!
< f o n t c o l o r = " b l u e " >your text here< / f o n t >
Or whatever color you want your text to be. There's a good listing of them at http://www.w3schools.com/HTML/html_colornames.asp.
Enjoy!

author

(oh, and it's "font color" with a space between the words- in case that's hard to read)

author

!!! DUDE !!!

Your an Absolute LEGEND !!!!! !!!!! !!!!!

Thank you so very Very VERY MUCH !!!

ALL my prayers have now been answered !!! lol !

Ive been currently been working on an instructable for the last 2 months and this is exactly what my research assistant (Google!) couldn't find for me so once again thank you so very very much for this AWESOME & MOST-EXCELLENT HELP and the really easy instructable you've made so clear that a complete beginner like me can find & edit This code ! been searching for this for so very long !

Thanks a million !!!

author

Ahh SUPERB !!!!!

Once again many many thanks with this extremely helpful bag of tricks !!

ive LONG-HAD a gripe with instructables.com never managing to properly sort out the problems with displaying the notes that we can scribble over and 'on-top' of images with our 'ibles we all make over the YEARS this one problem still hounds us so your extremely appreciated Guide has helped illuminate another way of actually making true step-by-step photo-instructables from now on and im currently employing most of all your tips on an 'ible im creating as we speak and its renewed my love for creating instructables !!!

So A GREAT many thanks for making this 'ible for the masses !

Rated 5-Stars everytime i use it !!!

;-)

author
MKosterich (author)2012-06-28

I had no idea this was how to do it and that there were all those options. Thanks for posting!

author

AWESOME!
Many many thanks! i will definitely be using this asap!

thank you so very much!!!

About This Instructable

4,733views

56favorites

License:

Bio: An engineer, seamstress, cook, coder, and overall maker. Spent a summer at Instructables; got a degree in E: Neural Engineering at Olin College; made a ... More »
More by SelkeyMoonbeam:How to Build a Cabin Foundation in a Remote LocationOrienteering Using a Thumb CompassHow to Pack Hangers
Add instructable to: